$max-width: var(--wds-internal-card-folder-tabs-max-width);
$padding-vertical: var(
  --wds-card-tab-padding-vertical-medium,
  var(--wds-space-300, 18px)
);
$padding-horizontal: var(
  --wds-card-tab-padding-horizontal-medium,
  var(--wds-space-300, 18px)
);
$radius: var(--wds-border-radius-surface-default, 8px);
$border-fill: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb));
$black-10: var(
  --wds-color-black-100-transparent-10,
  var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
);
$black-5: var(
  --wds-color-black-100-transparent-5,
  var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05))
);
$text-primary: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
$tab-fill: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff));
$mobile-fade-width: 60px;
$mobile-fade-ramp: 16px;
$mobile-fade-duration: 150ms;
$mobile-min-peek: 44px;
$mobile-snap-release-delay: 500ms;

.card-folder-tabs {
  --wds-internal-card-folder-tabs-max-width: 138px;

  &--fluid {
    --wds-internal-card-folder-tabs-max-width: 100%;
  }

  &__header-wrapper {
    display: flex;
    margin-inline-end: 30px;
  }

  &--fluid &__header-wrapper {
    margin-inline-end: 0;
  }

  &__button {
    display: flex;
    flex: 1 1 66px;
    justify-content: center;
    align-items: center;
    padding: $padding-vertical $padding-horizontal;
    min-width: 66px;
    max-width: $max-width;
    border-radius: $radius $radius 0 0;
    border: 0;
    background-color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    margin: 0;
    box-shadow:
      inset -1px 0 0 $border-fill,
      inset 0 -1px 0 $black-10;
  }

  :global([dir='rtl']) &__button {
    border-width: 0 0 1px 1px;
  }

  &__button--selected#{&}__button--selected &__button-text {
    color: $text-primary;
  }

  @media (hover: hover) {
    &__button:hover {
      cursor: pointer;
    }

    &__button:hover#{&}__button--disabled,
    &__button:hover#{&}__button--selected {
      cursor: default;
    }

    &__button:hover:not(#{&}__button--disabled) &__button-text {
      color: $text-primary;
    }
  }

  &__button--disabled#{&}__button--disabled &__button-text {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
  }

  &__button--selected {
    margin-bottom: -2px;
    border-width: 0 1px 2px 0;
    border-bottom: solid transparent;
    z-index: 1;
    box-shadow:
      0 0 6px $black-10,
      0 0 12px $black-5;
  }

  &__button--selected:first-child {
    box-shadow:
      3px 0 3px $black-10,
      3px 0 6px $black-5;
  }

  &__button--selected:last-child {
    box-shadow:
      -3px 0 3px $black-10,
      -3px 0 6px $black-5;
  }

  &__button--after-selected {
    box-shadow:
      inset 42px 4px 24px -24px $black-5,
      inset -1px 0 0 $border-fill,
      inset 0 -1px 0 $black-10;
  }

  &__button--before-selected {
    box-shadow:
      inset -42px 4px 24px -24px $black-5,
      inset 0 -1px 0 $black-10;
  }

  :global([dir='rtl']) &__button {
    box-shadow:
      inset 1px 0 0 $border-fill,
      inset 0 -1px 0 $black-10;
  }

  :global([dir='rtl']) &__button--selected {
    border-width: 0 0 2px 1px;
    box-shadow:
      0 0 6px $black-10,
      0 0 12px $black-5;
  }

  :global([dir='rtl']) &__button--selected:first-child {
    box-shadow:
      -3px 0 3px $black-10,
      -3px 0 6px $black-5;
  }

  :global([dir='rtl']) &__button--selected:last-child {
    box-shadow:
      3px 0 3px $black-10,
      3px 0 6px $black-5;
  }

  :global([dir='rtl']) &__button--after-selected {
    box-shadow:
      inset -42px 4px 24px -24px $black-5,
      inset 1px 0 0 $border-fill,
      inset 0 -1px 0 $black-10;
  }

  :global([dir='rtl']) &__button--before-selected {
    box-shadow:
      inset 42px 4px 24px -24px $black-5,
      inset 0 -1px 0 $black-10;
  }

  &__tab-content-wrapper {
    background-color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border-radius: 0 $radius $radius $radius;
    z-index: 1;
    position: relative;
  }

  &--fluid &__tab-content-wrapper {
    border-radius: 0 0 $radius $radius;
  }

  :global([dir='rtl']) &__tab-content-wrapper {
    border-radius: $radius 0 $radius $radius;
  }

  &--mobile {
    min-width: 0;
    max-width: 100%;
  }

  &--mobile &__header-wrapper {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline-end: 0;
    /* stylelint-disable plugin/use-baseline */
    scrollbar-width: none;
    container-type: scroll-state;
    /* stylelint-enable plugin/use-baseline */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    animation: card-folder-tabs-mount $mobile-snap-release-delay;
  }

  &--mobile &__header-wrapper::-webkit-scrollbar {
    display: none;
  }

  &--mobile &__button {
    flex: 0 0 auto;
    max-width: none;
  }

  &--mobile &__button-text {
    white-space: nowrap;
  }

  &--mobile &__button--selected:first-child,
  &--mobile &__button--before-selected::after {
    scroll-snap-align: start;
    animation: card-folder-tabs-release-snap 1ms $mobile-snap-release-delay
      forwards;
  }

  &--mobile &__button--before-selected {
    position: relative;
  }

  &--mobile &__button--before-selected::after {
    content: '';
    position: absolute;
    inset-block: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    inset-inline: round(down, min(50%, 100% - #{$mobile-min-peek}), 1px) 0;
    pointer-events: none;
  }

  &--mobile &__header-wrapper::before,
  &--mobile &__header-wrapper::after {
    content: '';
    position: sticky;
    flex: 0 0 $mobile-fade-width;
    align-self: stretch;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity $mobile-fade-duration ease-out;
  }

  &--mobile &__header-wrapper::before {
    inset-inline-start: 0;
    margin-inline-end: -$mobile-fade-width;
    background: linear-gradient(to right, $tab-fill, transparent);
  }

  &--mobile &__header-wrapper::after {
    inset-inline-end: 0;
    margin-inline-start: -$mobile-fade-width;
    background: linear-gradient(to left, $tab-fill, transparent);
  }

  :global([dir='rtl']) &--mobile &__header-wrapper::before {
    background: linear-gradient(to left, $tab-fill, transparent);
  }

  :global([dir='rtl']) &--mobile &__header-wrapper::after {
    background: linear-gradient(to right, $tab-fill, transparent);
  }

  /* stylelint-disable plugin/use-baseline */
  @container scroll-state(scrollable: inline-start) {
    &--mobile &__header-wrapper::before {
      opacity: 1;
    }
  }

  @container scroll-state(scrollable: inline-end) {
    &--mobile &__header-wrapper::after {
      opacity: 1;
    }
  }

  @supports (animation-timeline: scroll()) and
    (not (container-type: scroll-state)) {
    &--mobile &__header-wrapper::before,
    &--mobile &__header-wrapper::after {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(nearest inline);
    }

    &--mobile &__header-wrapper::before {
      animation-name: card-folder-tabs-fade-in;
      animation-range: 1px $mobile-fade-ramp;
    }

    &--mobile &__header-wrapper::after {
      animation-name: card-folder-tabs-fade-out;
      animation-range: calc(100% - #{$mobile-fade-ramp}) calc(100% - 1px);
    }
  }

  @media (prefers-reduced-motion) {
    &--mobile &__header-wrapper {
      scroll-behavior: auto;
    }

    &--mobile &__header-wrapper::before,
    &--mobile &__header-wrapper::after {
      transition: none;
    }

    &--mobile &__header-wrapper::before {
      animation-range: 1px 2px;
    }

    &--mobile &__header-wrapper::after {
      animation-range: calc(100% - 2px) calc(100% - 1px);
    }
  }
  /* stylelint-enable plugin/use-baseline */

  &--mobile &__tab-content-wrapper {
    border-radius: 0 0 $radius $radius;
  }
}

@keyframes card-folder-tabs-mount {
  from,
  to {
    scroll-behavior: auto;
  }
}

@keyframes card-folder-tabs-release-snap {
  to {
    scroll-snap-align: none;
  }
}

@keyframes card-folder-tabs-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes card-folder-tabs-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}