.tabbar {
  padding: 0 0 calc(env(safe-area-inset-bottom) + 12rpx);
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0rpx 3rpx 27rpx 0rpx rgba(40, 48, 49, 0.1);
  .tab-item {
    position: relative;
    padding-top: 10rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .icon-wrap {
      position: relative;
      width: 48rpx;
      height: 48rpx;
      .icon {
        display: block;
        width: 100%;
        height: 100%;
      }
      .icon-active {
        display: none;
        width: 100%;
        height: 100%;
      }
      .dot {
        position: absolute;
        top: 0;
        right: 0;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #ed4f39;
      }
    }
    .name {
      margin-top: 8rpx;
      font-size: 22rpx;
      color: #69686E;
      line-height: 21rpx;
    }
    &.active {
      .icon-wrap {
        .icon {
          display: none;
        }
        .icon-active {
          display: block;
        }
      }
      .name {
        color: #211D2E;
      }
    }
  }
}