$height: 44px;
$height-btn: 30px;

.vui-tab-wrapper {
  .vui-tab {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .vui-tab-item {
    text-align: center;
    height: 100%;
    flex: 1;
  }

  .vui-tab-links {
    height: $height;
    position: relative;

    .vui-tab-item {
      font-size: 15px;
      padding: 0 $padding;
      line-height: $height;
      border-bottom: 2px solid transparent;

      &.disabled {
        color: $color-disabled;
      }

      &.is-active {
        color: $color-theme;
        border-bottom-color: $color-theme;
        &.disabled {
          color: $color-theme-disabled;
          border-bottom-color: $color-theme-disabled;
        }
      }
    }
  }

  .vui-tab-buttons {
    height: $height-btn;
    overflow: hidden;
    border-radius: 4px;
    @include thin-border-before($color-theme, 4px);

    .vui-tab-item {
      z-index: 0;
      line-height: $height-btn;
      font-size: 13px;
      color: $color-theme;
      background-color: transparent;
      &.disabled {
        color: $color-theme-disabled;
      }

      &.is-active {
        background-color: $color-theme;
        color: #fff;
        &.disabled {
          background-color: $color-theme-disabled;
          color: #fff;
        }
      }
    }
  }

  &.disabled {
    .vui-tab-item {
      color: $color-disabled;
      &.is-active {
        color: $color-theme-disabled;
        border-bottom-color: $color-theme-disabled;
      }
    }

    .vui-tab-buttons {
      @include thin-border-before($color-theme-disabled, 4px);

      .vui-tab-item {
        color: $color-theme-disabled;

        &.is-active {
          background-color: $color-theme-disabled;
          color: #fff;
        }
      }
    }
  }
}