.o-tab {
  --tab-nav-btn-icon-size: var(--o-icon_size_control-xs);
  --tab-nav-btn-size: 24px;

  --tab-nav-color: var(--o-color-info2);
  --tab-nav-color-disabled: var(--o-color-info4);

  --tab-nav-radius: 2px;

  --tab-icon-color: var(--o-color-info2);
  --tab-icon-color-hover: var(--o-color-primary1);
  --tab-icon-color-disabled: var(--o-color-info4);

  --tab-nav-divider: 1px solid var(--o-color-control1);
  --tab-nav-anchor-color: var(--o-color-primary1);
  --tab-nav-anchor-height: 2px;

  --tab-nav-close-size: var(--o-icon_size_control-xs);
  --tab-nav-icon-size: var(--o-icon_size_control-m);
  --tab-nav-icon-gap: 8px;

  --tab-nav-ellipsis-padding-x: 16px;
  --tab-nav-ellipsis-shadow-width: 8px;
}

.o-tab-large {
  --tab-nav-text-size: var(--o-font_size-h4);
  --tab-nav-text-height: var(--o-line_height-h4);
  --tab-nav-gap: 40px;
  --tab-nav-icon-size: var(--o-icon_size_control-l);
  --tab-nav-padding: 0 0 18px;
}
.o-tab-medium {
  --tab-nav-text-size: var(--o-font_size-text2);
  --tab-nav-text-height: var(--o-line_height-text2);
  --tab-nav-gap: 32px;
  --tab-nav-icon-size: var(--o-icon_size_control-m);

  --tab-nav-padding: 0 0 16px;
}
.o-tab-small {
  --tab-nav-text-size: var(--o-font_size-text1);
  --tab-nav-text-height: var(--o-line_height-text1);
  --tab-nav-gap: 24px;
  --tab-nav-icon-size: var(--o-icon_size_control-xs);

  --tab-nav-padding: 0 0 8px;
}

.o-tab-solid {
  --tab-nav-bd-color: var(--o-color-control1-light);
  --tab-nav-bd-color-hover: var(--o-color-control2-light);
  --tab-nav-bd-color-active: var(--o-color-control1-light);
  --tab-nav-bd-color-disabled: var(--o-color-control4-light);

  --tab-nav-bg-color: var(--o-color-control1-light);
  --tab-nav-bg-color-hover: var(--o-color-control2-light);
  --tab-nav-bg-color-active: var(--o-color-control5-light);
  --tab-nav-bg-color-disabled: var(--o-color-control4-light);

  --tab-solid-nav-padding: 4px 16px;
  --tab-solid-nav-gap: 8px;
}
.o-tab-text {
  --tab-nav-color-hover: var(--o-color-primary1);
  --tab-nav-color-active: var(--o-color-primary1);
  --tab-nav-bd-color: transparent;
  --tab-nav-bd-color-hover: transparent;
  --tab-nav-bd-color-active: var(--o-color-primary1);
}

.o-tab-button {
  --tab-nav-color-hover: var(--o-color-primary1);
  --tab-nav-color-active: var(--o-color-primary1);
  --tab-nav-bg-color: var(--o-color-fill3);
  --tab-nav-bg-color-active: var(--o-color-fill2);
  --tab-nav-active-border: 1px solid var(--o-color-control4-light);
  --tab-nav-justify: flex-start;
  --tab-nav-icon-gap: 4px;
  --tab-btn-radius: var(--o-radius_control-s);

  &.o-tab-large {
    --tab-nav-text-size: var(--o-font_size-text2);
    --tab-nav-text-height: var(--o-line_height-text2);
    --tab-nav-icon-size: var(--o-icon_size-m);
    --tab-nav-gap: 4px;
    --tab-nav-padding: 6px 16px;
    --tab-nav-list-padding: 4px;

    .o-tab-nav:has(.o-icon:only-child) {
      --tab-nav-padding: 7px 8px;
      --tab-nav-icon-gap: 0;
    }
  }
  &.o-tab-medium,
  &.o-tab-small {
    --tab-nav-text-size: var(--o-font_size-tip1);
    --tab-nav-text-height: var(--o-line_height-tip1);
    --tab-nav-icon-size: var(--o-icon_size-xs);
    --tab-nav-gap: 4px;
    --tab-nav-padding: 2px 16px;
    --tab-nav-list-padding: 2px;

    .o-tab-nav:has(.o-icon:only-child) {
      --tab-nav-padding: 5px 6px;
      --tab-nav-icon-gap: 0;
    }
  }
}

.o-tab-button-inverse {
  --tab-nav-bg-color: var(--o-color-fill2);
  --tab-nav-bg-color-active: var(--o-color-fill3);
}