@use 'sass:selector';
@use '../core/functions';
@use '../core/mediaqueries';
@use './typo';

@mixin list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

@mixin list {
  // Support both top level usage (& is empty / falsy)
  // and applied to a selector usage.
  #{if(&, '&:where(ol, ul)', ':is(ol, ul)')} {
    --sbb-list-vertical-gap: 0.75em;
    --sbb-list-padding-inline-start: 1.5em;

    &,
    :is(ol, ul) {
      margin: 0;
      padding: 0;
      padding-inline-start: var(--sbb-list-padding-inline-start);
      color: var(--sbb-color-iron);

      > li {
        + li {
          margin-block-start: var(--sbb-list-vertical-gap);
        }

        p {
          margin-block: 0;
        }

        // P has to be redefined to be more specific
        > * + p {
          margin-block-start: var(--sbb-spacing-responsive-xxxs);
        }
      }
    }

    :is(ul, ol),
    .sbb-step-list & {
      margin-block-start: var(--sbb-list-vertical-gap);
    }
  }

  // Support both top level usage (& is empty / falsy)
  // and applied to a selector usage.
  #{if(&, '&:where(ul)', 'ul')} {
    &,
    ul {
      list-style-type: none;

      > li {
        position: relative;

        // Bullet point
        &::before {
          content: '\2022'; // •
          position: absolute;
          display: flex;
          height: 1em;
          width: 1em;
          align-items: center;
          justify-content: center;
          inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em));
          inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));

          // Scale 1.3 to match Figma specs.
          transform: scale(1.3);
        }
      }
    }
  }
}

@mixin step-list {
  --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(34)};
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);

  // Additional space from overall li padding to the text because text
  // has to be centered to marker number.
  --sbb-step-list-text-to-marker-block-offset: calc(
    0.5 *
      (
        var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
          var(--sbb-text-font-size)
      )
  );
  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);

  &:where(.sbb-text-s) {
    --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
  }

  &:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
    --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
  }

  &:where(.sbb-text-xl) {
    @include mediaqueries.mq($from: medium) {
      --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(41)};
    }
  }

  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: steps;

  /* stylelint-disable-next-line no-descending-specificity */
  > li {
    position: relative;
    counter-increment: steps;
    background-color: var(--sbb-color-milk);
    border-radius: var(--sbb-border-radius-4x);
    padding-block: calc(
        var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
      )
      var(--sbb-step-list-padding-block);
    padding-inline: calc(
        var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) +
          var(--sbb-step-list-marker-to-text-gap)
      )
      var(--sbb-step-list-padding-inline);
    min-height: calc(
      var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)
    );

    &::before {
      @include typo.text-xxs--bold;

      content: counter(steps);
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--sbb-step-list-marker-dimensions);
      width: var(--sbb-step-list-marker-dimensions);
      margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
      inset-inline-start: var(--sbb-step-list-padding-inline);
      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
      border-radius: 50%;
      color: var(--sbb-color-charcoal);
    }

    + li {
      margin-block-start: var(--sbb-step-list-vertical-gap);
    }

    p {
      margin-block: 0;
    }

    // P has to be redefined to be more specific
    > * + p {
      margin-block-start: var(--sbb-spacing-responsive-xxxs);
    }
  }
}

@mixin description-list {
  // Support both top level usage (& is empty / falsy)
  // and applied to a selector usage.
  #{if(&, '&:where(dl)', 'dl')} {
    @include typo.text-s--regular;

    margin: 0;
    padding: 0;
    display: grid;

    // Ensure that description is always attached to the label
    grid-template-columns: auto minmax(20%, 1fr);
    gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
    color: var(--sbb-color-iron);

    :is(dt, dd) {
      margin: 0;
      padding: 0;
    }
  }
}