@use './a11y';
@use './functions';

// ----------------------------------------------------------------------------------------------------
// Bullet Mixins: Achieve the styling of a bullet
// ----------------------------------------------------------------------------------------------------

@mixin pearl-chain-bullet-variables {
  --sbb-pearl-chain-position-color: var(--sbb-color-primary);
  --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
  --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
  --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
  --sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
  --sbb-pearl-chain-bullet-color-irrelevant: light-dark(
    var(--sbb-color-metal),
    var(--sbb-color-granite)
  );
  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);
  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
  --sbb-pearl-chain-bullet-animation-duration: 1920ms;
  --sbb-pearl-chain-bullet-animation-easing: ease-out;
  --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(14.14)};
  --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3.5)};
  --sbb-pearl-chain-bullet-crossed-border-width: #{functions.px-to-rem-build(1.5)};
}

@mixin pearl-chain-bullet {
  background: var(--sbb-pearl-chain-bullet-color);
  color: var(--sbb-pearl-chain-bullet-color);
  border-color: var(--sbb-pearl-chain-bullet-color);
  border-radius: 100%;

  @media (forced-colors: active) {
    --sbb-pearl-chain-bullet-color: CanvasText;
  }
}

@mixin pearl-chain-bullet-start-end {
  min-height: var(--sbb-pearl-chain-bullet-size-start-end);
  min-width: var(--sbb-pearl-chain-bullet-size-start-end);
  height: var(--sbb-pearl-chain-bullet-size-start-end);
  width: var(--sbb-pearl-chain-bullet-size-start-end);
}

@mixin pearl-chain-bullet-stop {
  min-height: var(--sbb-pearl-chain-bullet-size-stop);
  min-width: var(--sbb-pearl-chain-bullet-size-stop);
  height: var(--sbb-pearl-chain-bullet-size-stop);
  width: var(--sbb-pearl-chain-bullet-size-stop);
  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
  background: Canvas;
}

@mixin pearl-chain-bullet-past {
  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);

  @media (forced-colors: active) {
    --sbb-pearl-chain-bullet-color: GrayText !important;
  }
}

@mixin pearl-chain-bullet-irrelevant {
  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-irrelevant);
}

@mixin pearl-chain-bullet-disruption {
  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);
  @media (forced-colors: active) {
    --sbb-pearl-chain-bullet-color: Highlight;
  }
}

@mixin pearl-chain-bullet-skipped {
  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
  background: Canvas;

  &::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;
    background: var(--sbb-pearl-chain-bullet-color-disruption);
    height: var(--sbb-pearl-chain-bullet-crossed-height);
    width: var(--sbb-pearl-chain-bullet-crossed-width);

    @media (forced-colors: active) {
      background: Highlight;
    }
  }
}

@mixin pearl-chain-bullet-skipped-stop {
  --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(11.31)};
  --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3)};

  @include pearl-chain-bullet-stop;
  @include pearl-chain-bullet-skipped;
}

@mixin pearl-chain-bullet-irrelevant-stop {
  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);

  @include pearl-chain-bullet-stop;
}

@mixin pearl-chain-bullet-position {
  @include pearl-chain-bullet-start-end;
  @include pearl-chain-bullet;

  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);

  @media (forced-colors: active) {
    --sbb-pearl-chain-position-color: Highlight;
  }

  @keyframes pearl-chain-bullet-position-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
    }

    25% {
      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
    }

    50% {
      box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
        color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent);
    }

    100% {
      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
    }
  }

  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
    var(--sbb-pearl-chain-bullet-animation-easing) infinite;
}