@import '../../../../../styles/mixins.scss';

// Local Variables
$namespace: ".menuItem";
$menu-item-selector: "#{$namespace}_item";
$menu-item-opened-selector: "#{$menu-item-selector}--opened";
$menu-item-level-0-selector: "#{$menu-item-selector}--level-0";
$menu-item-level-1-selector: "#{$menu-item-selector}--level-1";
$menu-item-level-2-selector: "#{$menu-item-selector}--level-2";
$menu-link-selector: "#{$namespace}_link";
$menu-link-text-selector: "#{$menu-link-selector}-text";
$menu-link-icon-selector: "#{$menu-link-selector}-icon";

$menu-item-padding-horizontal: 30px;
$menu-item-padding-horizontal-xs: 15px;
$menu-link-font-size: 15px;
$menu-link-color-hover: $gray-34;
$submenu-padding: 18px;
$submenu-level1-bgcolor: $gray-92;
$submenu-level2-bgcolor: $white;

// Component Styles
#{$namespace} {
    &_item {
        &--level-0 {
            position: relative;
            height: 100%;
            &:first-child{
                .menuItem_link--level-0 {
                    padding-left:0;
                }
            }
        }
    }
    &_list {
        $boxshadow-color: rgba($black, 0.05);

        @extend %reset-list;
        position: absolute;
        display: flex;
        flex-direction: column;
        padding-top: 15px;
        padding-bottom: 15px;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.3s;

        &--level-1 {
            top: calc(100% + 1px);
            left: 0;
            min-width: 12rem;
            opacity: 0;
            background-color: $submenu-level1-bgcolor;
            box-shadow: -5px 0 5px -5px $boxshadow-color, 0 5px 5px -1px $boxshadow-color, 5px 0 5px -5px $boxshadow-color;
        }

        &--level-2 {
            top: 0;
            left: 100%;
            background-color: $submenu-level2-bgcolor;
            min-width: 15rem;
            min-height: 100%;
            overflow-y: auto;
            box-shadow: 0 5px 5px -1px $boxshadow-color, 5px 0 5px -5px $boxshadow-color;
        }

        #{$menu-link-selector}[aria-expanded=true] + &,
        #{$menu-item-selector}:hover > & {
            visibility: visible;
            opacity: 1;
        }
    }

    &_link {
        $link-color: $gray-61;
        $link-icon-width: 10px;
        $link-icon-transition-duration: 0.3s;
        $link-transition-duration: 0.2s;

        display: flex;
        padding-right: 30px;
        padding-left: 0px;
        align-items: center;
        text-decoration: none;
        transition: color $link-transition-duration ease, background-color $link-transition-duration ease;

        &-icon {
            width: $link-icon-width;
            margin-left: 10px;
            fill: $link-color;
            transition: transform $link-icon-transition-duration ease, color $link-icon-transition-duration ease;

            &--level-0 {
                #{$menu-item-level-0-selector}:hover & {
                    fill: $menu-link-color-hover;
                    transform: rotate(-180deg);
                }
            }
        }

        &-text {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            white-space: nowrap;

            &--level-0 {
                &:after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -1px;
                    width: 0;
                    height: 2px;
                    opacity: 0;
                    background-color: $primary-color;
                    transition: width 0.3s ease,  opacity 0.3s ease;

                    #{$menu-item-level-0-selector}:hover & {
                        width: 100%;
                        opacity: 1;
                    }
                }
            }
        }

        &--level-0 {
            height: 100%;
            color: $link-color;
            padding-left: 15px;
            font-size: $menu-link-font-size * 0.85;

            @include media-md-up {
                font-size: $menu-link-font-size;
            }
        }

        &--level-1, &--level-2 {
            color: $deep-gray;
            padding-left: 15px;
            font-size: 14px;
            min-height: 30px;
        }

        #{$menu-item-level-0-selector}:hover > &, &--level-0:focus {
            color: $menu-link-color-hover;
        }

        #{$menu-item-level-1-selector}:hover > &, &--level-1:focus {
            color: $white;
            background-color: $primary-color;
        }

        #{$menu-item-level-2-selector}:hover > &, &--level-2:focus {
            position: relative;

            &:before {
                @include background-primary();
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0.15;
            }
        }
    }
}
