/**
**Theme Slider Styles
** This file contains the styles for all slider components unless revered to another file.
*/
/*Dots*/
.spectra-image-gallery__layout--carousel ul.slick-dots {
  top: unset !important;
  bottom: -30px;
  position: absolute !important;
}

.uagb-slick-carousel ul.slick-dots li button {
  position: relative !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

ul.slick-dots button::before {
  height: 12px !important;
  width: 12px !important;
  background-color: var(--color-1) !important;
  color: transparent !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  left: unset !important;
  top: unset !important;
}

ul.slick-dots button[aria-selected="true"]:before {
  color: transparent !important;
}
/*Arrows*/
.wp-block-uagb-image-gallery .spectra-image-gallery button.slick-arrow {
  padding: 0 !important;
  height: auto;
  width: auto;
  display: flex !important;
  position: absolute !important;
  visibility: visible !important;
}

.wp-block-uagb-image-gallery
  .spectra-image-gallery
  .spectra-image-gallery__control-arrows--carousel.slick-prev {
  left: var(--gap-m);
}

.wp-block-uagb-image-gallery
  .spectra-image-gallery
  .spectra-image-gallery__control-arrows--carousel.slick-next {
  right: var(--gap-m);
}

button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-prev.slick-arrow::after, button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-next.slick-arrow::after {
    --my-size: 2.8rem;
    content: "";
    height: var(--my-size);
    width: calc(var(--my-size) / 2.4348);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    position: relative;
    filter: drop-shadow(0 0 0.35rem #000);
}

.slider svg {
  display: none;
}

button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-next.slick-arrow::after {
  background-image: url(../../img/icon-pfeil-rechts.svg);
}

button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-prev.slick-arrow::after {
  background-image: url(../../img/icon-pfeil-links.svg);
}
/*------------*/

/* Sliders */
.slider,
#chronik .chronik-slider-wrapper {
  width: 51vw !important;
  max-width: 815px;
}

.slider ul.slick-dots {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .wp-block-uagb-image-gallery
    .spectra-image-gallery
    .spectra-image-gallery__control-arrows--carousel.slick-prev {
    left: var(--gap-s);
  }
  .wp-block-uagb-image-gallery
    .spectra-image-gallery
    .spectra-image-gallery__control-arrows--carousel.slick-next {
    right: var(--gap-s);
  }
}
@media screen and (max-width: 576px) {
  button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-next.slick-arrow::after {
  background-image: url(../../img/icon-pfeil-rechts-mobile.svg);
}

button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-prev.slick-arrow::after {
  background-image: url(../../img/icon-pfeil-links-mobile.svg);
}
  button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-prev.slick-arrow::after,
  button.spectra-image-gallery__control-arrows.spectra-image-gallery__control-arrows--carousel.slick-next.slick-arrow::after {
    --my-size: 1.55rem;
    height: var(--my-size);
    width: calc(var(--my-size) / 2);
  }
}