:root {
  --ty-carousel-arrow-bg: rgba(0, 0, 0, 0.25);
  --ty-carousel-arrow-hover-bg: rgba(0, 0, 0, 0.45);
  --ty-carousel-arrow-size: 36px;
  --ty-carousel-arrow-color: #fff;
  --ty-carousel-arrow-offset: 12px;
  --ty-carousel-dot-active-bg: #fff;
  --ty-carousel-dot-bg: rgba(255, 255, 255, 0.3);
  --ty-carousel-dot-hover-bg: rgba(255, 255, 255, 0.6);
  --ty-carousel-dot-width: 16px;
  --ty-carousel-dot-height: 3px;
  --ty-carousel-dot-gap: 4px;
  --ty-carousel-dot-radius: 1px;
  --ty-carousel-dot-width-active: 24px;
  --ty-carousel-dot-height-active: 24px;
}

[data-tiny-theme='dark'] {
  --ty-carousel-arrow-bg: rgba(255, 255, 255, 0.15);
  --ty-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.25);
  --ty-carousel-arrow-size: 36px;
  --ty-carousel-arrow-color: #fff;
  --ty-carousel-arrow-offset: 12px;
  --ty-carousel-dot-active-bg: #fff;
  --ty-carousel-dot-bg: rgba(255, 255, 255, 0.3);
  --ty-carousel-dot-hover-bg: rgba(255, 255, 255, 0.6);
  --ty-carousel-dot-width: 16px;
  --ty-carousel-dot-height: 3px;
  --ty-carousel-dot-gap: 4px;
  --ty-carousel-dot-radius: 1px;
  --ty-carousel-dot-width-active: 24px;
  --ty-carousel-dot-height-active: 24px;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-carousel-arrow-bg: rgba(255, 255, 255, 0.15);
  --ty-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.25);
  --ty-carousel-arrow-size: 36px;
  --ty-carousel-arrow-color: #fff;
  --ty-carousel-arrow-offset: 12px;
  --ty-carousel-dot-active-bg: #fff;
  --ty-carousel-dot-bg: rgba(255, 255, 255, 0.3);
  --ty-carousel-dot-hover-bg: rgba(255, 255, 255, 0.6);
  --ty-carousel-dot-width: 16px;
  --ty-carousel-dot-height: 3px;
  --ty-carousel-dot-gap: 4px;
  --ty-carousel-dot-radius: 1px;
  --ty-carousel-dot-width-active: 24px;
  --ty-carousel-dot-height-active: 24px;
}
}