:root {
  --ty-tabs-font-size: var(--ty-font-size-base);
  --ty-tabs-color: var(--ty-color-text);
  --ty-tabs-nav-margin: 16px;
  --ty-tabs-border: var(--ty-color-fill-tertiary);
  --ty-tabs-tab-padding-block-sm: 8px;
  --ty-tabs-tab-padding-block-md: 12px;
  --ty-tabs-tab-padding-block-lg: 16px;
  --ty-tabs-tab-gap: 32px;
  --ty-tabs-tab-color: var(--ty-color-text);
  --ty-tabs-tab-hover-color: var(--ty-color-primary-text-hover);
  --ty-tabs-tab-active-color: var(--ty-color-primary);
  --ty-tabs-tab-active-font-weight: 500;
  --ty-tabs-tab-disabled-color: var(--ty-color-text-quaternary);
  --ty-tabs-icon-gap: 8px;
  --ty-tabs-remove-gap: 8px;
  --ty-tabs-remove-font-size: 12px;
  --ty-tabs-remove-color: var(--ty-color-text-tertiary);
  --ty-tabs-remove-color-hover: var(--ty-color-text);
  --ty-tabs-ink-bar-color: var(--ty-color-primary);
  --ty-tabs-ink-bar-height: 2px;
  --ty-tabs-nav-button-size: 32px;
  --ty-tabs-nav-button-font-size: 16px;
  --ty-tabs-nav-button-color: var(--ty-color-text-tertiary);
  --ty-tabs-nav-button-color-hover: var(--ty-color-text);
  --ty-tabs-nav-button-color-disabled: var(--ty-color-text-quaternary);
  --ty-tabs-add-size: 32px;
  --ty-tabs-add-font-size: 14px;
  --ty-tabs-add-margin: 4px;
  --ty-tabs-add-radius: 4px;
  --ty-tabs-add-border-color: var(--ty-color-border);
  --ty-tabs-add-color: var(--ty-color-text-tertiary);
  --ty-tabs-add-color-hover: var(--ty-color-primary);
  --ty-tabs-add-border-color-hover: var(--ty-color-primary);
  --ty-tabs-extra-gap: 16px;
  --ty-tabs-size-sm: 13px;
  --ty-tabs-size-lg: 15px;
  --ty-tabs-card-padding-block: 8px;
  --ty-tabs-card-padding-inline: 16px;
  --ty-tabs-card-padding-inline-editable-end: 8px;
  --ty-tabs-card-gap: 2px;
  --ty-tabs-card-radius: 4px;
  --ty-tabs-card-bg: var(--ty-color-fill);
  --ty-tabs-card-active-bg: var(--ty-color-bg-container);
}

