/* -------------------------------------------
    Dropdowns
        - Dropdown
        - Dropdown-expanded
---------------------------------------------- */

// Dropdown
.dropdown {
    position: relative;
    &:hover,
    &.show {
        .dropdown-box {
            visibility: visible;
            opacity: 1;
            top: 100%;
        }

        .dropdown-box {
            transform: translate3d(0, 0, 0);
        }

        > a {
            color: var(--rio-primary-color, #27c);
        }
    }

    a {
        display: flex;
        align-items: center;
    }
    
    > a {
        line-height: 1.1;
        padding: 9px 0;
        &:after {
            display: inline-block;
            margin-#{$left}: 5px;
            font: {
                family: var(--fa-style-family-classic,"Font Awesome 6 Free");
                weight: 600;
                size: 8px;
            }
            line-height: 1;
            content: '\f078';
        }
    }

    li {
        &.active,
        &:hover {
            > a {
                color: var(--rio-primary-color, #27c);
            }
        }
    }

    &.dir-up {
        &:hover,
        &.show {
            .dropdown-box {
                top: auto;
                bottom: 100%;
            }
        }
    }
}

.dropdown-box {
    position: absolute;
    #{$right}: 0;
    top: -9999px;
    margin: 0;
    padding: .5rem 0;
    color: #666;
    background-color: #fff;
    box-shadow: 0 2px 22px rgba(0,0,0,0.1);
    z-index: 1002;
    visibility: hidden;
    opacity: 0;
    transition: transform .2s ease-out;
    transform: translate3d(0, -10px, 0);

    a {
        padding: .6rem 1rem;
    }
    li {
        font-size: inherit;
        line-height: 1.1;
    }

    .dir-up & {
        transform: translate3d(0, 10px, 0);
    }
}