$theme: 'standard' !default;

@use 'sass:string';
@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
  $theme: $theme
);
@use './core/mediaqueries';
@use './core/functions';
@use './mixins/a11y';
@use './mixins/font-face';
@use './mixins/helpers';
@use './mixins/inputs';
@use './mixins/overlay' as overlay-mixin;
@use './mixins/popover';
@use './mixins/scrollbar';
@use './mixins/typo';

@use '../../breadcrumb/breadcrumb/breadcrumb.global' as breadcrumb with (
  $theme: $theme
);
@use '../../breadcrumb/breadcrumb-group/breadcrumb-group.global' as breadcrumb-group with (
  $theme: $theme
);
@use '../../button/common/button-common.global' as button with (
  $theme: $theme
);
@use '../../button/common/mini-button-common.global' as mini-button with (
  $theme: $theme
);
@use '../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
  $theme: $theme
);
@use '../../calendar/calendar/calendar.global' as calendar with (
  $theme: $theme
);
@use '../../calendar/common/calendar-cell-base-element.global' as calendar-cell with (
  $theme: $theme
);
@use '../../card/card/card.global' as card with (
  $theme: $theme
);
@use '../../chip-label/chip-label.global' as chip-label with (
  $theme: $theme
);
@use '../../chip/chip/chip.global' as chip with (
  $theme: $theme
);
@use '../../chip/chip-group/chip-group.global' as chip-group with (
  $theme: $theme
);
@use '../../card/card-badge/card-badge.global' as card-badge with (
  $theme: $theme
);
@use '../../carousel/carousel/carousel.global' as carousel with (
  $theme: $theme
);
@use '../../core/mixins/panel-common.global' as panel-common with (
  $theme: $theme
);
@use '../../checkbox/checkbox.global' as checkbox with (
  $theme: $theme
);
@use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
  $theme: $theme
);
@use '../../clock/clock.global' as clock with (
  $theme: $theme
);
@use '../../container/container/container.global' as container with (
  $theme: $theme
);
@use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
  $theme: $theme
);
@use '../../dialog/dialog/dialog.global' as dialog with (
  $theme: $theme
);
@use '../../dialog/dialog-close-button/dialog-close-button.global' as dialog-close-button with (
  $theme: $theme
);
@use '../../dialog/dialog-content/dialog-content.global' as dialog-content with (
  $theme: $theme
);
@use '../../dialog/dialog-title/dialog-title.global' as dialog-title with (
  $theme: $theme
);
@use '../../divider/divider.global' as divider with (
  $theme: $theme
);
@use '../../expansion-panel/expansion-panel/expansion-panel.global' as expansion-panel with (
  $theme: $theme
);
@use '../../expansion-panel/expansion-panel-content/expansion-panel-content.global' as
  expansion-panel-content with (
  $theme: $theme
);
@use '../../expansion-panel/expansion-panel-header/expansion-panel-header.global' as
  expansion-panel-header with (
  $theme: $theme
);
@use '../../file-selector/common/file-selector.global' as file-selector with (
  $theme: $theme
);
@use '../../flip-card/flip-card/flip-card.global' as flip-card with (
  $theme: $theme
);
@use '../../flip-card/flip-card-details/flip-card-details.global' as flip-card-details with (
  $theme: $theme
);
@use '../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
  $theme: $theme
);
@use '../../header/common/header-action.global' as header-common with (
  $theme: $theme
);
@use '../../header/header-environment/header-environment.global' as header-environment with (
  $theme: $theme
);
@use '../../header/header/header.global' as header with (
  $theme: $theme
);
@use '../../footer/footer.global' as footer with (
  $theme: $theme
);
@use '../../form-field/error/error.global' as error with (
  $theme: $theme
);
@use '../../form-field/form-field/form-field.global' as form-field with (
  $theme: $theme
);
@use '../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
  $theme: $theme
);
@use '../../lead-container/lead-container.global' as lead-container with (
  $theme: $theme
);
@use '../../link/common/block-link.global' as block-link with (
  $theme: $theme
);
@use '../../loading-indicator/loading-indicator.global' as loading-indicator with (
  $theme: $theme
);
@use '../../loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle
  with (
  $theme: $theme
);
@use '../../logo/logo.global' as logo with (
  $theme: $theme
);
@use '../../map-container/map-container.global' as map-container with (
  $theme: $theme
);
@use '../../menu/menu/menu.global' as menu with (
  $theme: $theme
);
@use '../../menu/common/menu-action.global' as menu-action with (
  $theme: $theme
);
@use '../../message/message.global' as message with (
  $theme: $theme
);
@use '../../mini-calendar/mini-calendar-day/mini-calendar-day.global' as mini-calendar-day with (
  $theme: $theme
);
@use '../../mini-calendar/mini-calendar-month/mini-calendar-month.global' as mini-calendar-month
  with (
  $theme: $theme
);
@use '../../notification/notification.global' as notification with (
  $theme: $theme
);
@use '../../option/option/option.global' as option with (
  $theme: $theme
);
@use '../../option/option-hint/option-hint.global' as option-hint with (
  $theme: $theme
);
@use '../../overlay/overlay.global' as overlay with (
  $theme: $theme
);
@use '../../option/optgroup/optgroup.global' as optgroup with (
  $theme: $theme
);
@use '../../paginator/paginator/paginator.global' as paginator with (
  $theme: $theme
);
@use '../../paginator/compact-paginator/compact-paginator.global' as compact-paginator with (
  $theme: $theme
);
@use '../../popover/popover.global' as popover-component with (
  $theme: $theme
);
@use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
  $theme: $theme
);
@use '../base-elements/selection-group-base-element.global' as selection-group with (
  $theme: $theme
);
@use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
  $theme: $theme
);
@use '../../selection-expansion-panel/selection-expansion-panel.global' as selection-expansion-panel
  with (
  $theme: $theme
);
@use '../../sidebar/sidebar/sidebar.global' as sidebar with (
  $theme: $theme
);
@use '../../sidebar/sidebar-close-button/sidebar-close-button.global' as sidebar-close-button with (
  $theme: $theme
);
@use '../../sidebar/sidebar-container/sidebar-container.global' as sidebar-container with (
  $theme: $theme
);
@use '../../signet/signet.global' as signet with (
  $theme: $theme
);
@use '../../select/select.global' as select with (
  $theme: $theme
);
@use '../../slider/slider.global' as slider with (
  $theme: $theme
);
@use '../../status/status.global' as status with (
  $theme: $theme
);
@use '../../stepper/step-label/step-label.global' as step-label with (
  $theme: $theme
);
@use '../../stepper/stepper/stepper.global' as stepper with (
  $theme: $theme
);
@use '../../tabs/common/tab-group-common.global' as tab-group-common with (
  $theme: $theme
);
@use '../../tabs/common/tab-label-common.global' as tab-label-common with (
  $theme: $theme
);
@use '../../tabs/tab-nav-bar/tab-nav-bar.global' as tab-nav-bar with (
  $theme: $theme
);
@use '../../tag/tag/tag.global' as tag with (
  $theme: $theme
);
@use '../../teaser/teaser.global' as teaser with (
  $theme: $theme
);
@use '../../teaser-hero/teaser-hero.global' as teaser-hero with (
  $theme: $theme
);
@use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
  $theme: $theme
);
@use '../../timetable-form/timetable-form/timetable-form.global' as timetable-form with (
  $theme: $theme
);
@use '../../timetable-form/timetable-form-field/timetable-form-field.global' as timetable-form-field
  with (
  $theme: $theme
);
@use '../../timetable-form/timetable-form-details/timetable-form-details.global' as
  timetable-form-details with (
  $theme: $theme
);
@use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
  $theme: $theme
);
@use '../../time-input/time-input.global' as time-input with (
  $theme: $theme
);
@use '../../toggle-check/toggle-check.global' as toggle-check with (
  $theme: $theme
);
@use '../../toggle/toggle/toggle.global' as toggle with (
  $theme: $theme
);
@use '../../toggle/toggle-option/toggle-option.global' as toggle-option with (
  $theme: $theme
);
@use '../../tooltip/tooltip.global' as tooltip with (
  $theme: $theme
);
@use '../../toast/toast.global' as toast with (
  $theme: $theme
);
@use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
  $theme: $theme
);

