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

// Dropdown
.dropdown {
    position: relative;

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

        &::after {
            visibility: visible;
            opacity: 1;
            top: calc(100% - 20px);
            transform: if-ltr(translate3d(-50%, 0, 0), translate3d(50%, 0, 0));
        }

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

        >a {
            color: var(--alpha-primary-color);
        }
    }

    &::after {
        content: '';
        position: absolute;
        z-index: 1001;
        #{$left}: 50%;
        top: -9999px;
        transform: if-ltr(translate3d(-50%, -8px, 0), translate3d(50%, -8px, 0));
        border: 11px solid transparent;
        border-bottom: 11px solid var(--alpha-change-color-light-1);
        transition: opacity .2s ease-out, transform .2s ease-out;
        visibility: hidden;
        opacity: 0;
        cursor: pointer;
        pointer-events: none;
    }

    &.dropdown-hidden:after {
        content: none;
    }

    a {
        display: flex;
        align-items: center;
    }

    >a {
        line-height: 1.1;
        padding: 9px 0;
    }

    &>a:after {
        display: inline-block;
        margin-#{$left}: 5px;

        font: {
            family: 'Font Awesome 5 Free';
            weight: 600;
            size: 9px;
        }

        line-height: 1;
        content: '\f078';
    }

    li {

        &.active,
        &:hover {
            >a {
                color: var(--alpha-primary-color);
            }
        }
    }
}

.dropdown-box {
    position: absolute;
    #{$right}: 0;
    top: -9999px;
    margin: 0;
    padding: 1rem 0;
    color: var(--alpha-body-color);
    background-color: var(--alpha-change-color-light-1);
    box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    transition: transform .2s ease-out;
    transform: translate3d(0, -10px, 0);

    a {
        padding: .6rem 1rem;
    }

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

    .menu {
        background: transparent;
    }
}