@import "../../../../../../styles/definitions/colors";
@import "../../../../../../styles/definitions/variables";
@import "../../../../../../styles/definitions/mixins";

// Local variables
$border-thickness: 1px;
$border-radius: 3px;
$border-color: $gray-71;
$bg-color: var(--bg-color, #{$header-cat-menu-bg-color});
$bg-color-hover: var(--bg-color-hover, #{$header-cat-menu-bg-color-hover});
$bg-color-active: var(--bg-color-active, #{$header-cat-menu-bg-color-hover});
$row-vertical-padding: var(--row-vertical-padding, 44px / 2);
$icons-selector: '.buttonIcon_icon, .link_icon';

@mixin open-subcategories {
    visibility: visible;
    transition-delay: 0s;

    .headerCategoriesMenu_categoriesListBg {
        transform: scaleX(1);
    }
    .headerCategoriesMenu_categoriesList {
        opacity: 1;
        transition-delay: 0.1s;
    }
}

// Component styles
.headerCategoriesMenu {
    &_wrapper {
        &--text-small,
        &--text-small .buttonIcon_text {
            @include default($bodyFontSize6);
            #{$icons-selector} {
                height: $bodyFontSize6;
            }
        }
        &--text-medium,
        &--text-medium .buttonIcon_text {
            @include default($bodyFontSize5);
            #{$icons-selector} {
                height: $bodyFontSize5;
            }
        }
        &--text-large,
        &--text-large .buttonIcon_text {
            @include default($bodyFontSize4);
            #{$icons-selector} {
                height: $bodyFontSize4;
            }
        }
    }

    &_categoriesListWrapper {
        position: relative;
        width: 300px;
        border-radius: $border-radius;

        &--submenu {
            width: 100%;
            height: 100%;

            position: absolute;
            top: 0;
            left: calc(100% - #{$border-thickness});

            visibility: hidden;
            transition: visibility 0s;
            transition-delay: 0.2s;
        }

        &--open {
            transition-delay: 0s;
        }
    }

    &_categoriesListBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $bg-color;
        transition: transform 0.2s ease-out;
        transform-origin: 0 0;
        border-radius: $border-radius;

        &--with-transition {
            transform: scaleX(0);
        }

        &--open {
            transform: scaleX(1);
        }
    }

    &_categoriesList {
        @extend %reset-list;
        position: relative;
        border-radius: $border-radius;

        &--submenu {
            max-height: 100%;
            overflow-y: auto;
            opacity: 0;
            transition: opacity 0.1s;
            transition-delay: 0s;
        }
        &--open {
            opacity: 1;
        }
    }

    &_categoryItem {
        &--category-title {
            padding: $row-vertical-padding 25px;
            font-weight: bold;
            color: var(--title-color);
        }

        &--head-item {
            border-bottom: 1px solid $border-color;
        }

        &:hover > .headerCategoriesMenu_categoriesListWrapper {
            @include open-subcategories;
        }
    }

    &_categoryLink {
        width: 100%;
        height: var(--row-height, #{$header-cat-items-height});
        padding: 0 25px;
        color: var(--categories-text-color);
        fill: var(--categories-text-color);
        justify-content: space-between;
        line-height: 1;

        #{$icons-selector} {
            opacity: $header-cat-carets-opacity;
        }

        &:hover {
            background-color: $bg-color-hover;
            color: var(--categories-text-hover-color);
            fill: var(--categories-text-hover-color);
            text-decoration: none;

            + .headerCategoriesMenu_categoriesListWrapper {
                @include open-subcategories;
            }
        }

        &:active {
            background-color: $bg-color-active;
            fill: var(--categories-text-active-color);
            color: var(--categories-text-active-color);
        }
    }

    &_scrim {
        position: absolute;
        top: 0;
        z-index: -1;
    }
}
