.portfolio-tabs__container {
    position: fixed;
    display: flex;
    left: 0;
    top: 151px;
    height: 0px;
    width: 100%;
    margin: 0;
    opacity: 0;
    background-color: rgba(3, 8, 16, 0.7);
    visibility: hidden;
    transition: visibility 0.125s, height 0.125s, opacity 0.125s;
    transition-timing-function: ease-in-out;
    z-index: 99;
}

.portfolio-tabs__container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.25s;
}

.portfolio-tabs__container svg {
    padding: auto;
}

.portfolio-tabs__container--shown {
    height: 153px;
    visibility: visible;
    opacity: 1;
}

.portfolio-tabs__container--shown path {
    transition: fill 0.25s, outline 0.25s;
}

.portfolio-tabs__container--shown a:hover {
    background-color: var(--color-primary-600);
}

.portfolio-tabs__container--shown a:hover path, .portfolio-tabs__container--shown a:active path {
    fill: var(--color-secondary-100);
}

.portfolio-tabs__container--shown a:focus {
    outline: 0;
}

.portfolio-tabs__container--shown a:focus svg {
    outline: 2px solid var(--color-primary-600);
}

.portfolio-tabs__container--shown a:active {
    background-color: var(--color-tertiary-400);
}