@tab-padding: 12px;
@tab-active-color: var(--color-primary);
@tab-inactive-color: #646566;
@tab-disabled-color: var(--color-text-disabled);
@tab-font-size: var(--font-size-md);

:root {
  --tab-padding: @tab-padding;
  --tab-active-color: @tab-active-color;
  --tab-inactive-color: @tab-inactive-color;
  --tab-disabled-color: @tab-disabled-color;
  --tab-font-size: @tab-font-size;
}

.var-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 auto;
  padding: 0 var(--tab-padding);
  font-size: var(--tab-font-size);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &--active {
    color: var(--tab-active-color);
  }

  &--inactive {
    color: var(--tab-inactive-color);
  }

  &--disabled {
    color: var(--tab-disabled-color);
    cursor: not-allowed;
  }

  &--horizontal {
    flex-direction: row;
  }

  &--vertical {
    flex-direction: column;
  }
}