$navigation-height: 90px;

.M--navigation {
    display: block;
    height: $navigation-height;
    .navigation__fixed {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        height: $navigation-height;
        background: #fff;
        @include box-shadow(1px 1px 4px rgba(0,0,0,.1));
        .container {
            height: $navigation-height;
        }
        .navigation__table {
            .table-cell {
                &.-is-mobile {
                    display: none;
                }
                &.cell--button {
                    width: 40px;
                }
            }
        }
        .site--logo {
            display: block;
            margin-right: 24px;
            font-size: 0;
            line-height: 0;
        }
        .navigation {
            display: block;
            position: relative;
            text-align: right;
            .top--navigation {
                display: inline-block;
                margin: 0;
                padding: 0;
                vertical-align: middle;
                list-style: none;
                font-size: 0;
                line-height: 0;
                text-align: right;
                white-space: nowrap;
                .menu-item {
                    display: inline-block;
                    vertical-align: top;
                    a {
                        display: block;
                        padding: 23px 12px;
                        font-size: 1.45rem;
                        font-weight: 600;
                        color: $text-color;
                        line-height: 1.6;
                        text-decoration: none;
                        @include opacity(.7);
                        -webkit-transition: opacity .3s;
                        transition: opacity .3s;
                    }
                    &:hover {
                        > a {
                            text-decoration: none;
                            @include opacity(1);
                        }
                    }
                    &.menu-item-has-children {
                        position: relative;
                        > a {
                            position: relative;
                            z-index: 2;
                            padding-right: 6px;
                            .item-paret {
                                position: relative;
                                z-index: 3;
                                padding: 23px 10px;
                                &:before {
                                    display: block;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    z-index: 3;
                                    content: '';
                                    margin-top: -2px;
                                    margin-left: -4px;
                                    width: 4px;
                                    height: 4px;
                                    border: 4px solid transparent;
                                    border-top-color: #333;
                                }
                                &:hover {
                                    &:before {
                                        border-top-color: $primary-color;
                                    }
                                }
                            }
                        }
                        &.-is-open {
                            > a {
                                @include opacity(1);
                                .item-paret {
                                    &:before {
                                        border-top-color: $primary-color;
                                    }
                                }
                            }
                        }
                        > .sub-menu {
                            display: none;
                            position: absolute;
                            top: 100%;
                            left: 0;
                            z-index: 2;
                            padding: 0 16px;
                            width: 240px;
                            text-align: left;
                            background-color: #fff;
                            border: 1px solid $border-color;
                            @include box-shadow(1px 1px 4px rgba(0,0,0,.1));
                            .menu-item {
                                display: block;
                                border-bottom: 1px solid $border-color;
                                &:last-child {
                                    border-bottom: 0;
                                }
                                a {
                                    padding: 12px 0;
                                    font-size: 1.35rem;
                                }
                            }
                        }
                        &.-is-open {
                            > .sub-menu {
                                display: block;
                            }
                        }
                    }
                }
            }
        }
        .navigation--clone {
            display: block;
            height: 0;
        }
        .button--action {
            display: block;
            margin: 0 0 14px 0;
            padding: 0;
            width: 40px;
            height: 40px;
            font-size: 0;
            line-height: 0;
            background: none;
            border: 0;
            outline: 0;
            cursor: pointer;
            @include opacity(.7);
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
            .action__icon {
                display: inline-block;
                vertical-align: middle;
            }
            .svg {
                svg {
                    path {
                        fill: $text-color;
                    }
                }
            }
            &:hover,
            &.-is-active {
                @include opacity(1);
            }
        }
        .button--menu {
            .menu__item {
                &.menu__close {
                    display: none;
                }
            }
            &.-is-active {
                .menu__item {
                    &.menu__close {
                        display: inline-block;
                    }
                    &.menu__open {
                        display: none;
                    }
                }
            }
        }
    }
    .navigation__search-form {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        width: 100%;
        height: 100%;
        background: #fff;
        &.-is-open {
            display: block;
        }
        .container {
            max-width: 640px;
        }
        .button--close-form {
            display: block;
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 1;
            padding: 8px;
            width: 32px;
            height: 32px;
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
            @include opacity(.6);
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
            @media (max-width: $screen-sm) {
                top: 24px;
                right: 8px;
            }
            &:hover {
                @include opacity(1);
            }
            svg {
                width: 100%;
                height: 100%;
                path {
                    fill: $text-color;
                }
            }
        }
        .form--search-stories {
            display: block;
            position: relative;
            margin-top: 48px;
            padding: 48px 0;
            @media (max-width: $screen-sm) {
                margin-top: 24px;
            }
            .search__component {
                display: block;
                border-bottom: 1px solid rgba(0,0,0,.08);
            }
            .search__textbox {
                display: block;
                margin: 0;
                padding: 16px 0;
                width: 100%;
                height: auto;
                font-size: 3.2rem;
                background: #fff;
                border: none;
                outline: none;
                @include box-shadow(none);
                @include border-radius(0);
            }
            .search__textbox::-webkit-input-placeholder {
                color: #d7d7d7;
            }
            .search__textbox::-moz-placeholder {
                color: #d7d7d7;
            }
            .search__textbox:-ms-input-placeholder {
                color: #d7d7d7;
            }
            .search__textbox:-moz-placeholder {
                color: #d7d7d7;
            }
        }
    }
    &.-is-mobile-version {
        .navigation__fixed {
            .navigation__table {
                .table-cell {
                    &.-is-mobile {
                        display: table-cell;
                    }
                }
            }
            .navigation {
                display: none;
            }
        }
        &.-is-open {
            .navigation {
                display: block;
                position: fixed;
                top: $navigation-height;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 90;
                margin-bottom: 0;
                overflow: auto;
                text-align: left;
                background: #fff;
                border-top: 1px solid $border-color;
                .top--navigation {
                    display: block;
                    padding: 0 16px;
                    text-align: left;
                    white-space: normal;
                    .menu-item {
                        display: block;
                        border-bottom: 1px solid rgba(0,0,0,.05);
                        a {
                            display: block;
                            padding: 12px 0;
                        }
                        &.menu-item-has-children {
                            > a {
                                .item-paret {
                                    margin-top: -12px;
                                    padding: 24px 10px;
                                    float: right;
                                }
                            }
                            > .sub-menu {
                                position: initial;
                                top: auto;
                                left: auto;
                                padding: 8px 24px;
                                width: 100%;
                                background-color: #f5f5f5;
                                border: 0;
                                box-shadow: none;
                            }
                        }
                    }
                }
            }
        }
    }
    &.-is-logged-in {
        .navigation__fixed {
            top: 46px;
            @media (min-width: 783px) {
                top: 32px;
            }
        }
        &.-is-mobile-version {
            &.-is-open {
                .navigation {
                    top: $navigation-height + 46;
                    @media (min-width: 783px) {
                        top: $navigation-height + 32;
                    }
                }
            }
        }
    }
}