@use '../../../../node_modules/swiper/swiper-bundle.min.css';
@use '../../../../node_modules/@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';
@use '../../../../node_modules/@kyndryl-design-system/shidoka-foundation/scss/mixins/elevation.scss';

:root {
  --swiper-navigation-size: 56px;
  --swiper-fractional-height: 54px;
  --swiper-bullets-height: 32px;
  --swiper-tabs-height: 64px;
  --swiper-scrollbar-size: 8px;
  --swiper-scrollbar-drag-bg-color: var(--kd-color-background-accent-tertiary);
  --swiper-scrollbar-bg-color: var(--kd-color-background-container-soft);
  --swiper-scrollbar-border-radius: 8px;

  @media (min-width: 82rem) {
    --swiper-navigation-size: 64px;
  }
}

.swiper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.swiper-full-bleed {
  margin: 0 calc(var(--kd-page-gutter) * -1);
}

.swiper-slide {
  box-sizing: border-box;
  transition: opacity 250ms ease-in-out;

  @media (min-width: 42rem) {
    max-width: calc(100% - var(--swiper-navigation-size) * 2 - 42px * 2);
  }

  &.off-screen {
    opacity: 0.5;
    pointer-events: none;
  }
}

.swiper-pagination {
  position: static;
  display: flex;
  justify-content: safe center;
  gap: 16px;

  &.tabs {
    @media (min-width: 42rem) {
      order: -1;
      gap: 24px;
      overflow-x: auto;
    }
  }

  kyn-link,
  a {
    margin-left: 40px;
    margin-right: 4px;
  }
}

.swiper-pagination-bullet {
  border: 1px solid var(--kd-color-background-accent-tertiary);
  background: none;
  opacity: initial;
  width: 16px;
  height: 16px;

  &-active {
    background: var(--kd-color-background-container-subtle);
  }

  .tabs & {
    @media (min-width: 42rem) {
      width: auto;
      height: auto;
      border-radius: initial;
      border: none;
      padding: 12px 14px;
      white-space: nowrap;
      outline-offset: -2px;
      border-radius: 4px 4px 0px 0px;
      transition: border-color 150ms ease-out, background-color 150ms ease-out,
        color 150ms ease-out, outline-color 150ms ease-out;
      color: var(--kd-color-text-level-primary);
      border-bottom: 1px solid transparent;
      outline: 2px solid transparent;

      &:hover {
        background: var(--kd-color-background-button-secondary-state-hover);
        border-color: var(--kd-color-border-button-primary-state-hover);
        color: var(--kd-color-text-level-primary);
      }

      &:active {
        background: var(--kd-color-background-button-primary-state-pressed);
        border-color: var(--kd-color-border-button-primary-state-hover);
        color: var(--kd-color-text-level-light);
      }

      &:focus-visible {
        outline-color: var(--kd-color-border-variants-focus);
      }

      &-active {
        border-color: var(--kd-color-border-button-primary-state-default);
        color: var(--kd-color-text-link-level-default);
        background: none;
        border-bottom-width: 2px;
        font-weight: var(--kd-font-weight-medium);
      }
    }

    .tab-text {
      display: none;

      @media (min-width: 42rem) {
        display: inline;
      }
    }
  }
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0;
}

.swiper-pagination-fraction {
  @include typography.type-ui-02;
  justify-content: end;
  gap: 2px;
  color: var(--kd-color-text-level-secondary);

  .swiper-full-bleed & {
    padding-right: var(--kd-page-gutter);
  }
}

.pagination-with-link {
  @include typography.type-ui-02;
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding-right: 4px;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
  border-radius: 50%;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  margin-top: calc(
    0px - var(--swiper-navigation-size) / 2 - var(--swiper-fractional-height) /
      2
  );
  color: var(--kd-color-icon-primary);
  background: var(--kd-color-icon-inverse);
  outline: 2px solid transparent;
  transition: outline-color 150ms ease-out, color 150ms ease-out,
    box-shadow 150ms ease-out;

  .swiper-pagination-bullets ~ & {
    margin-top: calc(
      0px - var(--swiper-navigation-size) / 2 - var(--swiper-bullets-height) / 2
    );
  }

  .swiper-pagination-bullets.tabs ~ & {
    margin-top: calc(
      0px - var(--swiper-navigation-size) / 2 + var(--swiper-tabs-height) / 2
    );
  }

  @media (min-width: 42rem) {
    display: flex;
  }

  &:focus-visible {
    outline-color: var(--kd-color-border-ui-hover);
  }

  & svg {
    width: initial;
    height: initial;
  }

  &:hover {
    color: var(--kd-color-icon-secondary);
    @include elevation.shadow(3);
  }

  &:after {
    display: none;
  }

  &.swiper-button-disabled {
    color: var(--kd-color-icon-disabled);
  }

  @include elevation.shadow(2);
}

.swiper-button-next svg {
  transform: rotate(180deg);
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: static;
  width: 100%;

  .swiper-full-bleed & {
    width: calc(100% - var(--kd-page-gutter) * 2);
    margin-left: var(--kd-page-gutter);
  }
}