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

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

@mixin pearl-chain-bullet-variables {
  --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-color-charcoal);
  --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);
  --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
  --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%;

  @include a11y.if-forced-colors {
    --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);

  @include a11y.if-forced-colors {
    --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);
  @include a11y.if-forced-colors {
    --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);

    @include a11y.if-forced-colors {
      background: Highlight;
    }
  }
}

@mixin pearl-chain-bullet-skipped-stop {
  @include pearl-chain-bullet-skipped;
  @include pearl-chain-bullet-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)};
}

@mixin pearl-chain-bullet-irrelevant-stop {
  @include pearl-chain-bullet-stop;

  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);
}

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

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

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

    50% {
      box-shadow: 0 0 0 #{functions.px-to-rem-build(3)} var(--sbb-color-red-alpha-20);
    }

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

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