// @import (css) '../common/index.wxss';
@import '../common/style/index.less';

@black: #000;
@white: #fff;

// navbar 字体颜色
@navbar-color: @black;

// navbar 背景色
@navbar-background-color: @white;

.@{prefix}-navbar {
  --navbar-height: 44px;
  --navbar-right: 190rpx; // 默认右上角胶囊按钮宽度，组件会在初始化时尝试自动获取胶囊按钮宽度并覆写该值
  --narbar-padding-top: 20px; // 导航栏顶部间距，组件会在初始化时尝试取右侧系统胶囊位置进行覆盖
  --capsule-width: 174rpx;

  overflow: hidden;

  &--fixed {
    .@{prefix}-navbar__content {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 5001;
    }
  }

  &--visible {
    display: '';
  }

  &--visible-animation {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  &--hide-animation {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  &--hide {
    display: none;
  }

  &__placeholder {
    height: var(--navbar-height);
    padding-top: var(--narbar-padding-top);
    position: relative;
    visibility: hidden;
  }

  &__content {
    position: relative;
    z-index: 1;
    height: var(--navbar-height);
    width: calc(100% - var(--navbar-right));
    padding-right: var(--navbar-right);
    padding-top: var(--narbar-padding-top);
    display: flex;
    align-items: center;
    background-color: @navbar-background-color;
    color: @navbar-color;
  }

  &__left {
    position: relative;
    box-sizing: border-box;
    width: var(--navbar-right);
    display: flex;
    align-items: center;
  }

  &__capsule {
    box-sizing: border-box;
    margin-left: 24rpx;
    width: var(--capsule-width);
    height: var(--capsule-height);
    line-height: var(--capsule-height);
    border-radius: 16rpx * 2;
    border: 1rpx solid #e3e6eb;
    background: #fff;
    display: flex;
    align-items: center;

    .@{prefix}-navbar__btn {
      flex: 1;

      &:not(:first-child) {
        position: relative;

        &::before {
          display: block;
          content: '';
          position: absolute;
          top: 12rpx;
          bottom: 12rpx;
          left: 0;
          background-color: rgba(0, 0, 0, 0.2);
          width: 1px;
        }
      }

      &:first-child {
        margin-left: 0rpx;
      }
    }

    &-icon {
      display: flex;
      align-items: center;
    }
  }

  &__center {
    font-size: 36rpx;
    text-align: center;
    position: absolute;
    left: var(--navbar-right);
    width: calc(100% - var(--navbar-right) * 2);
    height: var(--navbar-height);
    line-height: var(--navbar-height);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &-title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  &__btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden;

    &:first-child {
      margin-left: 24rpx;
    }
  }
}