@appearhere/bloom/components/Carousel/ControlledCarousel.css

Appear Here's pattern library and styleguide

.root {
  position: relative;
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) ;
  width: 100%;
}

.control {
  position: absolute;
  color: var(--color-white);
  font-size: 2rem;
  background-color: transparent;
  border: 0;
  opacity: 0.75;
}

.control:hover,
.control:focus,
.control:active {
  color: var(--color-white);
  opacity: 1;
}

.control:disabled,
.control:hover:disabled,
.control:active:disabled,
.control:focus:disabled {
  opacity: 0.3;
  color: var(--color-white);
  background-color: transparent;
  border: 0;
}

.prev {
  right: auto;
  left: var(--size-medium);
  transform: translateY(-50%) rotate(270deg);
}
.next {
  right: var(--size-medium);
  left: auto;
  transform: translateY(-50%) rotate(90deg);
}

.indicators {
  position: absolute;
  bottom: var(--size-medium);
  left: 50%;
  transform: translateX(-50%);
}

.indicator {
  background-color: rgba(255, 255, 255, 0.35);
}
.indicator:after {
  background-color: var(--color-white);
}