@import '~app/components/ui/colors.scss';
@import '~app/components/ui/fonts.scss';

$dropdownPadding: 15px;

@mixin dropdown-theme($themeName, $backgroundColor) {
    .#{$themeName} {
        composes: dropdown;

        background-color: $backgroundColor;

        .menuItem:hover,
        &:hover {
            background-color: lighter($backgroundColor);
        }

        &:active,
        &.opened {
            background-color: darker($backgroundColor);
        }
    }
}

.dropdown {
    display: inline-block;
    box-sizing: border-box;
    height: 50px;
    padding-inline-start: $dropdownPadding;
    // 28px - ширина иконки при заданном размере шрифта
    padding-inline-end: $dropdownPadding * 2 + 28px;
    position: relative;

    font-family: $font-family-title;
    color: $defaultButtonTextColor;
    font-size: 18px;
    line-height: 50px;
    text-decoration: none;
    cursor: pointer;

    transition: background-color 0.25s;

    &:focus {
        outline: none;
    }
}

.label {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: start;
}

.opened {
}

.toggleIcon {
    composes: selecter from '~app/components/ui/icons.scss';

    position: absolute;
    inset-inline-end: $dropdownPadding;
    top: 16px;
    font-size: 17px;
    transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint

    .dropdown:hover & {
        inset-inline-end: $dropdownPadding - 5px;
    }

    .dropdown:active &,
    .dropdown.opened & {
        inset-inline-end: $dropdownPadding + 5px;
    }
}

.block {
    display: block;
    width: 100%;

    .menu {
        width: 100%;
    }
}

.menu {
    position: absolute;
    top: 60px;
    inset-inline-start: 0;
    z-index: 10;

    width: 120%;

    background: #fff;
    border: 1px solid #ddd;

    transition: 0.5s ease;
    transition-property: opacity, visibility;
    opacity: 0;
    visibility: hidden;

    .dropdown.opened & {
        opacity: 1;
        visibility: visible;
    }
}

.menuItem {
    composes: label;

    height: 50px;
    padding: 0 13px;
    overflow: hidden;
    text-overflow: ellipsis;

    color: #444;
    line-height: 50px;
    font-size: 18px;
    font-family: $font-family-title;

    border-bottom: 1px solid #ebe8df;
    cursor: pointer;

    transition: 0.25s;

    &:hover {
        color: #fff;
    }
}

@include dropdown-theme('green', $green);