@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

$m-bottom-nav-bar-prefix: 'cn-bottom-nav-bar';

.#{$hashClassName}.#{$m-bottom-nav-bar-prefix} {
  &-page-footer {
    z-index: $cn-bottom-nav-bar-z-index;
    &-more {
      z-index: $cn-bottom-nav-bar-more-z-index;
    }
  }
}

.#{$hashClassName}.#{$m-bottom-nav-bar-prefix} {
  width: 100%;
  height: $m-s-56;
  padding: $m-s-8;
  background-color: #fff;
  color: $m-color-bg-dark;
  @include flex(row, center, center);
  .#{$m-bottom-nav-bar-prefix} {
    &-item {
      flex: 1;
      overflow: hidden;
      text-align: center;

      &-title {
        @include ellipsis();
        font-size: $m-s-12;
        color: $m-color-text-title3;
        margin-top: calc(#{$m-s-base} * -2);
      }
    }
    &-item-active {
      color: $m-color-primary;
      .#{$m-bottom-nav-bar-prefix}-item-title {
        color: $m-color-primary;
      }
    }
    &-more {
      &-drawer {
        background-color: $m-color-bg-disabled;
        padding: $m-s-36 $m-s-8 $m-s-8 $m-s-8;
      }
      &-entry-points {
        overflow: unset;
      }
    }
  }
}