@import 'commons';

.m-navbar {
    background: var(--m-navbar--background);

    &__wrap {
        position: relative;
        margin: 0 auto;
    }

    &.m--is-skin-nav-main,
    &.m--is-skin-nav-sub {
        --m-navbar-item--hover-border-color: #{ $m-color-grey };
        //
        --m-navbar-item--color: #{ $m-color-grey-light };
        --m-navbar-item--hover-color: #{ $m-color-white };
        --m-navbar-item--selected-color: #{ $m-color-white };
        //
        --m-navbar-item--font-weight: #{ $m-font-weight-semi-bold };
        --m-navbar-item--selected-font-weight: #{ $m-font-weight-bold };

        @include m-font-size('md');
    }

    &.m--is-skin-nav-main {
        --m-navbar--background: #{ $m-color-grey-darkest };
        //
        --m-navbar-item--text-transform: uppercase;
    }

    &.m--is-skin-nav-sub {
        --m-navbar--background: #{ $m-color-grey-black };
    }

    &.m--is-skin-tab-underline {
        --m-navbar--tab-border-bottom-width: #{ $m-border-width-lg };
        //
        --m-navbar-item--color: #{ $m-color-grey-dark };
        --m-navbar-item--hover-color: #{ $m-color-black };
        --m-navbar-item--selected-color: #{ $m-color-black };
        //
        --m-navbar-item--font-weight: #{ $m-font-weight-semi-bold };
        --m-navbar-item--selected-font-weight: #{ $m-font-weight-semi-bold };

        .m-navbar__wrap {
            &::before {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: var(--m-navbar--tab-border-bottom-width);
                width: 100%;
                content: '';
                background: var(--m-navbar--tab-border-bottom-color);
            }
        }

        @include m-font-size();
    }

    &.m--is-skin-tab-arrow {
        --m-navbar--background: #{ $m-color-white };
        --m-navbar--tab-border-bottom-width: 2px;
        //
        --m-navbar-item--color: #{ $m-color-grey-dark };
        --m-navbar-item--hover-color: #{ $m-color-black };
        --m-navbar-item--selected-color: #{ $m-color-black };
        //
        --m-navbar-item--font-weight: #{ $m-font-weight-semi-bold };
        --m-navbar-item--selected-font-weight: #{ $m-font-weight-semi-bold };

        .m-navbar__wrap {
            &::before {
                position: absolute;
                right: 0;
                bottom: 6px;
                left: 0;
                content: '';
                width: 100%;
                height: var(--m-navbar--tab-border-bottom-width);
                background: var(--m-navbar--tab-border-bottom-color);
            }
        }
    }

    &.m--is-skin-tab-light,
    &.m--is-skin-tab-light-main,
    &.m--is-skin-tab-dark,
    &.m--is-skin-tab-dark-main {
        --m-navbar-item--selected-font-weight: #{ $m-font-weight-semi-bold };

        @include m-font-size('md');
    }

    &.m--is-skin-tab-dark,
    &.m--is-skin-tab-dark-main {
        --m-navbar-item--background: #{ $m-color-grey-darkest };
        --m-navbar-item--hover-background: #{ $m-color-grey-darker };
        --m-navbar-item--selected-background: #{ $m-color-grey-dark };

        --m-navbar-item--color: #{ $m-color-white };
        --m-navbar-item--hover-color: #{ $m-color-white };
        --m-navbar-item--selected-color: #{ $m-color-white };

        .m-navbar__list {
            background: var(--m-navbar-item--selected-background);
        }
    }

    &.m--is-skin-tab-light,
    &.m--is-skin-tab-light-main {
        --m-navbar-item--background: #{ $m-color-grey-lighter };
        --m-navbar-item--hover-background: #{ $m-color-grey-light };
        --m-navbar-item--selected-background: #{ $m-color-white };
    }

    &.m--is-skin-nav-soft {
        --m-navbar--background: #{ rgba(255, 255, 255, 0.2) };

        --m-navbar-item--background: none;
        --m-navbar-item--hover-background: #{ $m-color-interactive-dark };
        --m-navbar-item--selected-background: #{ $m-color-interactive-darker };
        //
        --m-navbar-item--color: #{ $m-color-white };
        --m-navbar-item--hover-color: #{ $m-color-white };
        --m-navbar-item--selected-color: #{ $m-color-white };
        //
        --m-navbar-item--font-weight: #{ $m-font-weight-semi-bold };
        --m-navbar-item--selected-font-weight: #{ $m-font-weight-semi-bold };
        //
        --m-navbar-item--text-transform: uppercase;

        @include m-font-size('md');
    }

    &.m--is-skin-tab-soft {
        --m-navbar-item--color: #{ $m-color-black };
        --m-navbar-item--hover-color: #{ $m-color-interactive };
        --m-navbar-item--selected-color: #{ $m-color-black };
        //
        --m-navbar-item--font-weight: #{ $m-font-weight-light };
        --m-navbar-item--selected-font-weight: #{ $m-font-weight-bold };

        @include m-font-size();
    }

    &.m--is-anim-ready {
        .m-navbar {

            &__line,
            &__arrow {
                transition: transform $m-transition-duration ease, width $m-transition-duration ease;
            }
        }
    }

    &__list {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-flex;
        text-align: center;
    }

    &__line,
    &__arrow {
        position: absolute;
    }

    &__line {
        bottom: 0;
        background: var(--m-navbar-item--selected-border-color);
        height: var(--m-navbar--tab-border-bottom-width);
    }

    &__arrow {
        bottom: 6px;

        &::before,
        &::after {
            transform: translateX(-50%);
            position: absolute;
            left: 50%;

            @include m-triangle(bottom, currentcolor, 18px);
        }

        &::before {
            color: var(--m-navbar--tab-border-bottom-color);
            top: -1px;
        }

        &::after {
            color: var(--m-navbar--background);
            top: calc(-1px - var(--m-navbar--tab-border-bottom-width));
        }
    }
}