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

// Local Variables
$link-color: var(--text-color, $header-nav-link-color);
$link-color-hover: var(--text-hover-color, $header-nav-link-hover-color);
$link-color-active: var(--text-active-color, $header-nav-link-active-color);

// Local Mixins
@mixin header-nav-link {
    @extend %reset-link;
    color: $link-color;
    font-size: inherit;
    white-space: nowrap;

    &:hover,
    &:focus {
        color: $link-color-hover;
        text-decoration: none;

        .headerNavigation_btnMenuIcon {
            @include fill-header-arrow-svg-color($link-color-hover);
        }
    }
}


// Component Styles
.headerNavigation {
    &_widthReference {
        width: 100%;

        &--hidden {
            display: none;
        }
    }
    &_nav {
        height: 100%;
        margin-left: calc(var(--header-nav-item-spacing, #{$header-nav-item-spacing}) * -1);
        margin-right: calc(var(--header-nav-item-spacing, #{$header-nav-item-spacing}) * -1);
    }
    &_list {
        @extend %reset-list;
        display: flex;
        height: 100%;
        align-items: center;

        &--align-center {
            justify-content: center;
        }
        &--align-right {
            justify-content: flex-end;
        }
    }
    &_item {
        position: relative;
        display: flex;
        align-items: stretch;
        padding-left: var(--header-nav-item-spacing, $header-nav-item-spacing);
        padding-right: var(--header-nav-item-spacing, $header-nav-item-spacing);

        &--hidden {
            display: none;
            visibility: hidden;
        }

        &:hover {
            .headerNavigation_btnMenuIcon {
                transform: rotate(-180deg);
                fill: $link-color-hover;

                @include fill-header-arrow-svg-color($link-color-hover);
            }
            .headerNavigation_btnMenuText,
            .headerNavigation_link {
                @include underline-hover-active($link-color-hover);
                color: $link-color-hover;
            }
            > .headerNavigation_subMenu {
                visibility: visible;
            }
        }

        &:active {
            .headerNavigation_btnMenuIcon {
                transform: rotate(-180deg);
                fill: $link-color-active;

                @include fill-header-arrow-svg-color($link-color-hover);
            }
            .headerNavigation_btnMenuText,
            .headerNavigation_link {
                @include underline-hover-active($link-color-active);
                color: $link-color-active
            }
            > .headerNavigation_subMenu {
                visibility: visible;
            }
        }

        .buttonIcon_icon--right+.buttonIcon_text {
            margin-right: 6px;
        }
    }
    &_link {
        @include underline-hover-initial(2px, $link-color-hover);
    }
    &_link,
    &_btnMenu {
        @include header-nav-link;
         display: flex;
    }
    &_btnMenu {
        @extend %reset-button;

        &Text {
            display: flex;
            align-items: center;
            position: relative;
            height: 100%;

            @include underline-hover-initial(2px, $link-color-hover);
        }
        &Icon {
            width: 10px;
            fill: $link-color;

            @include fill-header-arrow-svg-color($link-color);
        }
    }
    &_btnMenu:hover + &_subMenu,
    &_btnMenu:focus + &_subMenu {
        visibility: visible;
    }
    &_btnMenuIcon {
        transition: transform 0.2s ease-out;
    }
    &_subMenu {
        @extend %reset-list;
        background-color: $white;
        border: 1px solid $gray-80;
        position: absolute;
        top: 100%;
        left: 0;
        visibility: hidden;
        z-index: 1;
        border-radius: 3px;

        &--visible {
            visibility: visible;
        }
        
        &--categories {
            border: none;
        }

        &Link {
            display: inline-flex;
            padding: 9px;
            color: $title-color;
            &:hover,
            &:focus {
                text-decoration: none;
            }
        }

        &Item {
            &:hover,
            &:focus {
                background-color: $gray-96;
                text-decoration: none;
            }
        }
    }
}
