@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$mask-background: rgba(0, 0, 0, 0.5);

.af-menu-open {
    overflow-y: hidden;
}

.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: $mask-background;
    z-index: 17;
    height: 100%;

    &.show {
        display: block;
    }
}

.af-nav {
    background: $gray-lighter;
    position: relative;
    z-index: 18;
    max-width: 320px;

    &.af-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1039;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 320px;
        background: $white;
    }

    &__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        &--children {
            top: 100%;
            min-width: 200px;
            font-size: 0.9em;
            border-radius: 0 0 3px 3px;

            .af-nav__item {
                display: block;

                &:hover {
                    .af-nav__link {
                        background-color: $color-axa;
                        color: white;
                    }
                }
            }

            .af-nav__link {
                text-align: left;
                padding: 0.4rem 1.1rem 0.4rem 2rem;
                font-weight: 400;
            }
        }
    }

    &__item {
        position: relative;
        width: 100%;

        &--active,
        &:hover {
            >.af-nav__link {
                background-color: $color-axa;
                color: white;
            }

            .glyphicon-arrow-xs-down {
                color: white;
            }
        }

        &:hover,
        &--open {
            .af-nav__list--children {
                display: block;
            }
        }

        &--haschild {
            >.af-nav__link {
                padding-right: 1.1rem;
            }
        }

        .glyphicon-arrow-xs-down {
            position: absolute;
            right: 0.2rem;
            top: 50%;
            transform: translate(0, -50%);
            display: none;
            width: 17px;
        }
    }

    &__link {
        padding: 1rem;
        text-align: left;
        display: block;

        &:focus {
            box-shadow: 0 0 5px $color-axa;
            outline: none;
        }

        a:hover {
            text-decoration: none;
        }
    }

    &__aside-header {
        border-bottom: 2px solid $gray-light;
        display: flex;
        align-items: center;
    }

    &__aside-title {
        flex: 1;
        padding: 10px 15px;
        margin: 0;
    }

    &__aside-close {
        background: inherit;
        border: none;
        font-size: 3em;
        color: $gray-light;
        cursor: pointer;

        &:hover {
            text-decoration: none;
        }
    }
}

@include media-breakpoint-up(sm) {
    .af-nav {
        &__wrapper {
            width: 100%;
        }
    }
}

@include media-breakpoint-up(md) {
    .af-nav {
        max-width: inherit;

        &-container {
            background-color: $color-wild-sand;
        }

        &__wrapper {
            width: nth(nth($container-max-widths, 4), 2);
            max-width: 100%;
        }

        &.af-drawer {
            width: auto;
            position: relative;
            background: none;
            overflow: visible;
            z-index: 2;

            &.left {
                transform: none;
            }
        }

        &__list {
            flex-direction: row;

            &--children {
                position: absolute;
                background: white;
                box-shadow: 0 3px 5px gray;
                display: none;

                .af-nav__link {
                    padding-left: 1.1rem;
                }
            }
        }

        &__item {
            width: inherit;

            &--haschild {
                >.af-nav__link {
                    padding-right: 2rem;
                }
            }

            .glyphicon-arrow-xs-down {
                display: block;
            }
        }

        &__link {
            text-align: center;
        }

        &__aside-header {
            display: none;
        }
    }

    .mask.show {
        display: none;
    }
}