@use "sass:map";
// stylelint-disable no-descending-specificity
$indicator-size: 8px;

.carousel-indicators {
  background-color: rgba(0, 0, 0, 0.5);
  padding: map.get($spacers, 3) 0 map.get($spacers, 4);
  margin: 0;
  [data-bs-target] {
    width: $indicator-size;
    height: $indicator-size;
    margin: 0 map.get($spacers, 2) 0;
    border-radius: 50%;
    border: 1px solid transparent;
    &:focus {
      outline: 1px solid $white;
      border-color: $primary;
      opacity: 1;
    }
  }
}

.carousel-caption {
  width: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  padding: map.get($spacers, 3) 0 map.get($spacers, 4);
  p {
    margin-bottom: 0;
  }
  a {
    color: $white;
    text-decoration-color: $white;
  }
}

.carousel-dark {
  .carousel-caption {
    background-color: rgba(255, 255, 255, 0.5);
    a {
      color: $black;
      text-decoration-color: $black;
    }
  }

  .carousel-indicators {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.carousel-control-next,
.carousel-control-prev {
  opacity: 1;
  &:hover {
    opacity: 1;
  }
  &:focus {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      outline: 2px solid $white;
    }
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 40px;
  height: 40px;
  background-size: 60% 60%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.carousel-control-next-icon {
  background-position: 9px center;
}

.carousel-control-prev-icon {
  background-position: 7px center;
}

.carousel.rounded-indicators {
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    border-radius: 50%;
  }
}

.carousel {
  .bcl-copyright {
    bottom: 0;
    width: 100%;
    position: absolute;
    left: 0;
  }
  &:has(.carousel-item.carousel-item-start .bcl-copyright),
  &:has(.carousel-item.carousel-item-end .bcl-copyright),
  &:has(.carousel-item.active .bcl-copyright) {
    .carousel-indicators {
      bottom: 29px;
    }
    .carousel-caption {
      bottom: 29px;
    }
    .carousel-indicators + .carousel-inner {
      .carousel-caption {
        bottom: 79px;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .carousel-indicators {
    & + .carousel-inner {
      .carousel-caption {
        bottom: 50px;
        padding-bottom: 0;
      }
    }
  }
}