:root {
  --ty-segmented-item-bg: transparent;
  --ty-segmented-bg: #e9ecef;
  --ty-segmented-radius: var(--ty-border-radius);
  --ty-segmented-padding: 2px;
  --ty-segmented-item-gap: 4px;
  --ty-segmented-item-color: var(--ty-color-text-secondary);
  --ty-segmented-item-bg-hover: var(--ty-color-fill);
  --ty-segmented-item-color-hover: var(--ty-color-text);
  --ty-segmented-item-bg-selected: var(--ty-color-bg-container);
  --ty-segmented-item-color-selected: var(--ty-color-text);
  --ty-segmented-item-shadow-selected: 0 1px 2px 0 rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 10%);
  --ty-segmented-item-shadow-focus: var(--ty-shadow-focus);
  --ty-segmented-item-font-weight-selected: 500;
  --ty-segmented-item-color-disabled: var(--ty-color-text-quaternary);
  --ty-segmented-item-bg-disabled: transparent;
  --ty-segmented-item-opacity-disabled: 0.5;
  --ty-segmented-item-padding-inline-sm: 8px;
  --ty-segmented-item-padding-inline-md: 12px;
  --ty-segmented-item-padding-inline-lg: 16px;
  --ty-segmented-item-padding-block-sm: 0;
  --ty-segmented-item-padding-block-md: 0;
  --ty-segmented-item-padding-block-lg: 0;
  --ty-segmented-item-height-sm: calc({height-sm} - 4px);
  --ty-segmented-item-height-md: calc({height-md} - 4px);
  --ty-segmented-item-height-lg: calc({height-lg} - 4px);
  --ty-segmented-font-size-sm: var(--ty-font-size-sm);
  --ty-segmented-font-size-md: var(--ty-font-size-base);
  --ty-segmented-font-size-lg: var(--ty-font-size-lg);
  --ty-segmented-icon-size: 14px;
}

[data-tiny-theme='dark'] {
  --ty-segmented-item-bg: transparent;
  --ty-segmented-bg: #2a2a2a;
  --ty-segmented-radius: var(--ty-border-radius);
  --ty-segmented-padding: 2px;
  --ty-segmented-item-gap: 4px;
  --ty-segmented-item-color: var(--ty-color-text-secondary);
  --ty-segmented-item-bg-hover: #303030;
  --ty-segmented-item-color-hover: var(--ty-color-text);
  --ty-segmented-item-bg-selected: #1f1f1f;
  --ty-segmented-item-color-selected: var(--ty-color-text);
  --ty-segmented-item-shadow-selected: 0 1px 2px 0 rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 10%);
  --ty-segmented-item-shadow-focus: var(--ty-shadow-focus);
  --ty-segmented-item-font-weight-selected: 500;
  --ty-segmented-item-color-disabled: var(--ty-color-text-quaternary);
  --ty-segmented-item-bg-disabled: transparent;
  --ty-segmented-item-opacity-disabled: 0.5;
  --ty-segmented-item-padding-inline-sm: 8px;
  --ty-segmented-item-padding-inline-md: 12px;
  --ty-segmented-item-padding-inline-lg: 16px;
  --ty-segmented-item-padding-block-sm: 0;
  --ty-segmented-item-padding-block-md: 0;
  --ty-segmented-item-padding-block-lg: 0;
  --ty-segmented-item-height-sm: calc({height-sm} - 4px);
  --ty-segmented-item-height-md: calc({height-md} - 4px);
  --ty-segmented-item-height-lg: calc({height-lg} - 4px);
  --ty-segmented-font-size-sm: var(--ty-font-size-sm);
  --ty-segmented-font-size-md: var(--ty-font-size-base);
  --ty-segmented-font-size-lg: var(--ty-font-size-lg);
  --ty-segmented-icon-size: 14px;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-segmented-item-bg: transparent;
  --ty-segmented-bg: #2a2a2a;
  --ty-segmented-radius: var(--ty-border-radius);
  --ty-segmented-padding: 2px;
  --ty-segmented-item-gap: 4px;
  --ty-segmented-item-color: var(--ty-color-text-secondary);
  --ty-segmented-item-bg-hover: #303030;
  --ty-segmented-item-color-hover: var(--ty-color-text);
  --ty-segmented-item-bg-selected: #1f1f1f;
  --ty-segmented-item-color-selected: var(--ty-color-text);
  --ty-segmented-item-shadow-selected: 0 1px 2px 0 rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 10%);
  --ty-segmented-item-shadow-focus: var(--ty-shadow-focus);
  --ty-segmented-item-font-weight-selected: 500;
  --ty-segmented-item-color-disabled: var(--ty-color-text-quaternary);
  --ty-segmented-item-bg-disabled: transparent;
  --ty-segmented-item-opacity-disabled: 0.5;
  --ty-segmented-item-padding-inline-sm: 8px;
  --ty-segmented-item-padding-inline-md: 12px;
  --ty-segmented-item-padding-inline-lg: 16px;
  --ty-segmented-item-padding-block-sm: 0;
  --ty-segmented-item-padding-block-md: 0;
  --ty-segmented-item-padding-block-lg: 0;
  --ty-segmented-item-height-sm: calc({height-sm} - 4px);
  --ty-segmented-item-height-md: calc({height-md} - 4px);
  --ty-segmented-item-height-lg: calc({height-lg} - 4px);
  --ty-segmented-font-size-sm: var(--ty-font-size-sm);
  --ty-segmented-font-size-md: var(--ty-font-size-base);
  --ty-segmented-font-size-lg: var(--ty-font-size-lg);
  --ty-segmented-icon-size: 14px;
}
}