@use "sass:map" as sass-map;
@use "sass:math";
@use "../../../styles/tokens/base";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/breakpoint";
@use "../../Button/styles/mixins" as button-mixins;
@use "../../../styles/typography/config" as typography-config;
@use "../../../styles/typography/mixins" as typography-mixins;
@use "../../Container/styles/config" as container-config;
@use "./config";

@mixin base {
  margin: 0 auto;
  position: relative;
  background: var(--color-surface-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

@mixin viewport-wrapper {
  position: relative;
}

@mixin viewport {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  &.is-draggable {
    user-select: none;
    cursor: -webkit-grab;
    cursor: grab;
  }

  &.is-dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
}

@mixin track {
  transform: translateZ(0);
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 1;
}

@mixin tabs-base {
  display: flex;
  flex: 1;
  gap: 0;
  overflow-x: auto;
  overflow-y: inherit;
  scrollbar-width: none; // Hide scrollbar for Firefox
  -ms-overflow-style: none; // Hide scrollbar for IE/Edge
  position: relative;

  // Hide tabs on mobile (md and down), show pagination instead
  @include breakpoint.get("md", "down") {
    display: none;
  }

  // Hide scrollbar for WebKit browsers
  &::-webkit-scrollbar {
    display: none;
  }

  &::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: convert.to-rem(56px);
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--color-surface-primary), transparent 50%) 20%,
      var(--color-surface-primary) 100%
    );
    pointer-events: none;
    z-index: 1;
    flex-shrink: 0;
    margin-left: auto;
  }
}

@mixin tab-base($colors: config.$tab-colors) {
  position: relative;
  padding: convert.to-rem(25px) convert.to-rem(15px);
  border: none;
  border-top: 4px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--color-text-default);
  text-align: center;
  flex: 1;
  white-space: nowrap;
  font-weight: 700;
  font-size: convert.to-rem(14px);
  line-height: convert.to-rem(16px);

  &.is-active,
  &[aria-selected="true"] {
    border-top-color: var(--color-border-accent);
  }

  &:hover:not(.is-active):not([aria-selected="true"]) {
    color: var(--color-text-accent);
  }
}

@mixin navigation-base {
  display: flex;
  align-items: center;
  gap: convert.to-rem(10px);
}

@mixin slide-base {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 0 0 100%;
  user-select: none;
  position: relative;
  overflow: hidden;

  @each $breakpoint, $height in config.$slide-min-height {
    @include breakpoint.get($breakpoint) {
      min-height: $height;
    }
  }
}

@mixin slide-container {
  display: flex;
  flex-direction: row;
  width: 100%;

  @include breakpoint.get("md", "down") {
    flex-direction: column;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@mixin slide-content {
  flex: 0 0 50%;
  display: flex;
  z-index: 2;
  flex-direction: column;
  align-items: flex-start;
  padding: convert.to-rem(60px) convert.to-rem(80px) convert.to-rem(60px) 0;

  > *:last-child {
    margin-bottom: 0;
  }

  @include breakpoint.get("md", "down") {
    flex: initial;
  }

  @include breakpoint.get("md", "down") {
    padding: convert.to-rem(30px) container-config.$container-padding;
  }
}

@mixin slide-image {
  flex: 0 0 50%;
  display: flex;
  margin-bottom: 0 !important;
  object-fit: contain;
  object-position: center;
  width: 50%;

  @include breakpoint.get("md", "down") {
    flex: 1;
    width: 100%;
  }
}

@mixin pagination-base {
  user-select: none;
  display: none; // Hidden by default on desktop
  flex-wrap: wrap;
  justify-content: center;
  padding: convert.to-rem(20px) 0;

  // Show pagination on mobile (md and down)
  @include breakpoint.get("md", "down") {
    display: flex;
  }

  @include breakpoint.get("md", "down") {
    justify-content: flex-start;
  }
}

@mixin pagination-item-base {
  background: none;
  user-select: none;
  display: block;
  cursor: pointer;
  border-radius: 100%;
  width: convert.to-rem(10px);
  height: convert.to-rem(10px);
  margin: convert.to-rem(8px);
  background-color: var(--color-surface-contrast);

  &:hover {
    background-color: var(--color-icon-brand);
  }

  &.is-active {
    background-color: transparent;
  }
}

@mixin pagination-svg() {
  position: relative;
  display: none;
  left: -1px;
  top: -1px;
  // This transform is a workaround due to Safari not supporting negative values for stroke-dashoffset.
  // We're rotating the SVG so that the line starts to animate from the top (12o'clock).
  // The vertical flip is to make the line animate clockwise.
  transform: rotate(-90deg) scale(1, -1);

  .is-playing .is-active > & {
    display: block;
  }

  .is-paused .is-active > & {
    display: block;

    circle {
      stroke: var(--color-border-accent);
      stroke-width: 2px;
      stroke-dasharray: config.$animated-dot-circumference;
      stroke-dashoffset: 0;
      fill: none;
      animation: none;
    }
  }

  // Show SVG ring for active state when no autoplay
  .carousel-hero:not(.is-playing):not(.is-paused) .is-active > & {
    display: block;

    circle {
      stroke: var(--color-border-accent);
      stroke-width: 2px;
      stroke-dasharray: config.$animated-dot-circumference;
      stroke-dashoffset: 0;
      fill: none;
      animation: none;
    }
  }
}

@mixin pagination-circle() {
  stroke-width: 2px;
  stroke: var(--color-border-accent);
  stroke-dasharray: config.$animated-dot-circumference;
  stroke-dashoffset: config.$animated-dot-circumference;
  animation-name: countdown;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: reverse;
  fill: none;
}