.nut-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 6px 0 2px;
  color: $tabbar-inactive-color;
  height: 100%;

  .nut-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    /* #ifdef harmony dynamic*/
    color: $tabbar-inactive-color;
    /* #endif*/
    /* #ifndef harmony dynamic*/
    color: inherit;
    /* #endif*/
  }

  &-text {
    display: block;
    color: $color-text;
    font-size: $tabbar-text-font-size;
    line-height: $tabbar-text-font-size;
    margin-top: $tabbar-text-margin-top;
  }

  .nut-image {
    &-default {
      width: 38px;
      height: 38px;
      border-radius: 38px;
    }
  }

  &-large {
    justify-content: center;
    padding: 0;

    .nut-tabbar-item-text {
      font-size: $tabbar-text-large-font-size;
      margin-top: 0;
      line-height: $tabbar-text-large-font-size;
      font-weight: $tabbar-text-large-font-weight;
    }
  }

  &-active {
    color: $tabbar-active-color;

    .nut-tabbar-item-text,
    .nut-icon {
      /* #ifdef harmony dynamic*/
      color: $tabbar-active-color;
      /* #endif*/
      /* #ifndef harmony dynamic*/
      color: inherit;
      /* #endif*/
    }
  }
}