:root {
  --ty-modal-radius: 4px;
  --ty-modal-shadow: var(--ty-shadow-modal);
  --ty-modal-bg: var(--ty-color-bg-container);
  --ty-modal-offset-top: 100px;
  --ty-modal-enter-offset-y: -20px;
  --ty-modal-scale-enter: 0;
  --ty-modal-transition-duration: 300ms;
  --ty-modal-header-bg: var(--ty-color-bg-container);
  --ty-modal-header-color: var(--ty-color-text-secondary);
  --ty-modal-header-padding-block: 16px;
  --ty-modal-header-padding-inline: 24px;
  --ty-modal-header-border: var(--ty-color-border-secondary);
  --ty-modal-title-color: var(--ty-color-text);
  --ty-modal-title-font-weight: 500;
  --ty-modal-title-font-size: 16px;
  --ty-modal-title-line-height: 22px;
  --ty-modal-close-color: var(--ty-color-text-tertiary);
  --ty-modal-close-size: 56px;
  --ty-modal-body-padding: 24px;
  --ty-modal-body-font-size: 14px;
  --ty-modal-body-line-height: 1.5;
  --ty-modal-footer-padding-block: 12px;
  --ty-modal-footer-padding-inline: 16px;
  --ty-modal-footer-border: var(--ty-color-border-secondary);
}

[data-tiny-theme='dark'] {
  --ty-modal-radius: 4px;
  --ty-modal-shadow: var(--ty-shadow-modal);
  --ty-modal-bg: #1f1f1f;
  --ty-modal-offset-top: 100px;
  --ty-modal-enter-offset-y: -20px;
  --ty-modal-scale-enter: 0;
  --ty-modal-transition-duration: 300ms;
  --ty-modal-header-bg: #1f1f1f;
  --ty-modal-header-color: var(--ty-color-text-secondary);
  --ty-modal-header-padding-block: 16px;
  --ty-modal-header-padding-inline: 24px;
  --ty-modal-header-border: #363636;
  --ty-modal-title-color: var(--ty-color-text);
  --ty-modal-title-font-weight: 500;
  --ty-modal-title-font-size: 16px;
  --ty-modal-title-line-height: 22px;
  --ty-modal-close-color: var(--ty-color-text-tertiary);
  --ty-modal-close-size: 56px;
  --ty-modal-body-padding: 24px;
  --ty-modal-body-font-size: 14px;
  --ty-modal-body-line-height: 1.5;
  --ty-modal-footer-padding-block: 12px;
  --ty-modal-footer-padding-inline: 16px;
  --ty-modal-footer-border: #363636;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-modal-radius: 4px;
  --ty-modal-shadow: var(--ty-shadow-modal);
  --ty-modal-bg: #1f1f1f;
  --ty-modal-offset-top: 100px;
  --ty-modal-enter-offset-y: -20px;
  --ty-modal-scale-enter: 0;
  --ty-modal-transition-duration: 300ms;
  --ty-modal-header-bg: #1f1f1f;
  --ty-modal-header-color: var(--ty-color-text-secondary);
  --ty-modal-header-padding-block: 16px;
  --ty-modal-header-padding-inline: 24px;
  --ty-modal-header-border: #363636;
  --ty-modal-title-color: var(--ty-color-text);
  --ty-modal-title-font-weight: 500;
  --ty-modal-title-font-size: 16px;
  --ty-modal-title-line-height: 22px;
  --ty-modal-close-color: var(--ty-color-text-tertiary);
  --ty-modal-close-size: 56px;
  --ty-modal-body-padding: 24px;
  --ty-modal-body-font-size: 14px;
  --ty-modal-body-line-height: 1.5;
  --ty-modal-footer-padding-block: 12px;
  --ty-modal-footer-padding-inline: 16px;
  --ty-modal-footer-border: #363636;
}
}