@use '~@/style/globals';
@use 'sass:color';

.Dropdown {
    position: relative;
    align-self: stretch;

    &__button,
    &__item {
        display: flex;
        align-items: center;
        padding: 0 globals.$content-padding-small-vertical;
        border-radius: 2px;
        cursor: pointer;
        user-select: none;
        transition: all 300ms;
    }

    &__button {
        height: 100%;
        background-color: globals.$bg-color-button-default;
        color: globals.$color-base-button;

        &__icon {
            font-size: 1.2rem;
        }

        &__text {
            display: inline-block;
        }

        &__chevron {
            margin-left: 5px;
        }

        &:hover {
            background-color: color.adjust(globals.$bg-color-button-default, $lightness: 8%);
            color: globals.$color-hover-button;
        }
    }

    &__menu {
        position: absolute;
        z-index: 2;
        top: 100%;
        right: 0;
        min-width: globals.$dropdown-min-width;
        background: globals.$bg-color-dropdown-menu;
        box-shadow: -2px 6px 6px rgba(0, 0, 0, 0.25);
        transform-origin: 50% 0%;
        transform: scaleY(0);
        transition: transform 150ms ease-in-out;

        &__title {
            margin: 0;
            padding: globals.$content-padding-small-vertical globals.$content-padding-small-horizontal;
            font-size: 1.2rem;
            text-align: center;
            text-transform: capitalize;
        }

        &__items {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;

            .fas {
                margin-right: globals.$content-padding-small-vertical;
                font-size: globals.$sidebar-icon-size;
            }
        }
    }

    &__item {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: globals.$content-padding-large-horizontal globals.$content-padding-small-vertical;
        list-style: none;

        /* stylelint-disable selector-max-type */
        &:not(button) {
            color: globals.$text-base-color;

            &:hover {
                background-color: globals.$bg-color-dropdown-menu-item-hover;
                color: globals.$link-hover-color;
            }

            &:visited,
            &:active {
                color: globals.$text-base-color;
            }
        }
        /* stylelint-enable selector-max-type */

        &--active,
        &--active:hover {
            background-color: globals.$bg-color-dropdown-menu-item-active;
            color: globals.$link-active-color;
        }
    }

    &--actions {
        margin-left: globals.$content-padding-small-horizontal;

        .Dropdown__menu {
            margin-top: globals.$content-padding-small-horizontal;
        }

        .Dropdown__item + .Dropdown__item {
            margin: globals.$content-padding-small-horizontal 0 0;
        }
    }

    &--open {
        .Dropdown {
            &__menu {
                transform: none;
            }

            &__button {
                background-color: color.adjust(globals.$bg-color-button-default, $lightness: 15%);
            }
        }
    }

    @media (min-width: globals.$screen-mobile) {
        &__menu__title {
            display: none;
        }
    }
}