[data-tiny-theme='dark'] {
  --ty-tabs-font-size: var(--ty-font-size-base);
  --ty-tabs-color: var(--ty-color-text);
  --ty-tabs-nav-margin: 16px;
  --ty-tabs-border: #303030;
  --ty-tabs-tab-padding-block-sm: 8px;
  --ty-tabs-tab-padding-block-md: 12px;
  --ty-tabs-tab-padding-block-lg: 16px;
  --ty-tabs-tab-gap: 32px;
  --ty-tabs-tab-color: var(--ty-color-text);
  --ty-tabs-tab-hover-color: var(--ty-color-primary-text-hover);
  --ty-tabs-tab-active-color: var(--ty-color-primary);
  --ty-tabs-tab-active-font-weight: 500;
  --ty-tabs-tab-disabled-color: var(--ty-color-text-quaternary);
  --ty-tabs-icon-gap: 8px;
  --ty-tabs-remove-gap: 8px;
  --ty-tabs-remove-font-size: 12px;
  --ty-tabs-remove-color: var(--ty-color-text-tertiary);
  --ty-tabs-remove-color-hover: var(--ty-color-text);
  --ty-tabs-ink-bar-color: var(--ty-color-primary);
  --ty-tabs-ink-bar-height: 2px;
  --ty-tabs-nav-button-size: 32px;
  --ty-tabs-nav-button-font-size: 16px;
  --ty-tabs-nav-button-color: var(--ty-color-text-tertiary);
  --ty-tabs-nav-button-color-hover: var(--ty-color-text);
  --ty-tabs-nav-button-color-disabled: var(--ty-color-text-quaternary);
  --ty-tabs-add-size: 32px;
  --ty-tabs-add-font-size: 14px;
  --ty-tabs-add-margin: 4px;
  --ty-tabs-add-radius: 4px;
  --ty-tabs-add-border-color: var(--ty-color-border);
  --ty-tabs-add-color: var(--ty-color-text-tertiary);
  --ty-tabs-add-color-hover: var(--ty-color-primary);
  --ty-tabs-add-border-color-hover: var(--ty-color-primary);
  --ty-tabs-extra-gap: 16px;
  --ty-tabs-size-sm: 13px;
  --ty-tabs-size-lg: 15px;
  --ty-tabs-card-padding-block: 8px;
  --ty-tabs-card-padding-inline: 16px;
  --ty-tabs-card-padding-inline-editable-end: 8px;
  --ty-tabs-card-gap: 2px;
  --ty-tabs-card-radius: 4px;
  --ty-tabs-card-bg: #262626;
  --ty-tabs-card-active-bg: #1f1f1f;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-tabs-font-size: var(--ty-font-size-base);
  --ty-tabs-color: var(--ty-color-text);
  --ty-tabs-nav-margin: 16px;
  --ty-tabs-border: #303030;
  --ty-tabs-tab-padding-block-sm: 8px;
  --ty-tabs-tab-padding-block-md: 12px;
  --ty-tabs-tab-padding-block-lg: 16px;
  --ty-tabs-tab-gap: 32px;
  --ty-tabs-tab-color: var(--ty-color-text);
  --ty-tabs-tab-hover-color: var(--ty-color-primary-text-hover);
  --ty-tabs-tab-active-color: var(--ty-color-primary);
  --ty-tabs-tab-active-font-weight: 500;
  --ty-tabs-tab-disabled-color: var(--ty-color-text-quaternary);
  --ty-tabs-icon-gap: 8px;
  --ty-tabs-remove-gap: 8px;
  --ty-tabs-remove-font-size: 12px;
  --ty-tabs-remove-color: var(--ty-color-text-tertiary);
  --ty-tabs-remove-color-hover: var(--ty-color-text);
  --ty-tabs-ink-bar-color: var(--ty-color-primary);
  --ty-tabs-ink-bar-height: 2px;
  --ty-tabs-nav-button-size: 32px;
  --ty-tabs-nav-button-font-size: 16px;
  --ty-tabs-nav-button-color: var(--ty-color-text-tertiary);
  --ty-tabs-nav-button-color-hover: var(--ty-color-text);
  --ty-tabs-nav-button-color-disabled: var(--ty-color-text-quaternary);
  --ty-tabs-add-size: 32px;
  --ty-tabs-add-font-size: 14px;
  --ty-tabs-add-margin: 4px;
  --ty-tabs-add-radius: 4px;
  --ty-tabs-add-border-color: var(--ty-color-border);
  --ty-tabs-add-color: var(--ty-color-text-tertiary);
  --ty-tabs-add-color-hover: var(--ty-color-primary);
  --ty-tabs-add-border-color-hover: var(--ty-color-primary);
  --ty-tabs-extra-gap: 16px;
  --ty-tabs-size-sm: 13px;
  --ty-tabs-size-lg: 15px;
  --ty-tabs-card-padding-block: 8px;
  --ty-tabs-card-padding-inline: 16px;
  --ty-tabs-card-padding-inline-editable-end: 8px;
  --ty-tabs-card-gap: 2px;
  --ty-tabs-card-radius: 4px;
  --ty-tabs-card-bg: #262626;
  --ty-tabs-card-active-bg: #1f1f1f;
}
}