@include helpers.box-sizing;

// Core variables
:root {
  // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
  @include sbb-css-tokens.base;

  @include breadcrumb.base;
  @include breadcrumb-group.base;
  @include button.base;
  @include mini-button.base;
  @include mini-button-group.base;
  @include calendar.base;
  @include calendar-cell.base;
  @include card.base;
  @include card-badge.base;
  @include carousel.base;
  @include chip-label.base;
  @include chip.base;
  @include chip-group.base;
  @include panel-common.base;
  @include checkbox.base;
  @include checkbox-common.base;
  @include container.base;
  @include sticky-bar.base;
  @include clock.base;
  @include dialog.base;
  @include dialog-close-button.base;
  @include divider.base;
  @include error.base;
  @include expansion-panel.base;
  @include expansion-panel-content.base;
  @include expansion-panel-header.base;
  @include file-selector.base;
  @include flip-card.base;
  @include flip-card-details.base;
  @include footer.base;
  @include form-field.base;
  @include header.base;
  @include header-common.base;
  @include header-environment.base;
  @include icon-sidebar.base;
  @include lead-container.base;
  @include block-link.base;
  @include loading-indicator.base;
  @include loading-indicator-circle.base;
  @include logo.base;
  @include map-container.base;
  @include menu.base;
  @include menu-action.base;
  @include message.base;
  @include mini-calendar-day.base;
  @include mini-calendar-month.base;
  @include notification.base;
  @include option.base;
  @include option-hint.base;
  @include optgroup.base;
  @include overlay.base;
  @include overlay-mixin.options-panel-overlay-variables--global($theme);
  @include paginator.base;
  @include compact-paginator.base;
  @include popover-component.base;
  @include radio-button-common.base;
  @include selection-group.base;
  @include selection-action-panel.base;
  @include selection-expansion-panel.base;
  @include sidebar.base;
  @include signet.base;
  @include select.base;
  @include slider.base;
  @include status.base;
  @include step-label.base;
  @include stepper.base;
  @include tab-group-common.base;
  @include tab-label-common.base;
  @include tag.base;
  @include teaser.base;
  @include teaser-hero.base;
  @include teaser-product-common.base;
  @include timetable-form.base;
  @include timetable-form-details.base;
  @include timetable-form-field.base;
  @include timetable-occupancy.base;
  @include time-input.base;
  @include toggle-check.base;
  @include toggle.base;
  @include toggle-option.base;
  @include tooltip.base;
  @include toast.base;
  @include visual-checkbox.base;

  @include a11y.if-forced-colors {
    @include sbb-css-tokens.forced-colors;

    @include breadcrumb.base-forced-colors;
    @include card.base-forced-colors;
    @include card-badge.base-forced-colors;
    @include header-common.base-forced-colors;
    @include expansion-panel-header.base-forced-colors;
    @include form-field.base-forced-colors;
    @include loading-indicator-circle.base-forced-colors;
    @include logo.base-forced-colors;
    @include visual-checkbox.base-forced-colors;
    @include radio-button-common.base-forced-colors;
    @include signet.base-forced-colors;
    @include slider.base-forced-colors;
    @include step-label.base-forced-colors;
    @include tag.base-forced-colors;
    @include toggle-check.base-forced-colors;
    @include toggle.base-forced-colors;
  }

  // Train formation
  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);

  // Overlay
  --sbb-overlay-default-z-index: 1000;

  // Cursor
  --sbb-cursor-default: default;
  --sbb-cursor-pointer: pointer;

  // Infinity border radius, can be used to achieve rounded border on start and end
  --sbb-border-radius-infinity: calc(infinity * 1px);

  // TODO: Remove complete block when new lean theme is complete
  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
  // Only render the block in standard theme as fallback for CSS class usage
  @if not string.index($theme, 'lean') {
    &.sbb-lean {
      --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
      --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
      --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
      --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
      --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
      --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
      --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
        var(--sbb-spacing-fixed-3x);
      --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
        var(--sbb-spacing-fixed-3x);
      --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
        var(--sbb-spacing-responsive-xxxs);
      --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
        var(--sbb-spacing-fixed-2x);
      --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
        var(--sbb-spacing-fixed-1x);
      --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
    }
  }

  // When the input modality is either mouse or touch,
  // the focus outline should be hidden.
  // We achieve this by setting the outline style to none.
  // This is primarily to work around Safari bugs.
  &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
    --sbb-focus-outline-style: none;
  }

  @include mediaqueries.mq($from: small) {
    @include sbb-css-tokens.breakpoint-small;

    @include dialog.base-breakpoint-small;
    @include footer.base-breakpoint-small;
    @include notification.base-breakpoint-small;
  }

  @include mediaqueries.mq($from: large) {
    @include sbb-css-tokens.breakpoint-large;

    @include button.base-breakpoint-large;
    @include chip-group.base-breakpoint-large;
    @include dialog.base-breakpoint-large;
    @include flip-card.base-breakpoint-large;
    @include form-field.base-breakpoint-large;
    @include header.base-breakpoint-large;
    @include menu.base-breakpoint-large;
    @include teaser-product-common.base-breakpoint-large;
    @include time-input.base-breakpoint-large;

    // TODO: Remove complete block when new lean theme is complete
    // Only render the block in standard theme as fallback for CSS class usage
    @if not string.index($theme, 'lean') {
      &.sbb-lean {
        --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
      }
    }
  }

  @include mediaqueries.mq($from: ultra) {
    @include sbb-css-tokens.breakpoint-ultra;

    @include lead-container.base-breakpoint-ultra;
    @include map-container.base-breakpoint-ultra;
  }
}

