@import '../../style/theme.less';
@import '../../assets/fonts/iconfont.less';

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: fade(@bg-header, 85%);
    backdrop-filter: blur(40rpx);
    -webkit-backdrop-filter: blur(40rpx);
    box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
}

.nav-bar__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 @page-padding-x;
    box-sizing: border-box;
}

.nav-bar__brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-bar__logo {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    flex-shrink: 0;
}

.nav-bar__brand-name {
    font-size: @fs-nav-title;
    font-weight: @fw-nav-title;
    color: @color-nav-title;
    letter-spacing: @ls-nav-title;
    line-height: 1;
}

.nav-bar__back {
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.nav-bar__back--hidden {
    visibility: hidden;
}

.nav-bar__back-icon {
    font-size: 40rpx;
    color: @color-nav-title;
    line-height: 1;
    margin-top: 4rpx;
}

.nav-bar__title {
    font-size: @fs-nav-title;
    font-weight: @fw-nav-title;
    color: @color-nav-title;
    letter-spacing: @ls-nav-title;
    line-height: 1;
    flex: 1;
    min-width: 0;
}

.nav-bar__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
}

.nav-bar__placeholder {
    width: 100%;
    flex-shrink: 0;
}