////////////////////////////////////////
////////////// - Imports - /////////////
////////////////////////////////////////

@import "constants";
@import "animations";

////////////////////////////////////////
////////////// - Wrapper - /////////////
////////////////////////////////////////

.dropdown-wrapper {
    position: relative;
    cursor: pointer;

    ////////////////////////////////////////
    ////////////////////////////////////////

    &:hover {
        & > .dropdown {
            display: flex;
            animation: 0.2s @fadein;
        }
    }

    ////////////////////////////////////////
    ////////////////////////////////////////

    &::before {
        content: "";
        position: absolute;
        top: 0;
        height: calc(100% + 20px);
        width: 100%;
    }

    &.reversed {
        &::before {
            top: auto;
            bottom: 0;

            @media @media_xl {
                display: none;
            }
        }

        .dropdown {
            top: auto;
            bottom: calc(100% + 10px);
        }
    }

    ////////////////////////////////////////

    @media @media_xl {
        & {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
    }
}

////////////////////////////////////////
////////////// - Dropdown - ////////////
////////////////////////////////////////

.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    display: none;
    flex-direction: column;
    background-color: white;
    padding: 10px;
    transform: translate(-50%, 0);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    min-width: 200px;
    gap: 0;

    ////////////////////////////////////////
    ////////////////////////////////////////

    a {
        width: 100%;
    }

    &.right-aligned {
        left: auto;
        transform: none;
        right: 0;
    }

    &.left-aligned {
        left: 0;
        transform: none;
        right: auto;
    }

    &.mobile-transform {
        @media @media_xl {
            & {
                padding: 0;
                border: none;
                background-color: transparent;
                box-shadow: none;
            }
        }
    }

    ////////////////////////////////////////
    ////////////////////////////////////////

    @media @media_xl {
        &:not(.always) {
            position: static;
            display: flex;
            margin: 0;
            transform: none;
            width: 100%;
            border-top: 2px solid @main_color;
        }
    }

    @media @media_sm {
        & {
            min-width: auto;
        }
    }
}

html.dark .dropdown {
    background-color: @slate_800;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);

    ////////////////////////////////////////
    ////////////////////////////////////////
}