@use '../core/styles' as sbb;

$theme: 'standard' !default;

@mixin base {
  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
  --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
  --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
  --sbb-train-formation-wagon-dimension-short: #{sbb.px-to-rem-build(36)};
  --sbb-train-formation-wagon-dimension-long: #{sbb.px-to-rem-build(84)};
  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
  --sbb-train-formation-sector-line-color: light-dark(
    var(--sbb-color-cement),
    var(--sbb-color-smoke)
  );
  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
  --sbb-train-formation-blocked-passage-dimension: #{sbb.px-to-rem-build(16)};
  --sbb-train-formation-text-color: var(--sbb-color-3);
  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
  --_sbb-train-formation-flex-direction: row;
  --_sbb-train-formation-flex-direction-inverted: column;
  --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
  --sbb-train-wagon-shape-color: var(--sbb-color-3);
  --sbb-train-wagon-vertical-gap: #{sbb.px-to-rem-build(2)};
  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
  --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
  --sbb-train-wagon-main-icon-height: #{sbb.px-to-rem-build(20)};
  --sbb-train-wagon-attribute-icon-gap: #{sbb.px-to-rem-build(2)};
  --sbb-train-wagon-attribute-icon-height: #{sbb.px-to-rem-build(14)};
  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
  --sbb-train-wagon-attributes-max-width: #{sbb.px-to-rem-build(55)};
  --sbb-train-wagon-attributes-mean-width: #{sbb.px-to-rem-build(28)};
  --sbb-train-wagon-occupancy-height: #{sbb.px-to-rem-build(12)};
  --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
  --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
  --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
  --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);

  // We have to subtract the gap of the wagon (2px) from the value in Figma (32)px,
  // as this is the min gap to the shape of the
  // information content, but in Figma, the gap is not respected.
  --sbb-train-wagon-information-min-width: #{sbb.px-to-rem-build(30)};
  --sbb-train-wagon-class-dimension: #{sbb.px-to-rem-build(18)};
  --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
  --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
  --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
    light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
  --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
  --sbb-train-wagon-class-font-weight: bold;
  --sbb-train-wagon-class-first-thickness: #{sbb.px-to-rem-build(4)};
  --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
  --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
}

@mixin forced-colors {
  --sbb-train-blocked-passage-background-color: CanvasText;
  --sbb-train-blocked-passage-bar-color: Canvas;
  --sbb-train-formation-sector-line-color: CanvasText;
  --sbb-train-wagon-shape-color: CanvasText;
}