@include font-face.font-declarations;

// Components global styles
@include breadcrumb-group.rules;
@include container.rules;
@include dialog-close-button.rules;
@include dialog-content.rules;
@include dialog-title.rules;
@include flip-card-summary.rules;
@include form-field.rules;
@include header.rules;
@include icon-sidebar.rules;
@include lead-container.rules;
@include message.rules;
@include option.rules;
@include select.rules;
@include sidebar.rules;
@include sidebar-close-button.rules;
@include sidebar-container.rules;
@include tab-nav-bar.rules;
@include teaser.rules;
@include teaser-hero.rules;
@include teaser-product-common.rules;
@include toggle.rules;

// TODO: discuss where to add these classes
.sbb-dark {
  color-scheme: dark;
}

.sbb-light {
  color-scheme: light;
}

.sbb-light-dark {
  color-scheme: light dark;
}

html {
  @include typo.text;

  color-scheme: light dark;
  color: var(--sbb-font-color-default);
  background-color: var(--sbb-background-color-1);
}

// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
::placeholder {
  @include typo.placeholder;
}

// Hiding components until they are instantiated
:is(
  sbb-autocomplete,
  sbb-autocomplete-grid,
  sbb-datepicker,
  sbb-dialog,
  sbb-menu,
  sbb-navigation,
  sbb-navigation-section,
  sbb-overlay,
  sbb-popover,
  sbb-select,
  sbb-skiplink-list,
  sbb-toast,
  sbb-tooltip
):not(:defined) {
  display: none;
}

