@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/core/styles/core.scss

@@ -0,0 +1,819 @@
+$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/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 '../../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/checkbox.global' as checkbox with (
+  $theme: $theme
+);
+@use '../../checkbox/checkbox-group/checkbox-group.global' as checkbox-group 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 '../../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 '../../radio-button/common/radio-button-common.global' as radio-button-common with (
+  $theme: $theme
+);
+@use '../../radio-button/radio-button-group/radio-button-group.global' as radio-button-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 '../../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 '../../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 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-group.base;
+  @include checkbox-common.base;
+  @include container.base;
+  @include sticky-bar.base;
+  @include clock.base;
+  @include divider.base;
+  @include expansion-panel.base;
+  @include expansion-panel-content.base;
+  @include expansion-panel-header.base;
+  @include radio-button-common.base;
+  @include radio-button-group.base;
+  @include selection-action-panel.base;
+  @include selection-expansion-panel.base;
+  @include tab-group-common.base;
+  @include tab-label-common.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 expansion-panel-header.base-forced-colors;
+    @include visual-checkbox.base-forced-colors;
+    @include radio-button-common.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);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // 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
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 100000em;
+
+  // 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;
+    }
+  }
+
+  &:has(sbb-header[size='s']) {
+    --sbb-header-height: #{functions.px-to-rem-build(52)};
+  }
+
+  // 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 mediaqueries.mq($from: large) {
+    @include sbb-css-tokens.breakpoint-large;
+
+    @include button.base-breakpoint-large;
+
+    @include chip-group.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);
+      }
+    }
+
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+
+    &:has(sbb-header[size='s']) {
+      --sbb-header-height: var(--sbb-spacing-fixed-14x);
+    }
+  }
+
+  @include mediaqueries.mq($from: ultra) {
+    @include sbb-css-tokens.breakpoint-ultra;
+  }
+}
+
+@include font-face.font-declarations;
+
+// Components global styles
+@include container.rules;
+@include tab-nav-bar.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;
+}
+
+:is(sbb-form-field, sbb-timetable-form-field) {
+  :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+    @include typo.text-m--regular;
+    @include helpers.ellipsis;
+    @include inputs.input-reset;
+
+    // Use !important here to not interfere with Firefox focus ring definition
+    // which appears in normalize CSS of several frameworks.
+    outline: none !important;
+    overflow: var(--sbb-form-field-overflow);
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--sbb-form-field-text-color);
+
+    // Fill color needed for Safari
+    -webkit-text-fill-color: var(--sbb-form-field-text-color);
+    opacity: 1;
+    background-color: transparent;
+
+    // To be more specific than the styles in normalize.scss we need to use !important
+    // TODO: Find a better solution
+    font-size: var(--sbb-form-field-input-text-size) !important;
+    font-family: var(--sbb-typo-font-family) !important;
+    line-height: var(--sbb-typo-line-height-text) !important;
+
+    &::placeholder {
+      @include typo.placeholder;
+    }
+  }
+
+  &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
+  // This covers the placeholder of the sbb-date-input and sbb-time-input
+  &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
+
+    @include a11y.if-forced-colors {
+      color: Canvas !important;
+      -webkit-text-fill-color: Canvas !important;
+    }
+  }
+
+  // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+  &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  }
+
+  // Fix positioning issue for select which occurs in Safari
+  :where(select) {
+    vertical-align: middle;
+  }
+
+  :where(select, sbb-select) {
+    padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+  }
+
+  &[size='s'] :where(input, sbb-date-input, sbb-time-input) {
+    // We shrink the input's height to support all types of inputs (especially type=number).
+    // Factor 1.25 ensures, letters are not cut.
+    height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+
+    // Avoids Safari bug, where text gets misaligned with type=number
+    line-height: 1 !important;
+
+    // We add the missing block spacing to fit the line-height
+    margin-block: calc(
+      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
+    );
+  }
+
+  :where(textarea) {
+    @include scrollbar.scrollbar;
+
+    position: relative;
+    resize: none;
+
+    // White-space break needed for Firefox
+    white-space: break-spaces;
+    overflow-y: auto;
+    min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+  }
+
+  &[size='l'] :where(textarea) {
+    padding-block-end: #{functions.px-to-rem-build(5.5)};
+  }
+
+  &[negative] :where(textarea) {
+    @include scrollbar.scrollbar($negative: true);
+  }
+
+  &:has(
+    :is(
+      :is(input, textarea, select):user-invalid,
+      :state(interacted):invalid,
+      .ng-touched.ng-invalid,
+      .sbb-invalid
+    )
+  ),
+  :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
+    --sbb-form-field-border-color: var(--sbb-color-error);
+    --sbb-form-field-text-color: var(--sbb-color-error);
+
+    &[negative] {
+      --sbb-form-field-border-color: var(--sbb-color-red85);
+      --sbb-form-field-text-color: var(--sbb-color-red85);
+    }
+
+    @include a11y.if-forced-colors {
+      --sbb-form-field-border-color: LinkText !important;
+      --sbb-form-field-text-color: LinkText !important;
+    }
+  }
+}
+
+// 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;
+}
+
+// Ensure stable breadcrumb height during hydrating
+sbb-breadcrumb-group:not(:defined) {
+  display: block;
+  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
+  overflow: hidden;
+}
+
+// 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;
+}
+
+// Helper class for the application name and version in sbb-header.
+.sbb-header-info {
+  @include typo.text-xs--regular;
+
+  display: flex;
+  padding-inline: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-spacing-fixed-1x);
+  align-items: baseline;
+  color: var(--sbb-color-1);
+
+  strong + * {
+    font-size: var(--sbb-text-font-size-xxs);
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  }
+}
+
+// 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);
+}
+
+// TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
+sbb-flip-card-summary {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-aspect-ratio: auto;
+    --sbb-image-object-fit: cover;
+
+    border-radius: 0;
+    display: block;
+    height: 100%;
+  }
+}
+
+// TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
+sbb-lead-container {
+  > [slot='image']:is(sbb-image, img, picture),
+  > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
+    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
+    --sbb-image-object-fit: cover;
+
+    border-radius: var(--sbb-lead-container-image-border-radius);
+  }
+}
+
+// TODO: Move back to the sbb-message components when the global CSS refactoring happens
+sbb-message {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    border-radius: var(--sbb-message-image-border-radius);
+  }
+}
+
+// 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
+// TODO: Move back to the teaser components when the global CSS refactoring happens
+: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 back to the teaser components when the global CSS refactoring happens
+:is(sbb-teaser-product, sbb-teaser-product-static) {
+  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
+
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
+
+  img:not(.sbb-figure-overlap-image) {
+    place-self: stretch;
+  }
+}
+
+// TODO: Move back to the teaser components when the global CSS refactoring happens
+sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
+
+  transition-property: filter, scale;
+  will-change: filter, scale;
+  scale: var(--sbb-teaser-scale, 1);
+}
+
+// TODO: Move back to the teaser-hero components when the global CSS refactoring happens
+sbb-teaser-hero {
+  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-aspect-ratio: 1 / 1;
+
+    border-radius: 0;
+
+    @include mediaqueries.mq($from: small) {
+      --sbb-image-aspect-ratio: 16 / 9;
+    }
+  }
+
+  img:not(.sbb-figure-overlap-image) {
+    display: block;
+    align-self: stretch;
+    width: 100%;
+  }
+}
+
+// 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");
+}
+
+// Skip animation for the container, content and sidebars when a sidebar requests it
+// (during initialization or if animation is disabled, but only during transition)
+sbb-sidebar-container:has(> sbb-sidebar:state(skip-animation)) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+
+// Controls the start margin of the sbb-sidebar-content.
+// Whenever the sidebar with position start is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position start, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar:not([position='end']):is(
+          :state(state-closing),
+          :state(state-closed),
+          [mode='over'],
+          :state(mode-over-forced)
+        )
+    ),
+    :not(:has(> sbb-sidebar:not([position='end'])))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-start: 0;
+}
+
+// Controls the end margin of the sbb-sidebar-content.
+// Whenever the sidebar with position end is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position end, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar[position='end']:is(
+          :state(state-closing),
+          :state(state-closed),
+          [mode='over'],
+          :state(mode-over-forced)
+        )
+    ),
+    :not(:has(> sbb-sidebar[position='end']))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-end: 0;
+}
+
+// Toggles visibility of backdrop if there is an affected sidebar inside the container.
+sbb-sidebar-container:has(
+  > sbb-sidebar:is([mode='over'], :state(mode-over-forced)):is(
+      :state(state-opening),
+      :state(state-opened)
+    )
+) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+
+// Move the current-page-border to the right side if the sidebar is right positioned
+sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
+  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
+}
+
+// Set the border radius at the left top side if the sidebar is right positioned
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+// If there is no close button, avoid reserving any space for the button in the sidebar title
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+// If there is a title, remove top spacing for the content
+sbb-sidebar:has(sbb-sidebar-title) {
+  --sbb-sidebar__padding-block-start: 0;
+}
+
+// Move container below header
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}
+
+// We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
+.sbb-select-trigger {
+  width: 100%;
+
+  // We set the smallest possible height (zero breakpoint, size s)
+  height: var(--sbb-size-element-xs);
+
+  sbb-form-field & {
+    top: 0;
+  }
+}
+
+sbb-toggle:has(:focus-visible) {
+  @include a11y.focus-outline;
+}
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] {
+  :where(sbb-option, sbb-autocomplete-grid-option) {
+    --sbb-option-min-height: var(--sbb-size-element-xxs);
+    --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+    --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
+  }
+
+  sbb-optgroup {
+    --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+  }
+
+  sbb-option-hint {
+    --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
+  }
+}
+
+sbb-dialog-title {
+  // Hide margin on the right side. Distance to button is defined by flex gap already.
+  sbb-dialog:has(> sbb-dialog-close-button) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-close-button) > * > & {
+    padding-inline-end: 0;
+  }
+}
+
+sbb-dialog-content {
+  // If there is a title, remove top spacing for the content
+  sbb-dialog:has(> sbb-dialog-title) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
+    padding-block-start: var(--sbb-spacing-fixed-1x);
+  }
+
+  // Set the negative scrollbar colors for dialog content when dialog is negative
+  sbb-dialog[negative] > &,
+  sbb-dialog[negative]:state(has-intermediate-element) > * > & {
+    @include scrollbar.scrollbar-variables--color-negative;
+  }
+}
+
+sbb-dialog-close-button {
+  // If there is no dialog title, the close button should be positioned absolute
+  sbb-dialog:not(:has(> sbb-dialog-title)) > &,
+  sbb-dialog:state(has-intermediate-element):not(:has(> * > sbb-dialog-title)) > * > & {
+    position: absolute;
+    z-index: 1;
+  }
+
+  // The close button positioning needs the current dialog title size
+  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
+    --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
+  }
+
+  // The close button positioning needs the current dialog title size
+  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
+  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
+    --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
+  }
+}
+
+sbb-notification:has(sbb-title) {
+  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
+  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
+
+  &[size='s'] {
+    --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
+    --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
+  }
+}
+
+sbb-status:has(sbb-title) {
+  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
+  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
+  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
+}
+
+.sbb-overlay-outlet {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+// Sets ellipsis on all sbb-option child elements
+.sbb-options-nowrap {
+  --sbb-option-text-overflow: ellipsis;
+  --sbb-option-overflow: hidden;
+  --sbb-option-white-space: nowrap;
+}
+
+sbb-mini-calendar[orientation='horizontal'] {
+  sbb-mini-calendar-month {
+    --sbb-mini-calendar-grid-auto-flow: row;
+    --sbb-mini-calendar-month-height: #{functions.px-to-rem-build(48)};
+    --sbb-mini-calendar-month-grid-template-rows: none;
+    --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
+
+    sbb-mini-calendar-day:first-child {
+      grid-column-start: var(--sbb-mini-calendar-month-offset);
+    }
+  }
+}
+
+sbb-mini-calendar[orientation='vertical'] {
+  sbb-mini-calendar-month {
+    --sbb-mini-calendar-grid-auto-flow: column;
+    --sbb-mini-calendar-month-height: auto;
+    --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);
+    --sbb-mini-calendar-month-grid-template-columns: none;
+
+    sbb-mini-calendar-day:first-child {
+      grid-row-start: var(--sbb-mini-calendar-month-offset);
+    }
+  }
+}