@import '../style/var';

@item: fe-tabbar-item;

.@{item} {
  flex: 1;
  text-align: center;
  .@{item}-icon {
    display: block;
    position: relative;
    top: 8px;
    margin: 0 auto;
    width: 22px;
    height: 22px;
    font-size: 18px;
    .@{item}-badge {
      position: absolute;
      top: -3px;
      right: -12px;
    }
  }
  .@{item}-text {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: @tabbar-text-inactive-color;
  }
  &.@{item}-active {
    .@{item}-text,
    .@{item}-icon {
      color: @tabbar-text-active-color;
    }
  }
  &.@{item}-reddot {
    .@{item}-icon:after {
      content: '';
      position: absolute;
      right: -8px;
      top: -3px;
      width: 10px;
      height: 10px;
      background-color: #f74c31;
      border-radius: 5px;
      background-clip: padding-box;
    }
  }
}