@import "~bootstrap/scss/carousel";

.carousel-control-next,
.carousel-control-prev { cursor: pointer; }

.carousel-control-prev-icon {
  width: 1.75rem;
  height: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 96 96'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23fff' d='M82,48 C82,29.2223185 66.7776815,14 48,14 C29.2223185,14 14,29.2223185 14,48 C14,66.7776815 29.2223185,82 48,82 C66.7776815,82 82,66.7776815 82,48 Z' opacity='.15'/%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M11,48 C11,27.5654643 27.5654643,11 48,11 C68.4345357,11 85,27.5654643 85,48 C85,68.4345357 68.4345357,85 48,85 C27.5654643,85 11,68.4345357 11,48 Z M78,48 C78,31.4314575 64.5685425,18 48,18 C31.4314575,18 18,31.4314575 18,48 C18,64.5685425 31.4314575,78 48,78 C64.5685425,78 78,64.5685425 78,48 Z M42.5343136,48 L56.9848649,60.7504864 C58.2272369,61.8466971 58.3457242,63.7424929 57.2495136,64.9848649 C56.1533029,66.2272369 54.2575071,66.3457242 53.0151351,65.2495136 L33.4656864,48 L53.0151351,30.7504864 C54.2575071,29.6542758 56.1533029,29.7727631 57.2495136,31.0151351 C58.3457242,32.2575071 58.2272369,34.1533029 56.9848649,35.2495136 L42.5343136,48 Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.carousel-control-next-icon {
  width: 1.75rem;
  height: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 96 96'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23fff' d='M82,48 C82,29.2223185 66.7776815,14 48,14 C29.2223185,14 14,29.2223185 14,48 C14,66.7776815 29.2223185,82 48,82 C66.7776815,82 82,66.7776815 82,48 Z' opacity='.15'/%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M11,48 C11,27.5654643 27.5654643,11 48,11 C68.4345357,11 85,27.5654643 85,48 C85,68.4345357 68.4345357,85 48,85 C27.5654643,85 11,68.4345357 11,48 Z M78,48 C78,31.4314575 64.5685425,18 48,18 C31.4314575,18 18,31.4314575 18,48 C18,64.5685425 31.4314575,78 48,78 C64.5685425,78 78,64.5685425 78,48 Z M53.4656864,48 L39.0151351,35.2495136 C37.7727631,34.1533029 37.6542758,32.2575071 38.7504864,31.0151351 C39.8466971,29.7727631 41.7424929,29.6542758 42.9848649,30.7504864 L62.5343136,48 L42.9848649,65.2495136 C41.7424929,66.3457242 39.8466971,66.2272369 38.7504864,64.9848649 C37.6542758,63.7424929 37.7727631,61.8466971 39.0151351,60.7504864 L53.4656864,48 Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.carousel-indicators li {
  width: 0.5rem;
  height: 0.5rem;
  border-top: none;
  border-bottom: none;
  border-radius:  0.25rem;
}

.x-slider {
  @extend .w-100,
          .overflow-hidden;
  max-height: 37.5rem;
  max-width: 50rem;
}

.x-slides {
  @extend .d-flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.x-slides::-webkit-scrollbar {
  @include size(0.5rem);
}

.x-slides::-webkit-scrollbar-thumb {
  @extend .bg-info-transparent;
  @include border-radius($input-border-radius-lg);
}

.x-slides::-webkit-scrollbar-track {
  @extend .bg-transparent;
}

.x-slider-item {
  @extend .d-flex,
          .w-100,
          .h-100,
          .position-relative,
          .justify-content-center,
          .align-items-center,
          .flex-shrink-0;
  transform-origin: center center;
  transition: transform 0.5s;

  &.d-none {
    @extend .d-none;
  }
}

.x-slider > a {
  @extend .d-inline-flex,
          .position-relative,
          .justify-content-center,
          .align-items-center;
}