/*
 * Local, so a skin parameterises the border and background in one place. Named
 * in the `--wds-` namespace because the bundler versions every other authored
 * custom property.
 */
$color-bg: --wds-internal-section-header-color-bg;
$color-border: --wds-internal-section-header-color-border;

$standard-fill: var(
  --wds-section-header-fill-standard,
  var(--wds-color-fill-surface-standard, var(--wsr-color-B40, #d6e6fe))
);
$standard-border: var(
  --wds-color-border-standard-primary,
  var(--wsr-color-B30, #a8caff)
);

$border-width: var(--wds-border-width-varied, 1px);

$font-family: Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ",
  "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;


.section-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 36px;
  background-color: var(#{$color-bg});
  justify-content: space-between;

  /* Skins */
  &--skin-standard {
    #{$color-bg}: #{$standard-fill};
    #{$color-border}: #{$standard-border};
  }

  &--skin-neutral {
    /* Hardcoded fallbacks to avoid same color as backdrop in newBranding theme */
    #{$color-bg}: var(
      --wds-section-header-fill-neutral, var(--wds-color-fill-surface-neutral, var(--wsr-section-header-color-bg, #f7f8f8)));
    #{$color-border}: var(
      --wds-color-border-dark-secondary,
      var(--wsr-section-header-color-border, #dfe5eb)
    );
  }

  &--skin-light {
    #{$color-bg}: var(
      --wds-section-header-fill-light,
      var(--wds-color-fill-surface-default, var(--wsr-color-D80, #ffffff))
    );
    #{$color-border}: var(
      --wds-section-header-border-light,
      var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb))
    );
  }

  &--skin-bold {
    #{$color-bg}: #{$standard-fill};
    #{$color-border}: #{$standard-border};
  }

  /* Dividers */
  &--divider-default {
    border-top: #{$border-width} var(#{$color-border}) solid;
    border-bottom: #{$border-width} var(#{$color-border}) solid;
  }

  &--divider-top {
    border-top: #{$border-width} var(#{$color-border}) solid;
  }

  &--divider-bottom {
    border-bottom: #{$border-width} var(#{$color-border}) solid;
  }

  /*
   * `left` / `right` were authored under "Title" / "Suffix" headings but land on
   * the root, which is never positioned, so they are inert. Kept here verbatim,
   * merged per padding value: the three original blocks shared this selector and
   * set disjoint properties. The `padding` shorthand has to stay ahead of the
   * size and bold rules below, which reset padding-top / padding-bottom.
   */
  &--horizontal-padding-large {
    padding: 0 var(--wds-list-item-padding-horizontal-large, var(--wds-space-400, 24px));
    left: var(--wds-list-item-padding-horizontal-large, var(--wds-space-400, 24px));
    right: var(--wds-list-item-padding-horizontal-large, var(--wds-space-400, 24px));
  }

  &--horizontal-padding-medium {
    padding: 0 var(--wds-list-item-padding-horizontal-medium, var(--wds-space-300, 18px));
    left: var(--wds-list-item-padding-horizontal-medium, var(--wds-space-300, 18px));
    right: var(--wds-list-item-padding-horizontal-medium, var(--wds-space-300, 18px));
  }

  &--horizontal-padding-small {
    padding: 0 var(--wds-list-item-padding-horizontal-small, var(--wds-space-250, 15px));
    left: var(--wds-list-item-padding-horizontal-small, var(--wds-space-250, 15px));
    right: var(--wds-list-item-padding-horizontal-small, var(--wds-space-250, 15px));
  }

  &--horizontal-padding-tiny {
    padding: 0 var(--wds-list-item-padding-horizontal-tiny, var(--wds-space-200, 12px));
    left: var(--wds-list-item-padding-horizontal-tiny, var(--wds-space-200, 12px));
    right: var(--wds-list-item-padding-horizontal-tiny, var(--wds-space-200, 12px));
  }

  &--horizontal-padding-x-tiny {
    padding: 0 var(--wds-list-item-padding-horizontal-x-tiny, var(--wds-space-100, 6px));
    left: var(--wds-list-item-padding-horizontal-x-tiny, var(--wds-space-100, 6px));
    right: var(--wds-list-item-padding-horizontal-x-tiny, var(--wds-space-100, 6px));
  }

  &--horizontal-padding-xx-tiny {
    padding: 0 var(--wds-list-item-padding-horizontal-xx-tiny, var(--wds-space-50, 3px));
    left: var(--wds-list-item-padding-horizontal-xx-tiny, var(--wds-space-50, 3px));
    right: var(--wds-list-item-padding-horizontal-xx-tiny, var(--wds-space-50, 3px));
  }

  /* Sizes and vertical paddings */
  &--size-small {
    padding-top: var(--wds-section-header-padding-vertical-small, var(--wds-space-150, 9px));
    padding-bottom: var(--wds-section-header-padding-vertical-small, var(--wds-space-150, 9px));
  }

  &--size-medium {
    padding-top: var(--wds-section-header-padding-vertical-medium, var(--wds-space-150, 9px));
    padding-bottom: var(--wds-section-header-padding-vertical-medium, var(--wds-space-150, 9px));
  }

  /* Ties with the size rules above at one class, so it has to stay last. */
  &--skin-bold {
    padding-top: var(--wds-section-header-bold-padding-top, var(--wds-space-350, 20px));
    padding-bottom: var(--wds-section-header-bold-padding-bottom, var(--wds-space-50, 4px));
  }

  /* Title */
  &__title {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: sticky;
  }

  &__title--align-start {
    justify-content: flex-start;
  }

  &__title--align-center {
    justify-content: center;
    flex-grow: 1;
  }

  &__title-text {
    /*
     * We allow changing underlying HTMl element of title text. It can be any of
     * the HTML heading elements (h1-h6) which have implicit user agent styles.
     * <Text/> component applies its own styles on top of them, however it doesn't
     * reset margins so we do that here.
     */
    margin: 0;
  }

  /* doubled root class: `color` on a `Text` root has to reach (0,3,0) to beat Text's own skin colour */
  &#{&}--skin-neutral &__title-text {
    color: var(
      --wds-section-header-label-fill-neutral, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
  }

  /*
   * `__title-text` is a `Text` root. Doubled root and slot classes put these at
   * (0,4,0), above Text's compiled `.root:weight(thin):size(small)` (0,3,0), so
   * the title keeps its size/weight regardless of bundle order.
   */
  &#{&}--size-small &__title-text#{&}__title-text {
    font-size: var(
      --wds-section-header-label-font-size-small, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    font-weight: var(
      --wds-section-header-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  /* same as above, against `.root:weight(thin):size(medium)` */
  &#{&}--size-medium &__title-text#{&}__title-text {
    font-size: var(
      --wds-section-header-label-font-size-medium, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
    font-weight: var(
      --wds-section-header-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  /* same as above; also has to land after the size rules, which it ties with */
  &#{&}--skin-bold &__title-text#{&}__title-text {
    font-family: var(
      --wds-section-header-bold-label-font-family, var(--wds-font-family-display, var(--wsr-font-family, #{$font-family})));
    font-size: var(--wds-section-header-bold-label-font-size, var(--wds-font-size-body-small, 14px));
    font-weight: var(--wds-section-header-bold-label-font-weight, var(--wds-font-weight-heading-3, 700));
    letter-spacing: var(
      --wds-section-header-bold-label-font-letter-spacing, var(--wds-font-letter-spacing-heading-3, normal));
    line-height: var(--wds-section-header-bold-label-font-line-height, var(--wds-font-line-height-body-medium, 24px));
  }

  /* Suffix */
  &__suffix {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-inline-start: var(--wds-space-200, 12px);
    position: sticky;
  }
}