:root {
  --ty-collapse-bg: var(--ty-color-bg-container);
  --ty-collapse-border-color: var(--ty-color-border);
  --ty-collapse-borderless-divider-color: var(--ty-color-border-secondary);
  --ty-collapse-radius: var(--ty-border-radius);
  --ty-collapse-header-bg: transparent;
  --ty-collapse-header-hover-bg: var(--ty-color-fill);
  --ty-collapse-header-active-bg: var(--ty-color-fill);
  --ty-collapse-header-disabled-bg: transparent;
  --ty-collapse-header-color: var(--ty-color-text);
  --ty-collapse-header-disabled-color: var(--ty-color-text-quaternary);
  --ty-collapse-header-min-height: 44px;
  --ty-collapse-header-padding-inline: 16px;
  --ty-collapse-header-padding-block: 14px;
  --ty-collapse-header-gap: 12px;
  --ty-collapse-icon-color: var(--ty-collapse-header-color);
  --ty-collapse-icon-active-color: var(--ty-collapse-header-color);
  --ty-collapse-icon-disabled-color: var(--ty-color-text-quaternary);
  --ty-collapse-icon-slot-size: 20px;
  --ty-collapse-icon-size: 10px;
  --ty-collapse-extra-color: var(--ty-color-text-secondary);
  --ty-collapse-extra-disabled-color: var(--ty-color-text-quaternary);
  --ty-collapse-extra-gap: 8px;
  --ty-collapse-extra-font-size: 12px;
  --ty-collapse-body-bg: var(--ty-color-bg-container);
  --ty-collapse-body-color: var(--ty-color-text-secondary);
  --ty-collapse-body-padding-inline: 16px;
  --ty-collapse-body-padding-block: 16px;
  --ty-collapse-font-size: 14px;
  --ty-collapse-line-height: 1.5;
  --ty-collapse-focus-ring: var(--ty-color-primary);
  --ty-collapse-motion-duration: 240ms;
  --ty-collapse-motion-easing: ease;
}

[data-tiny-theme='dark'] {
  --ty-collapse-bg: #262626;
  --ty-collapse-border-color: #424242;
  --ty-collapse-borderless-divider-color: #363636;
  --ty-collapse-radius: var(--ty-border-radius);
  --ty-collapse-header-bg: transparent;
  --ty-collapse-header-hover-bg: #303030;
  --ty-collapse-header-active-bg: #303030;
  --ty-collapse-header-disabled-bg: transparent;
  --ty-collapse-header-color: var(--ty-color-text);
  --ty-collapse-header-disabled-color: rgba(255, 255, 255, 0.35);
  --ty-collapse-header-min-height: 44px;
  --ty-collapse-header-padding-inline: 16px;
  --ty-collapse-header-padding-block: 14px;
  --ty-collapse-header-gap: 12px;
  --ty-collapse-icon-color: var(--ty-collapse-header-color);
  --ty-collapse-icon-active-color: var(--ty-collapse-header-color);
  --ty-collapse-icon-disabled-color: rgba(255, 255, 255, 0.35);
  --ty-collapse-icon-slot-size: 20px;
  --ty-collapse-icon-size: 10px;
  --ty-collapse-extra-color: rgba(255, 255, 255, 0.65);
  --ty-collapse-extra-disabled-color: rgba(255, 255, 255, 0.35);
  --ty-collapse-extra-gap: 8px;
  --ty-collapse-extra-font-size: 12px;
  --ty-collapse-body-bg: #1f1f1f;
  --ty-collapse-body-color: var(--ty-color-text-secondary);
  --ty-collapse-body-padding-inline: 16px;
  --ty-collapse-body-padding-block: 16px;
  --ty-collapse-font-size: 14px;
  --ty-collapse-line-height: 1.5;
  --ty-collapse-focus-ring: var(--ty-color-primary);
  --ty-collapse-motion-duration: 240ms;
  --ty-collapse-motion-easing: ease;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-collapse-bg: #262626;
  --ty-collapse-border-color: #424242;
  --ty-collapse-borderless-divider-color: #363636;
  --ty-collapse-radius: var(--ty-border-radius);
  --ty-collapse-header-bg: transparent;
  --ty-collapse-header-hover-bg: #303030;
  --ty-collapse-header-active-bg: #303030;
  --ty-collapse-header-disabled-bg: transparent;
  --ty-collapse-header-color: var(--ty-color-text);
  --ty-collapse-header-disabled-color: rgba(255, 255, 255, 0.35);
  --ty-collapse-header-min-height: 44px;
  --ty-collapse-header-padding-inline: 16px;
  --ty-collapse-header-padding-block: 14px;
  --ty-collapse-header-gap: 12px;
  --ty-collapse-icon-color: var(--ty-collapse-header-color);
  --ty-collapse-icon-active-color: var(--ty-collapse-header-color);
  --ty-collapse-icon-disabled-color: rgba(255, 255, 255, 0.35);
  --ty-collapse-icon-slot-size: 20px;
  --ty-collapse-icon-size: 10px;
  --ty-collapse-extra-color: rgba(255, 255, 255, 0.65);
  --ty-collapse-extra-disabled-color: rgba(255, 255, 255, 0.35);
  --ty-collapse-extra-gap: 8px;
  --ty-collapse-extra-font-size: 12px;
  --ty-collapse-body-bg: #1f1f1f;
  --ty-collapse-body-color: var(--ty-color-text-secondary);
  --ty-collapse-body-padding-inline: 16px;
  --ty-collapse-body-padding-block: 16px;
  --ty-collapse-font-size: 14px;
  --ty-collapse-line-height: 1.5;
  --ty-collapse-focus-ring: var(--ty-color-primary);
  --ty-collapse-motion-duration: 240ms;
  --ty-collapse-motion-easing: ease;
}
}