@import "../common/variables";
@import "../common/mixins";

.@{css-prefix} {
  &-tabbar {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: .104rem 0 .07rem;
    background-color: @tabbar-bg;
    &:after {
      .top-line(@tabbar-border-color);
    }

    &-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: @base-zindex * 100;
    }

    &-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    &-active {
      color: inherit;
      .@{css-prefix}-tabbar-icon {
        color: inherit;
      }
    }

    &-badge {
      position: absolute;
      top: -.02rem;
      left: 100%;
      z-index: 999;
      margin-left: -.15rem;
    }

    &-dot {
      display: block;
      width: 20rpx;
      height: 20rpx;
      background-color: #EF4F4F;
      border-radius: 50%;
      position: absolute;
      top: .02rem;
      left: 100%;
      z-index: 999;
      margin-left: -.11rem;
    }

    &-icon {
      height: @tabbar-icon-fontsize * 1.08;
      display: flex;
      align-items: center;
      position: relative;
      img {
        height: 70%;
      }
    }

    &-txt {
      display: inline-block;
      font-size: inherit;
    }
  }
}