.vivo-portfolio-filter {
    line-height: 34px;
}

@media screen and (max-width: 600px) {
    .vivo-portfolio-filter {
        border-bottom: 1px solid var(--wp--preset--color--line);
    }
}

.vivo-portfolio-filter-container {
    display: flex;
    gap: var(--wp--preset--spacing--80);
    border-top: 1px solid var(--wp--preset--color--line);
}

@media screen and (max-width: 600px) {
    .vivo-portfolio-filter-container {
        flex-direction: column;
        gap: 0;
    }
}

.vivo-portfolio-filter-container:not(:has(.active-category)) .vivo-portfolio-filter:first-child .vivo-portfolio-filter-title {
    border-top: 5px solid var(--wp--preset--color--primary);
}

.vivo-portfolio-filter-title {
    display: block;
    color: var(--wp--preset--color--title);
    cursor: pointer;
    padding: 0 var(--wp--preset--spacing--4) !important;
    margin: 0 var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--h-6) !important;
}

@media screen and (max-width: 600px) {
    .vivo-portfolio-filter-title {
        padding: 0;
        margin: 0;
    }
}

.vivo-portfolio-filter-title:focus, .vivo-portfolio-filter-title:hover, .vivo-portfolio-filter-title:active, .vivo-portfolio-filter-title:focus-visible {
    outline: none;
    background-color: transparent !important;
}

.vivo-portfolio-filter ul {
    position: absolute;
    display: none;
    padding-left: 0;
    z-index: 5;
    background: var(--wp--preset--color--white);
    box-shadow: -5px 5px 19px 1px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--wp--preset--color--gray);
    min-width: 200px;
    margin: 0;
}

@media screen and (max-width: 600px) {
    .vivo-portfolio-filter ul {
        display: none;
        position: relative;
        border: none;
        box-shadow: none;
        min-width: auto;
        padding-left: var(--wp--preset--spacing--36);
    }
}

.vivo-portfolio-filter ul li {
    list-style-type: none;
    cursor: pointer;
}

.vivo-portfolio-filter-item {
    padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
    transition: all 0.3s ease;
    font-size: var(--wp--preset--font-size--x-small);
}

.vivo-portfolio-filter-item.active-category {
    color: var(--wp--preset--color--primary);
}

.vivo-portfolio-filter-item:focus, .vivo-portfolio-filter-item:hover, .vivo-portfolio-filter-item:active, .vivo-portfolio-filter-item:focus-visible {
    outline: none;
    color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--line);
}

@media screen and (max-width: 600px) {
    .vivo-portfolio-filter-item {
        border-bottom: 1px solid var(--wp--preset--color--line);
    }

    .vivo-portfolio-filter-item:last-child {
        border: none;
    }
}

.vivo-portfolio-filter:focus, .vivo-portfolio-filter:hover, .vivo-portfolio-filter:active, .vivo-portfolio-filter:focus-visible {
    outline: none;
}

.vivo-portfolio-filter:focus .vivo-portfolio-filter-title, .vivo-portfolio-filter:hover .vivo-portfolio-filter-title, .vivo-portfolio-filter:active .vivo-portfolio-filter-title, .vivo-portfolio-filter:focus-visible .vivo-portfolio-filter-title {
    color: var(--wp--preset--color--primary);
}

.vivo-portfolio-filter:focus ul, .vivo-portfolio-filter:hover ul, .vivo-portfolio-filter:active ul, .vivo-portfolio-filter:focus-visible ul {
    display: block;
}

.vivo-portfolio-filter:has(.active-category) {
    border-top: 5px solid var(--wp--preset--color--primary);
}