$divider-standard: var(--wsr-color-B30, #a8caff);
$divider-neutral: var(
  --wds-color-border-dark-secondary,
  var(--wsr-color-D60, #dfe5eb)
);

.table-list-header {
  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
    )
  );
  font-size: var(
    --wds-font-size-body-small,
    var(--wsr-text-font-size-small, 14px)
  );
  font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
  line-height: var(
    --wds-font-line-height-body-small,
    var(--wsr-text-line-height-small, 18px)
  );
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
  color: var(
    --wds-table-list-header-text-fill,
    var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
  );
  font-weight: var(
    --wds-table-list-header-text-weight,
    var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530))
  );
  display: flex;
  flex-direction: row;
  min-height: var(--wds-table-list-header-min-height, var(--wds-space-700, 42px));
  padding-inline: var(--wds-table-list-header-padding-inline, var(--wds-space-0, 0px));

  &#{&}--skin-standard {
    background-color: var(
      --wds-table-list-header-fill,
      var(--wds-color-fill-surface-standard, var(--wsr-color-B40, #d6e6fe))
    );
    box-shadow: inset 0 1px 0 0
        var(
          --wds-table-list-header-divider-fill-top,
          var(--wds-color-border-standard-primary, #{$divider-standard})
        ),
      inset 0 -1px 0 0
        var(
          --wds-table-list-header-divider-fill-bottom,
          var(--wds-color-border-standard-primary, #{$divider-standard})
        );
  }

  &#{&}--skin-neutral {
    background-color: var(
      --wds-color-fill-surface-neutral,
      var(--wsr-color-D75, #f7f8f8)
    );
    box-shadow: inset 0 1px 0 0 $divider-neutral,
      inset 0 -1px 0 0 $divider-neutral;
  }

  &__checkbox-space {
    flex-shrink: 0;
    width: calc(
      var(
        --wds-table-list-header-checkbox-padding-left,
        var(--wds-space-100, 6px)
      ) +
        var(--wds-checkbox-size, 16px) +
        var(
          --wds-table-list-header-checkbox-padding-right,
          var(--wds-space-200, 12px)
        )
    );
  }

  &__options-container {
    display: grid;
    width: 100%;
    align-items: center;
  }

  &__option {
    display: flex;
    margin-left: var(
      --wds-table-list-header-option-margin-inline,
      var(--wds-space-100, 6px)
    );
    align-items: center;
    gap: 6px;
    height: 24px;
    padding-top: var(--wds-space-200, 9px);
    padding-bottom: var(--wds-space-200, 9px);

    &:not(:last-child) {
      margin-right: var(
        --wds-table-list-header-option-gap,
        var(--wds-space-300, 18px)
      );
    }

    &:last-child {
      margin-right: var(
        --wds-table-list-header-option-margin-inline,
        var(--wds-space-100, 6px)
      );
    }

    &#{&}--position-left {
      justify-self: start;
    }

    &#{&}--position-center {
      justify-self: center;
    }

    &#{&}--position-right {
      justify-self: end;
    }

    &#{&}--sortable {
      cursor: pointer;
    }
  }

  &__sort-arrow {
    color: var(
      --wds-table-list-header-icon-fill,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
    height: var(--wds-table-list-header-icon-size, var(--wds-space-200, 12px));
  }
}