$divider-size: var(--wds-border-width-varied, 1px);
$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);
$selection-height: var(--wds-tabs-selection-height, 3px);
$padding-vertical-small: var(
  --wds-tabs-padding-vertical-small,
  var(--wds-space-200, 12px)
);
$padding-horizontal-small: var(
  --wds-tabs-padding-horizontal-small,
  var(--wds-space-200, 12px)
);
$padding-vertical-small-medium: var(
  --wds-tabs-padding-vertical-small-medium,
  var(--wds-space-200, 6px)
);
$padding-horizontal-small-medium: var(
  --wds-tabs-padding-horizontal-small-medium,
  var(--wds-space-200, 12px)
);
$padding-vertical-medium: var(
  --wds-tabs-padding-vertical-medium,
  var(--wds-space-300, 18px)
);
$padding-horizontal-medium: var(
  --wds-tabs-padding-horizontal-medium,
  var(--wds-space-300, 18px)
);
$item-gap-small: var(--wds-tabs-item-gap-small, var(--wds-space-100, 6px));
$item-gap-small-medium: var(
  --wds-tabs-item-gap-small-medium,
  var(--wds-space-100, 6px)
);
$item-gap-medium: var(--wds-tabs-item-gap-medium, var(--wds-space-100, 6px));
$item-fill-hover: var(
  --wds-tabs-item-fill-hover,
  var(--wds-color-black-100-transparent-0, transparent)
);
$item-fill-active: var(
  --wds-tabs-item-fill-active,
  var(--wds-color-black-100-transparent-0, transparent)
);
$gap-horizontal: var(--wds-tabs-gap-horizontal, var(--wds-space-0, 0));
$container-padding-horizontal: var(
  --wds-tabs-container-padding-horizontal,
  var(--wds-space-0, 0)
);
$border-radius: var(--wds-tabs-border-radius, var(--wds-border-radius-0, 0));
$label-font-weight: var(
  --wds-tabs-label-font-weight,
  var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400))
);
$label-font-weight-active: var(
  --wds-tabs-label-font-weight-active,
  var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400))
);
$label-fill: var(
  --wds-tabs-label-fill,
  var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
);
$label-fill-active: var(
  --wds-tabs-label-fill-active,
  var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
);
$label-fill-disabled: var(
  --wds-tabs-label-fill-disabled,
  var(--wds-color-text-disabled, #a8a6a5)
);
$label-line-height-small-inherited: var(
  --wds-tabs-label-line-height-small,
  var(
    --wds-font-line-height-body-small,
    var(--wsr-text-line-height-small, 18px)
  )
);
$label-line-height-small-medium-inherited: var(
  --wds-tabs-label-line-height-small-medium,
  var(
    --wds-font-line-height-body-small,
    var(--wsr-text-line-height-small, 18px)
  )
);
$label-font-size-small: var(
  --wds-tabs-label-font-size-small,
  var(--wds-font-size-body-small, 14px)
);
$label-line-height-small: var(
  --wds-tabs-label-line-height-small,
  var(--wds-font-line-height-body-small, 18px)
);
$label-font-size-small-medium: var(
  --wds-tabs-label-font-size-small-medium,
  var(--wds-font-size-body-small, 14px)
);
$label-line-height-small-medium: var(
  --wds-tabs-label-line-height-small-medium,
  var(--wds-font-line-height-body-small, 18px)
);
$label-font-size-medium: var(
  --wds-tabs-label-font-size-medium,
  var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px))
);
$label-line-height-medium: var(
  --wds-tabs-label-line-height-medium,
  var(
    --wds-font-line-height-body-medium,
    var(--wsr-text-line-height-medium, 24px)
  )
);
$selection-border: var(
  --wds-tabs-selection-border,
  linear-gradient(
    90deg,
    var(--wsr-color-B10, #116dff) 0%,
    var(--wsr-color-B10, #116dff) 20%,
    var(--wsr-color-B10, #116dff) 80%,
    var(--wsr-color-B10, #116dff) 100%
  )
);
$divider-gradient-border: var(
  --wds-divider-gradient-border,
  linear-gradient(
    90deg,
    var(--wsr-color-D60, #dfe5eb) 0%,
    var(--wsr-color-D60, #dfe5eb) 16%,
    var(--wsr-color-D60, #dfe5eb) 84%,
    var(--wsr-color-D60, #dfe5eb) 100%
  )
);

.tabs {
  display: flex;
  max-width: 100%;
  border-bottom: $divider-size solid transparent;

  &--size-medium {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-medium,
      var(--wsr-text-font-size-medium, 16px)
    );
    font-weight: var(
      --wds-font-weight-medium,
      var(--wsr-font-weight-medium, 530)
    );
    line-height: var(
      --wds-font-line-height-body-medium,
      var(--wsr-text-line-height-medium, 24px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  &--size-small {
    font-family: $font-family;
    font-weight: var(
      --wds-font-weight-medium,
      var(--wsr-font-weight-medium, 530)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    font-size: $label-font-size-small;
    line-height: $label-line-height-small;
  }

  &--size-small-medium {
    font-family: $font-family;
    font-weight: var(
      --wds-font-weight-medium,
      var(--wsr-font-weight-medium, 530)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    font-size: $label-font-size-small-medium;
    line-height: $label-line-height-small-medium;
  }

  &--scroll-on-overflow &__items-container {
    min-width: 0;
    width: fit-content;
  }

  &--horizontal-padding {
    padding-left: $container-padding-horizontal;
    padding-right: $container-padding-horizontal;
  }

  &__items-container {
    min-width: 628px;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: $gap-horizontal;
  }

  &__tab {
    position: relative;
    margin: 0 0 calc(#{$divider-size} * -1);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: $selection-height solid transparent;
    border-radius: $border-radius;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-color: transparent;
    background-color: transparent;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--scroll-on-overflow &__tab {
    display: inline-flex;
    overflow: initial;
    text-overflow: initial;
    min-width: max-content;
    border-bottom: calc(#{$selection-height} + #{$divider-size}) solid
      transparent;
  }

  @media (hover: hover) {
    &__tab:hover:not(#{&}__tab--active):not(#{&}__tab--disabled) {
      background-color: $item-fill-hover;
    }
  }

  &__tab--size-small {
    padding: $padding-vertical-small $padding-horizontal-small
      calc(#{$padding-vertical-small} - 2px);
    gap: $item-gap-small;
  }

  &__tab--size-small-medium {
    padding: $padding-vertical-small-medium $padding-horizontal-small-medium
      calc(#{$padding-vertical-small-medium} - 2px);
    gap: $item-gap-small-medium;
  }

  &__tab--size-medium {
    padding: $padding-vertical-medium $padding-horizontal-medium
      calc(#{$padding-vertical-medium} - 2px);
    gap: $item-gap-medium;
  }

  &__tab--alignment-start {
    justify-content: flex-start;
  }

  &__tab--alignment-center {
    justify-content: center;
  }

  &__tab--alignment-end {
    justify-content: flex-end;
  }

  &__tab#{&}__tab:focus-visible::before {
    inset: -2px;
  }

  &__tab#{&}__tab:focus-visible {
    outline-offset: 2px;
  }

  &__items-container--type-compact &__tab {
    padding-right: 0;
    padding-left: 0;
    margin-right: var(--wds-space-400, 30px);
    margin-left: var(--wds-space-400, 30px);
  }

  &__items-container--type-uniform-full &__tab {
    flex: 1;
  }

  &__items-container--type-compact-side &__tab {
    padding-left: 0;
    padding-right: 0;
  }

  &__items-container--type-compact-side &__tab:not(:first-child) {
    margin-left: $padding-horizontal-medium;
  }

  &__items-container--type-compact-side &__tab:not(:last-child) {
    margin-right: $padding-horizontal-medium;
  }

  &__tab#{&}__tab &__tab-text {
    color: $label-fill;
    --wds-font-weight-regular: #{$label-font-weight};
  }

  & &__tab--size-small &__tab-text {
    --wds-font-line-height-body-small: #{$label-line-height-small-inherited};
  }

  & &__tab--size-small-medium &__tab-text {
    --wds-font-line-height-body-small: #{$label-line-height-small-medium-inherited};
  }

  &#{&} &__tab--size-small &__tab-text {
    font-size: $label-font-size-small;
    line-height: $label-line-height-small;
  }

  &#{&} &__tab--size-small-medium &__tab-text {
    font-size: $label-font-size-small-medium;
    line-height: $label-line-height-small-medium;
  }

  &#{&} &__tab--size-medium &__tab-text {
    font-size: $label-font-size-medium;
    line-height: $label-line-height-medium;
  }

  & &__tab--active &__tab-text {
    --wds-font-weight-regular: #{$label-font-weight-active};
  }

  @media (hover: hover) {
    &__tab#{&}__tab:hover :is(#{&}__tab-text, #{&}__affix) {
      color: $label-fill-active;
    }
  }

  &__tab#{&}__tab--active :is(#{&}__tab-text, #{&}__affix) {
    color: $label-fill-active;
  }

  &--show-divider {
    border-image-source: $divider-gradient-border;
    border-image-slice: 1;
  }

  &__tab--active {
    border-image-source: $selection-border;
    border-image-slice: 1;
    background: $item-fill-active;
  }

  &__side-content {
    max-width: 314px;
    overflow: hidden;
    margin-left: 24px;
    flex-shrink: 0;
  }

  &__affix {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  &__tab--size-small &__affix {
    max-height: 18px;
  }

  &__tab--size-small-medium &__affix {
    max-height: 18px;
  }

  &__tab--size-medium &__affix {
    max-height: 24px;
  }

  &__tab#{&}__tab--disabled &__tab-text,
  &__tab#{&}__tab--disabled &__affix {
    color: $label-fill-disabled;
  }

  &__tab--disabled {
    cursor: default;
  }

  @media (hover: hover) {
    &__tab--disabled:hover {
      background-color: transparent;
    }

    &__tab#{&}__tab--disabled:hover :is(#{&}__tab-text, #{&}__affix) {
      color: $label-fill-disabled;
    }
  }
}