:root {
  --theme-color-background: rgb(240, 237, 237);
  --theme-color-foreground: rgb(65, 64, 97);
}

carousel-slide {
  --bg-slash-line-gap: 20px;
  --bg-slash-line-width: 10px;
  --line-rotation: 0deg;
  background: repeating-linear-gradient(
    var(--line-rotation),
    var(--theme-color-background),
    var(--theme-color-background) var(--bg-slash-line-gap),
    var(--theme-color-foreground) var(--bg-slash-line-width),
    var(--theme-color-foreground) calc(var(--bg-slash-line-gap) + var(--bg-slash-line-width))
  );
}

carousel-slide:nth-child(odd) {
  --line-rotation: 45deg;
}
carousel-slide:nth-child(even) {
  --line-rotation: -45deg;
}

carousel-slide p {
  background: var(--theme-color-foreground);
  color: var(--theme-color-background);
}

carousel-progress {
  background: var(--theme-color-background);
}

progress-indicator {
  background: var(--theme-color-foreground);
}
