:root {
  --ty-drawer-bg: var(--ty-color-bg-container);
  --ty-drawer-shadow: var(--ty-shadow-modal);
  --ty-drawer-transition-duration: 300ms;
  --ty-drawer-header-padding-block: 16px;
  --ty-drawer-header-padding-inline: 24px;
  --ty-drawer-body-padding-block: 16px;
  --ty-drawer-body-padding-inline: 24px;
  --ty-drawer-footer-padding-block: 16px;
  --ty-drawer-footer-padding-inline: 24px;
  --ty-drawer-border: var(--ty-color-border-secondary);
  --ty-drawer-close-color: var(--ty-color-text-tertiary);
  --ty-drawer-close-size: 56px;
}

[data-tiny-theme='dark'] {
  --ty-drawer-bg: #1f1f1f;
  --ty-drawer-shadow: var(--ty-shadow-modal);
  --ty-drawer-transition-duration: 300ms;
  --ty-drawer-header-padding-block: 16px;
  --ty-drawer-header-padding-inline: 24px;
  --ty-drawer-body-padding-block: 16px;
  --ty-drawer-body-padding-inline: 24px;
  --ty-drawer-footer-padding-block: 16px;
  --ty-drawer-footer-padding-inline: 24px;
  --ty-drawer-border: #363636;
  --ty-drawer-close-color: var(--ty-color-text-tertiary);
  --ty-drawer-close-size: 56px;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-drawer-bg: #1f1f1f;
  --ty-drawer-shadow: var(--ty-shadow-modal);
  --ty-drawer-transition-duration: 300ms;
  --ty-drawer-header-padding-block: 16px;
  --ty-drawer-header-padding-inline: 24px;
  --ty-drawer-body-padding-block: 16px;
  --ty-drawer-body-padding-inline: 24px;
  --ty-drawer-footer-padding-block: 16px;
  --ty-drawer-footer-padding-inline: 24px;
  --ty-drawer-border: #363636;
  --ty-drawer-close-color: var(--ty-color-text-tertiary);
  --ty-drawer-close-size: 56px;
}
}