:root {
  --ty-notification-bg: var(--ty-color-bg-container);
  --ty-notification-border-radius: 3px;
  --ty-notification-color: var(--ty-color-text-secondary);
  --ty-notification-close-color: rgba(0, 0, 0, 0.2);
  --ty-notification-close-hover: rgba(0, 0, 0, 0.7);
  --ty-notification-close-offset-inline-end: 24px;
  --ty-notification-close-offset-top: 16px;
  --ty-notification-font-size: var(--ty-font-size-base);
  --ty-notification-icon-gap: 15px;
  --ty-notification-icon-height: 30px;
  --ty-notification-margin: 20px;
  --ty-notification-padding: 16px 24px;
  --ty-notification-shadow: var(--ty-shadow-modal);
  --ty-notification-title-font-size: 16px;
  --ty-notification-title-color: var(--ty-color-text);
  --ty-notification-title-line-height: 24px;
  --ty-notification-title-margin-bottom: 5px;
  --ty-notification-title-padding-inline-end: 24px;
  --ty-notification-width: 380px;
  --ty-notification-z-index: 999;
}

[data-tiny-theme='dark'] {
  --ty-notification-bg: #1f1f1f;
  --ty-notification-border-radius: 3px;
  --ty-notification-color: var(--ty-color-text-secondary);
  --ty-notification-close-color: rgba(255, 255, 255, 0.2);
  --ty-notification-close-hover: rgba(255, 255, 255, 0.7);
  --ty-notification-close-offset-inline-end: 24px;
  --ty-notification-close-offset-top: 16px;
  --ty-notification-font-size: var(--ty-font-size-base);
  --ty-notification-icon-gap: 15px;
  --ty-notification-icon-height: 30px;
  --ty-notification-margin: 20px;
  --ty-notification-padding: 16px 24px;
  --ty-notification-shadow: var(--ty-shadow-modal);
  --ty-notification-title-font-size: 16px;
  --ty-notification-title-color: var(--ty-color-text);
  --ty-notification-title-line-height: 24px;
  --ty-notification-title-margin-bottom: 5px;
  --ty-notification-title-padding-inline-end: 24px;
  --ty-notification-width: 380px;
  --ty-notification-z-index: 999;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-notification-bg: #1f1f1f;
  --ty-notification-border-radius: 3px;
  --ty-notification-color: var(--ty-color-text-secondary);
  --ty-notification-close-color: rgba(255, 255, 255, 0.2);
  --ty-notification-close-hover: rgba(255, 255, 255, 0.7);
  --ty-notification-close-offset-inline-end: 24px;
  --ty-notification-close-offset-top: 16px;
  --ty-notification-font-size: var(--ty-font-size-base);
  --ty-notification-icon-gap: 15px;
  --ty-notification-icon-height: 30px;
  --ty-notification-margin: 20px;
  --ty-notification-padding: 16px 24px;
  --ty-notification-shadow: var(--ty-shadow-modal);
  --ty-notification-title-font-size: 16px;
  --ty-notification-title-color: var(--ty-color-text);
  --ty-notification-title-line-height: 24px;
  --ty-notification-title-margin-bottom: 5px;
  --ty-notification-title-padding-inline-end: 24px;
  --ty-notification-width: 380px;
  --ty-notification-z-index: 999;
}
}