carousel.shadow.css

:host {
  all: initial;
  position: relative;
  display: block;
  overflow: hidden;
}

:host > div {
  width: 100%;
}

.strip {
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
}

::slotted(*) {
  flex: 0 0 100%;
  margin: 0;
  will-change: transform;
}

.previous-slide, .next-slide {
  display: flex;
  position: absolute;
  z-index: 10;
  width: 100px;
  height: 100%;
  align-items: center;
  cursor: pointer;
}

.previous-slide svg,
.next-slide svg {
  width: 100%;
}

.previous-slide[hidden], .next-slide[hidden] {
  display: none;
}

.next-slide {
  right: 0;
  justify-content: flex-end;
}

.previous-slide svg,
.next-slide svg {
  fill: var(--button-color, white);
}

svg.hand .contrast {
  fill: var(--button-contrast-color, black);
}

.slide-indicator {
  display: flex;
  position: absolute;
  justify-content: center;
  z-index: 10;
  bottom: 10%;
  width: 100%;
}

.slide-indicator svg {
  margin: 0 0.5rem;
  cursor: pointer;
}

.slide-indicator svg path {
  fill: var(--indicator-color, white);
}