$nav-bar-height: 44px !default;
$nav-bar-background: #fff !default;
$nav-bar-padding-hor: 16px !default;
$nav-bar-icon-color: #000 !default;
$nav-bar-text-size: 14px !default;
$nav-bar-text-color: #666 !default;
$nav-bar-title-size: 16px !default;
$nav-bar-title-size-small: 14px !default;
$nav-bar-title-color: #000 !default;
$nav-bar-subtitle-size: 10px !default;
$nav-bar-subtitle-color: #111 !default;

$nav-bar-border: 1px solid #e5e5e8 !default;

.mx{
    &-nav-bar{
        position: relative;
        z-index: $zindex-fixed;
        user-select: none;
        background-color: $nav-bar-background;


        &--fixed{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        &--safe-area-inset-top {
            @include safe-area-inset-top();
        }

        &--border-bottom{
            border-bottom: $nav-bar-border;
        }

        &-content{
            position: relative;
            height: $nav-bar-height;

            .mx-nav-bar-left,
            .mx-nav-bar-right{
                position: absolute;
                top: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                padding: 0 $nav-bar-padding-hor;
                cursor: pointer;
            }

            .mx-nav-bar-left{
                left: 0;
            }

            .mx-nav-bar-right{
                right: 0;
            }

            .mx-nav-bar-title-container{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height:100%;
                max-width: 60%;
                margin: 0 auto;
                overflow: hidden;

                .mx-nav-bar-title{
                    font-weight: 600;
                    font-size: $nav-bar-title-size;
                    color: $nav-bar-title-color;
                    @include text-ellipsis();

                    &--small{
                        font-size: $nav-bar-title-size-small;
                    }
                }

                .mx-nav-bar-subtitle{
                    margin-top: 5px;
                    font-size: $nav-bar-subtitle-size;
                    color: $nav-bar-subtitle-color;
                    @include text-ellipsis();
                }
                .mx-nav-bar-title-item-container{
                    position: relative;
                    width: 100%;
                }
                .mx-nav-bar-title-item{
                    display: flex;
                    flex-direction: row;
                    font-size: $nav-bar-title-size;
                    justify-content: space-around;
                    align-items: center;
                    box-sizing: border-box;
                }
                .mx-nav-bar-title-bottom-line{
                    height: 3px;
                    background: #000;
                    border-radius: 1.5px;
                    margin-top: 3px;
                    position: absolute;
                    transition: .3s ease;
                }
            }
        }

        &-arrow,
        &-more{
            color: $nav-bar-icon-color;
        }

        &-text{
            line-height: 1;
            font-size: $nav-bar-text-size;
            color: $nav-bar-text-color;
        }
    }
}