.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);
  .custom {
    flex-shrink: 0;
    position: relative;
    width: 94rpx;
    height: 94rpx;
    .add {
      position: absolute;
      top: -42rpx;
      width: 94rpx;
      height: 94rpx;
    }
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .icon {
      display: block;
      width: 48rpx;
      height: 48rpx;
    }
    .icon-active {
      display: none;
      width: 48rpx;
      height: 48rpx;
    }
    .name {
      margin-top: 8rpx;
      font-size: 22rpx;
      color: rgba(20, 21, 21, 1);
      line-height: 21rpx;
    }
    &.active {
      .icon {
        display: none;
      }
      .icon-active {
        display: block;
      }
      .name {
        color: rgba(0, 180, 197, 1);
      }
    }
  }
}