/* -------------------------------------------
    Dropdowns
---------------------------------------------- */

.dropdown {
    position: relative;

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

    >a {
        padding: 9px 0;

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

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

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

    &::after {
        content: "";
        position: absolute;
        z-index: 1001;
        left: 50%;
        top: -9999px;
        transform: translate3d(-50%, -8px, 0);
        border: 11px solid transparent;
        border-bottom: 11px solid var(--alpha-white-color);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        visibility: hidden;
        opacity: 0;
        cursor: pointer;
        pointer-events: none;
    }

    &:hover,
    &.show {
        >.dropdown-box {
            visibility: visible;
            opacity: 1;
            top: 100%;
            transform: translate3d(0, 0, 0);
        }

        &::after {
            visibility: visible;
            opacity: 1;
            top: var(--alpha-dropdown-triangle-pos);
            transform: translate3d(-50%, 0, 0);
        }
    }

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

    &.dir-right:hover,
    &.dir-right.show {
        >.dropdown-box {
            left: 100%;
            right: auto;
            top: 0;
        }
    }

    &.dir-left:hover,
    &.dir-left.show {
        >.dropdown-box {
            top: 0;
            right: 100%;
        }
    }
}

.dropdown-box {
    position: absolute;
    #{$right}: 0;
    top: -9999px;
    padding: .5rem 1rem;
    background-color: var(--alpha-change-color-light-1);
    box-shadow: 0 4px 20px -8px rgb(0, 0, 0, .2);
    color: var(--alpha-body-color);
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    transition: transform .2s ease-out;
    transform: translate3d(0, -10px, 0);
    list-style-type: none;
    margin: 0;

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