// Hide popover artifacts
[popover]:where(
  sbb-autocomplete,
  sbb-autocomplete-grid,
  sbb-datepicker,
  sbb-dialog,
  sbb-menu,
  sbb-navigation,
  sbb-overlay,
  sbb-popover,
  sbb-toast
) {
  @include popover.popover-reset;
}

// Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
// This style enables accessing focusable elements inside an sbb-card.
:is(sbb-card, sbb-flip-card) .sbb-action {
  pointer-events: all;
}

// In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
// Due to margin collapsing, the wrong paragraph space wins.
// To prevent the mistakenly large gap, we reset the paragraph space.
sbb-title + p {
  margin-block-start: 0;
}

img {
  aspect-ratio: var(--sbb-image-aspect-ratio);
  object-fit: var(--sbb-image-object-fit);
  object-position: var(--sbb-image-object-position);
}

// Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
// Apply the brightness effect on mouse hover
:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
  --sbb-teaser-image-animation-duration: var(
    --sbb-disable-animation-duration,
    var(--sbb-animation-duration-4x)
  );
  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);

  &:hover {
    @include mediaqueries.hover-mq($hover: true) {
      --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
    }
  }

  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
    will-change: filter;
    filter: brightness(var(--sbb-teaser-image-brightness, 1));
    transition: filter var(--sbb-teaser-image-animation-duration)
      var(--sbb-teaser-image-animation-easing);
  }
}

// TODO: move to train formation after CSS refactoring
sbb-train-formation:has(sbb-train[direction-label]) {
  --sbb-train-formation-reserve-spacing-display: block;
}

// TODO: move to train formation after CSS refactoring
sbb-train-formation:has(sbb-train-wagon[sector]) {
  --sbb-train-formation-show-sectors-gap: 1;
}

// TODO: move to train formation after CSS refactoring
sbb-train-formation:not(:has(sbb-train-wagon[label])) {
  --sbb-train-formation-wagon-label-display: none;
}

// TODO: Move to sbb-train-wagon after CSS refactoring
sbb-train-formation[view='side'] sbb-train-wagon {
  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
}

// TODO: Move to sbb-train-wagon after CSS refactoring
sbb-train-formation[view='top'] sbb-train-wagon {
  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
}

.sbb-overlay-outlet {
  position: fixed;
  inset: 0;
  pointer-events: none;
}