$padding-vertical-tiny: var(
  --wds-statistics-widget-padding-vertical-tiny,
  var(--wds-space-200, 12px)
);
$padding-vertical-large: var(
  --wds-statistics-widget-padding-vertical-large,
  var(--wds-space-300, 18px)
);
$padding-horizontal-tiny: var(
  --wds-statistics-widget-padding-horizontal-tiny,
  var(--wds-space-400, 24px)
);
$padding-horizontal-large: var(
  --wds-statistics-widget-padding-horizontal-large,
  var(--wds-space-400, 24px)
);

.statistics-widget {
  display: flex;
  text-align: center;

  &__item {
    position: relative;
    display: flex;
    overflow: hidden;
    flex: 1;
    border-radius: var(--wds-border-radius-surface-overlay, 8px);
    flex-direction: column;
    box-sizing: border-box;
    white-space: nowrap;
    background-color: var(--wds-color-fill-surface-default, white);
    transition: background-color 0.3s ease-in-out;
  }

  &__item--size-tiny {
    padding: $padding-vertical-tiny $padding-horizontal-tiny;
  }

  &__item--size-large {
    padding: $padding-vertical-large $padding-horizontal-large;
  }

  &__item--clickable {
    cursor: pointer;
  }

  &__item:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &__item--align-items-start {
    text-align: start;
  }

  &__item--align-items-center {
    text-align: center;
  }

  &__item--align-items-end {
    text-align: end;
  }

  @media (hover: hover) {
    &__item--clickable:hover {
      background-color: var(
        --wds-color-fill-dark-secondary,
        var(--wsr-color-B50, #e7f0ff)
      );
    }
  }

  &__item--size-large:not(:first-child)::before {
    top: $padding-vertical-large;
    bottom: $padding-vertical-large;
  }

  &__item--size-tiny:not(:first-child)::before {
    top: $padding-vertical-tiny;
    bottom: $padding-vertical-tiny;
  }

  &__item:not(:first-child)::before {
    position: absolute;
    left: 0;
    width: var(--wds-border-width-varied, 1px);
    content: '';
    background-color: var(
      --wds-divider-fill-light,
      var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb))
    );
    transition: 0.3s top, bottom ease-in-out;
  }

  @media (hover: hover) {
    &__item--clickable:not(:first-child):hover::before,
    &__item--clickable:hover + &__item::before {
      top: 0;
      bottom: 0;
    }
  }

  &__loader {
    display: flex;
  }

  &__loader--size-tiny {
    padding-bottom: 6px;
  }

  &__loader--size-large {
    padding-bottom: 12px;
  }

  &__loader--align-items-start {
    justify-content: flex-start;
    align-items: flex-start;
  }

  &__loader--align-items-center {
    justify-content: center;
    align-items: center;
  }

  &__loader--align-items-end {
    justify-content: flex-end;
    align-items: flex-end;
  }

  // repeated class required: __value is a Text root; without it Text's own state selectors outweigh this rule
  &__item#{&}__item--size-tiny &__value#{&}__value {
    font-family: var(
      --wds-statistics-widget-value-font-family-tiny,
      var(
        --wds-font-family-default,
        var(
          --wsr-font-family,
          Madefor,
          'Helvetica Neue',
          Helvetica,
          Arial,
          'メイリオ',
          'meiryo',
          'ヒラギノ角ゴ pro w3',
          'hiragino kaku gothic pro',
          sans-serif
        )
      )
    );
    font-size: var(
      --wds-statistics-widget-value-font-size-tiny,
      var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px))
    );
    font-weight: var(
      --wds-statistics-widget-value-font-weight-tiny,
      var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700))
    );
    line-height: var(
      --wds-statistics-widget-value-font-line-height-tiny,
      var(
        --wds-font-line-height-body-medium,
        var(--wsr-text-line-height-medium, 24px)
      )
    );
  }

  // repeated class required: __value is a Text root; without it Text's own state selectors outweigh this rule
  &__item#{&}__item--size-tiny &__value#{&}__value,
  &__item#{&}__item--size-large &__value#{&}__value {
    letter-spacing: var(
      --wds-statistics-widget-value-font-letter-spacing,
      var(--wds-font-letter-spacing-0, unset)
    );
  }

  &__description {
    display: flex;
    gap: var(--wds-statistics-widget-description-info-gap, 6px);
    min-width: 0;
    overflow: hidden;
  }

  &__description--align-items-start {
    justify-content: flex-start;
    align-items: flex-start;
  }

  &__description--align-items-center {
    justify-content: center;
    align-items: center;
  }

  &__description--align-items-end {
    justify-content: flex-end;
    align-items: flex-end;
  }

  // repeated class required: __description-text is a Text root; without it this no longer outranks Text's own state selectors
  &__item &__description &__description-text#{&}__description-text {
    font-size: var(
      --wds-statistics-widget-description-font-size,
      var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px))
    );
    line-height: var(
      --wds-statistics-widget-description-font-line-height,
      var(
        --wds-font-line-height-body-small,
        var(--wsr-text-line-height-small, 18px)
      )
    );
  }

  &__percentage {
    margin-top: var(--wds-statistics-widget-trend-space-top, 5px);
  }
}