@use "@infineon/design-system-tokens/dist/tokens";

.carousel-item {
  img {
    width: 100%;
  }
}

.carousel-control-prev, 
.carousel-control-next {
  width: tokens.$sizing-l;
  height: tokens.$sizing-l;
  border-radius: 100%;
  top: 50%;
  transform: translate(0, -50%);
  background-color: tokens.$color-bg-white;
  opacity: 1;

  @include media-breakpoint-up(lg) {
    width: tokens.$sizing-xl;
    height: tokens.$sizing-xl;
  }

  &:hover {
    background-color: tokens.$color-gray-300;
  }

  &:active {
    background-color: tokens.$color-gray-100;
  }
}

.carousel-control-prev {
  left: tokens.$spacing-s;

  @include media-breakpoint-up(lg) {
    left: tokens.$spacing-l;
  }
}

.carousel-control-next {
  right: tokens.$spacing-s;

  @include media-breakpoint-up(lg) {
    right: tokens.$spacing-l;
  }
}

.carousel-indicators [data-bs-target] {
  flex: 0 1 auto;
  background-color: tokens.$color-gray-100;

  &.active {
    background-color: tokens.$color-default-500;
  }

  @include media-breakpoint-up(lg) {
    height: 4px;
    margin-right: 8px;
    margin-left: 8px;
  }
}

.ifx__carousel-caption {
  margin-top: tokens.$spacing-s;
  font-size: tokens.$font-size-s;
}




@media (min-width: 480px) {
  .mobile-slide-indicator {
    width: 45px;
  }
}

.thumbnail__img {
  cursor: pointer;
  border: 2px solid transparent;
}

.act {
  // box-sizing: border-box;
  border: 2px solid #378375;
  border-radius: 4px;
}