$sbbBusiness: true;
@use 'sass:math';
@use 'sass:meta';

// Private polyfill for the `math.div` function from Sass..
@function private-div($a, $b) {
  @if (meta.function-exists('div', 'math')) {
    @return math.div($a, $b);
  } @else {
    @return $a / $b;
  }
}

$sbbBusiness: false !default;

@mixin publicOnly() {
  @if $sbbBusiness == false {
    @content;
  }
}

@mixin businessOnly() {
  @if $sbbBusiness {
    @content;
  }
}

// https://digital.sbb.ch/en/farben

// Core Colors
$sbbColorRed: #eb0000;
$sbbColorRed125: #c60018;
$sbbColorRed150: #a20013;
$sbbColorWhite: #ffffff;
$sbbColorMilk: #f6f6f6;
$sbbColorCloud: #e5e5e5;
$sbbColorSilver: #dcdcdc;
$sbbColorAluminum: #d2d2d2;
$sbbColorPlatinum: #cdcdcd;
$sbbColorCement: #bdbdbd;
$sbbColorGraphite: #b7b7b7;
$sbbColorStorm: #a8a8a8;
$sbbColorMetal: #767676;
$sbbColorGranite: #686868;
$sbbColorAnthracite: #5a5a5a;
$sbbColorIron: #444444;
$sbbColorBlack: #000000;
$sbbColorBlue: #2d327d;

// Extended Colors
$sbbColorSky: #0079c7;
$sbbColorNight: #143a85;
$sbbColorViolet: #6f2282;
$sbbColorAutumn: #e84e10;
$sbbColorOrange: #f27e00;
$sbbColorPeach: #fcbb00;
$sbbColorLemon: #ffde15;
$sbbColorGreen: #00973b;

// Non-Standard Colors
$sbbColorGrey: #666666;
$sbbColorGreyMedium: #979797;

// Context Colors
$sbbColorBg: $sbbColorWhite;
$sbbColorCallToAction: $sbbColorRed;
$sbbColorCallToActionHover: $sbbColorRed125;
$sbbColorError: $sbbColorRed;
$sbbColorText: $sbbColorBlack;

// ----------------------------------------------------------------------------------------------------
// All about variables in here
// ----------------------------------------------------------------------------------------------------

/**
 * Font Size
 */
$sizeFontBase: 15px;
$sizeLineHeightBase: 1.7; // In the Sketch files everything is annotated as 1.5 but in fact we will need 1.7 with the current Webfonts to achieve the desired line height

/**
 * Font Families
 */
$fontFamilyBase: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$fontSbbRoman: 'SBBWeb Roman', $fontFamilyBase;
$fontSbbBold: 'SBBWeb Bold', $fontFamilyBase;
$fontSbbUltralight: 'SBBWeb Ultralight', $fontFamilyBase;
$fontSbbLight: 'SBBWeb Light', $fontFamilyBase;
$fontSbbThin: 'SBBWeb Thin', $fontFamilyBase;

/**
 * Breakpoints
 */
$sizeBreakpointMobilePortrait: 321px;
$sizeBreakpointMobileLandscape: 421px;
$sizeBreakpointTabletPortrait: 643px;
$sizeBreakpointTabletLandscape: 769px;
$sizeBreakpointDesktop: 1025px;
$sizeBreakpointDesktopLarge: 1281px;
$sizeBreakpointDesktopLargePlus: 1441px; // used for checkout column change from 2:1 to 3:1.
$sizeBreakpointDesktopMaxWidth: 1921px; // maxWidthDesktop + (2 x 8.5%)
$sizeBreakpointDesktop4k: 2561px;
$sizeBreakpointDesktop5k: 3841px;

$sizeWidthContent: 960px;
$maxWidthContentDesktop: 1594px;
$maxWidthContentDesktop5k: 2656px;

/**
 * Offsets
 */
$offset5k: 19%;
$offsetLarge: 8.5%;
$offsetPreLarge: 5.5%;
$offsetMedium: 24;
$offsetSmall: 12;

/**
 * Scaling Factors
 */
$scalingFactorDefault: 1;
$scalingFactor4k: 1.5;
$scalingFactor5k: 2;

/**
 * Grid
 */
$gutterMobile: 12;
$gutterTablet: 24;
$gutterDesktop: 16;
$gutterDesktop4k: 26;
$gutterDesktop5k: 32;

/* Vertical Spacings */
$gutterHeight: 8;
$innerComponentSpacing: 24;
$interComponentSpacing: 80;
$interComponentSpacingSmall: 40;

/**
 * Typo
 */
$sizeFontDefault: 15;
$sizeFontDefault4k: $sizeFontDefault * $scalingFactor4k;
$sizeFontDefault5k: $sizeFontDefault * $scalingFactor5k;

$fontSizeHeaderDefault: 14;
$fontSizeHeaderDesktop4k: $fontSizeHeaderDefault * $scalingFactor4k;
$fontSizeHeaderDesktop5k: $fontSizeHeaderDefault * $scalingFactor5k;

$sizeFontH1Mobile: 28;
$sizeFontH1Tablet: 30;
$sizeFontH1Default: 40;
$sizeFontH1Default4k: $sizeFontH1Default * $scalingFactor4k;
$sizeFontH1Default5k: $sizeFontH1Default * $scalingFactor5k;

$sizeFontH2Default: 32;
$sizeFontH2Default4k: $sizeFontH2Default * $scalingFactor4k;
$sizeFontH2Default5k: $sizeFontH2Default * $scalingFactor5k;

$sizeFontH3Default: 21;
$sizeFontH3Default4k: $sizeFontH3Default * $scalingFactor4k;
$sizeFontH3Default5k: $sizeFontH3Default * $scalingFactor5k;

$sizeFontH4Default: $sizeFontDefault;
$sizeFontH4Default4k: $sizeFontH4Default * $scalingFactor4k;
$sizeFontH4Default5k: $sizeFontH4Default * $scalingFactor5k;

$fontSizeFooterBottomContainerDefault: 12;
$fontSizeFooterDefault: $fontSizeHeaderDefault;

/* lead text font sizes */
$sizeFontLeadTextDefault: 20;
$sizeFontLeadTextTablet: 21;

/* form element sizing */
$formElementMaxWidth: 320;
$formElementMinWidth: 240;
$formElementSpacing: private-div($gutterDesktop, 2);

/**
 * Animation-Stuff
 */
$defaultTransitionDuration: 300ms;
$shortDistanceTransitionDuration: 225ms;

$defaultLinkIconTransitionTimingFunction: cubic-bezier(0.785, 0.135, 0.15, 0.86);

$linkiconAnimationDuration: $defaultTransitionDuration;
$linkiconAnimation: $linkiconAnimationDuration $defaultLinkIconTransitionTimingFunction;
$linksocialAnimation: background $defaultTransitionDuration ease-in;

$imageLazyloadFadeAnimation: opacity 0.35s ease-in;
$imageLazyloadFadeAnimationTablet: opacity 0.45s ease-in;

/**
 * Layers
 */

$zIndexFocusedElement: 999;

/**
 * Footer
 */
$footerAnimation: 0.3s; // This has to match the delay in the corresponding JS
$fontSizeFooterSectionTitleDefault: 16;

/**
 * Timetable Breakpoints
 */
$sizeBreakpointTimetableMobile: 960px;

/**
 * Timetable Cells
 */
$cellSmall: 52;
$cellCtaSmall: 72;
$cellCtaSmallMedium: 96;
$cellCTAMedium: 160;
$cellCTALarge: 332;

// ----------------------------------------------------------------------------------------------------
// Functions
// ----------------------------------------------------------------------------------------------------

// Helper Functions
// ----------------------------------------------------------------------------------------------------

@function pxToEm($px, $ref: $sizeFontBase) {
  @return toEm(private-div(toPx($px), toPx($ref)));
}

@function pxToRem($px) {
  @return toRem(private-div(toPx($px), toPx($sizeFontBase)));
}

@function pxToPc($px, $ref: $sizeWidthContent) {
  @return (private-div(toPx($px), toPx($ref)) * 100%);
}

@function toEm($val) {
  @return ($val + 0em);
}

@function toRem($val) {
  @return ($val + 0rem);
}

@function toPx($val) {
  @return ($val + 0px);
}

// Spacings
// ----------------------------------------------------------------------------------------------------

@function paragraphSpacing($fontSize: $sizeFontDefault) {
  @return toEm(private-div($gutterHeight, $fontSize)); // 8px
}

@function innerComponentSpacing($fontSize: $sizeFontDefault) {
  @return toEm(private-div(($gutterHeight * 3), $fontSize)); // 24px
}

@function innerComponentBottomSpacingSmall($fontSize: $sizeFontDefault) {
  @return toEm(private-div(($gutterHeight * 4.5), $fontSize)); // 36px
}

@function interComponentSpacingTiny($fontSize: $sizeFontDefault) {
  @return toEm(private-div(($gutterHeight * 3), $fontSize)); // 24px
}

@function interComponentSpacingSmall($fontSize: $sizeFontDefault) {
  @return toEm(private-div(($gutterHeight * 6), $fontSize)); // 48px
}

@function interComponentSpacingTablet($fontSize: $sizeFontDefault) {
  @return toEm(private-div(($gutterHeight * 7), $fontSize)); // 56px
}

@function interComponentSpacing($fontSize: $sizeFontDefault) {
  @return toEm(private-div(($gutterHeight * 10), $fontSize)); // 80px
}

// Arithmetic functions
// ----------------------------------------------------------------------------------------------------

// Calculate power
@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: private-div($value, $number);
    }
  }
  @return $value;
}

// Factorial function
@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

// Trigonometric functions
// ----------------------------------------------------------------------------------------------------

// Pi constant
@function pi() {
  @return 3.14159265359;
}

// Get radians from angle
@function rad($angle) {
  $unit: unit($angle);
  $unitless: private-div($angle, ($angle * 0 + 1));
  @if $unit == deg {
    $unitless: private-div($unitless, 180) * pi();
  }
  @return $unitless;
}

// Sine function
@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * private-div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));
  }
  @return $sin;
}

// Cosine function
@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * private-div(pow($angle, 2 * $i), fact(2 * $i));
  }
  @return $cos;
}

// Tangent function
@function tan($angle) {
  @return private-div(sin($angle), cos($angle));
}

// ----------------------------------------------------------------------------------------------------
// Mediaqueries
// ----------------------------------------------------------------------------------------------------

/**
 * Inspired from https://github.com/guardian/sass-mq.git
 */

/**
 * // To enable support for browsers that do not support @media queries,
 * (IE <= 8, Firefox <= 3, Opera <= 9) set $mqResponsive to false
 * Create a separate stylesheet served exclusively to these browsers,
 * meaning @media queries will be rasterized, relying on the cascade itself
 */
$mqResponsive: true;

/**
 * Name your breakpoints in a way that creates a ubiquitous language
 * across team members. It will improve communication between
 * stakeholders, designers, developers, and testers.
 */
$mqBreakpoints: (
  mobile: $sizeBreakpointMobilePortrait,
  mobilePortrait: $sizeBreakpointMobilePortrait,
  mobileLandscape: $sizeBreakpointMobileLandscape,
  tablet: $sizeBreakpointTabletPortrait,
  tabletPortrait: $sizeBreakpointTabletPortrait,
  tabletLandscape: $sizeBreakpointTabletLandscape,
  desktop: $sizeBreakpointDesktop,
  desktopLarge: $sizeBreakpointDesktopLarge,
  desktopLargePlus: $sizeBreakpointDesktopLargePlus,
  desktopMaxWidth: $sizeBreakpointDesktopMaxWidth,
  desktop4k: $sizeBreakpointDesktop4k,
  desktop5k: $sizeBreakpointDesktop5k,
);

/**
 * Define the breakpoint from the $mqBreakpoints list that should
 * be used as the target width when outputting a static stylesheet
 * (i.e. when $mqResponsive is set to 'false').
 */
$mqStaticBreakpoint: mobileLandscape;

/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
$mqShowBreakpoints: (
  mobileLandscape,
  tabletPortrait,
  tabletLandscape,
  desktop,
  desktopPlus,
  desktop4k,
  desktop5k
);

@function mqGetBreakpointWidth($name) {
  @if (map-has-key($mqBreakpoints, $name)) {
    @return map-get($mqBreakpoints, $name);
  } @else {
    @warn "Breakpoint #{$name} does not exist";
  }
}

/**
 * Media Query mixin
 * Usage:
 * .element {
 *     @include mq($from: mobile) {
 *         color: red;
 *     }
 *     @include mq($to: tablet) {
 *         color: blue;
 *     }
 *     @include mq(mobile, tablet) {
 *         color: green;
 *     }
 *     @include mq($from: tablet, $and: '(orientation: landscape)') {
 *         color: teal;
 *     }
 *     @include mq(950px) {
 *         color: hotpink;
 *     }
 * }
 */

@mixin mq($from: false, $to: false, $and: false, $height: false) {
  // Initialize variables
  $minSize: 0;
  $maxSize: 0;
  $mediaQuery: '';
  $axis: if($height, 'height', 'width');

  // From: this breakpoint (inclusive)
  @if $from {
    @if type-of($from) == number {
      $minSize: pxToEm($from, 16);
    } @else {
      $minSize: pxToEm(mqGetBreakpointWidth($from), 16);
    }
  }

  // To: that breakpoint (exclusive)
  @if $to {
    @if type-of($to) == number {
      $maxSize: pxToEm($to, 16) - 0.01em;
    } @else {
      $maxSize: pxToEm(mqGetBreakpointWidth($to), 16) - 0.01em;
    }
  }

  // Responsive support is disabled, rasterize the output outside @media blocks
  // The browser will rely on the cascade itself.
  @if ($mqResponsive == false) {
    $staticBreakpointWidth: mqGetBreakpointWidth($mqStaticBreakpoint);
    @if type-of($staticBreakpointWidth) == number {
      $targetWidth: pxToEm($staticBreakpointWidth, 16);
      // Output only rules that start at or span our target width
      @if (
        $and ==
          false and
          ($minSize <= $targetWidth) and
          (($to == false) or ($maxSize >= $targetWidth))
      ) {
        @content;
      }
    } @else {
      // Throw a warning if $mqStaticBreakpoint is not in the $mqBreakpoints list
      @warn "No static styles will be output: #{$staticBreakpointWidth}";
    }
  }

  // Responsive support is enabled, output rules inside @media queries
  @else {
    @if $minSize != 0 {
      $mediaQuery: '#{$mediaQuery} and (min-#{$axis}: #{$minSize})';
    }
    @if $maxSize != 0 {
      $mediaQuery: '#{$mediaQuery} and (max-#{$axis}: #{$maxSize})';
    }
    @if $and {
      $mediaQuery: '#{$mediaQuery} and #{$and}';
    }

    $mediaQuery: unquote(#{$mediaQuery});

    @media #{all + $mediaQuery} {
      @content;
    }
  }
}

/**
 * Add a breakpoint
 * Usage: $mqBreakpoints: mqAddBreakpoint(tvscreen, 1920px);
 */
@function mqAddBreakpoint($name, $breakpoint) {
  $newBreakpoint: (
    $name: $breakpoint,
  );
  @return map-merge($mqBreakpoints, $newBreakpoint);
}

/**
 * Create JSON string of map of breakpoints
 */
@function mqGetBreakpointsJSON($breakpoints: $mqBreakpoints) {
  $JSON: '';

  @each $name in map-keys($breakpoints) {
    $value: map-get($breakpoints, $name);

    $JSON: $JSON + '\\"#{$name}\\"\\:\\"#{$value}\\"\\,';
  }

  // Remove last "\,"
  $JSON: str-slice($JSON, 1, str-length($JSON) - 2);

  @return \{#{$JSON}\};
}

/**
 * Create JSON string of single breakpoint
 */
@function mqGetBreakpointJSON($name, $value) {
  @return \{\"name\"\:\"#{$name}\"\,\"value\"\:\"#{$value}\"\};
}

// ----------------------------------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------------------------------

/**
 * Contain floats with clearfix
 *
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */

@mixin clearfix() {
  *zoom: 1;

  &:before,
  &:after {
    content: '';
    display: table;
  }

  &:after {
    clear: both;
  }
}

/**
 * Lists with layout purpose
 */

@mixin resetList() {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

/**
 * Replace text
 */

@mixin replaceText() {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/**
 * Better font rendering (on OS X)
 * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
 *
 * Usage:
 *
 * .var-dark-on-light {
 * 	@include fontSmoothing;
 * }
 * .var-light-on-dark {
 * 	@include fontSmoothingReset;
 * }
 */

@mixin fontSmoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin fontSmoothingReset() {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/**
 * Placeholder in input fields
 */
@mixin placeholder($color: $sbbColorGrey) {
  &::-webkit-input-placeholder {
    color: $color;
  }

  &::-moz-placeholder {
    // Firefox 19+
    color: $color;
    opacity: 1;
  }

  &:-ms-input-placeholder {
    color: $color;
  }
}

// Typo Styles
// ----------------------------------------------------------------------------------------------------
@mixin headline1 {
  font-family: $fontSbbThin;
  font-weight: normal;
  font-size: pxToRem($sizeFontH1Mobile);
  line-height: 1.4;
  margin: 2em 0 0;

  @include mq($from: tabletPortrait) {
    line-height: 1.2;
    font-size: pxToRem($sizeFontH1Tablet);
  }

  @include mq($from: desktop) {
    font-size: pxToRem($sizeFontH1Default);
  }

  @include mq($from: desktop4k) {
    font-size: pxToRem($sizeFontH1Default4k); /* Factor 1.5 of Desktop */
  }

  @include mq($from: desktop5k) {
    font-size: pxToRem($sizeFontH1Default5k); /* Factor 2 of Desktop */
  }
}

@mixin headline2 {
  font-family: $fontSbbLight;
  font-weight: normal;
  font-size: pxToRem(24px);
  line-height: 1.2;
  margin: innerComponentSpacing(24) 0 0;

  @include mq($from: tabletPortrait) {
    font-size: pxToRem(26px);
  }

  @include mq($from: desktop) {
    font-size: pxToRem($sizeFontH2Default);
  }

  @include mq($from: desktop4k) {
    font-size: pxToRem($sizeFontH2Default4k); /* Factor 1.5 of Desktop */
    font-family: $fontSbbThin;
  }

  @include mq($from: desktop5k) {
    font-size: pxToRem($sizeFontH2Default5k); /* Factor 2 of Desktop */
    font-family: $fontSbbThin;
  }
}

@mixin headline3 {
  font-family: $fontSbbLight;
  font-weight: normal;
  font-size: pxToRem(20px);
  line-height: 1.4;
  margin: 2em 0 0;

  @include mq($from: tabletPortrait) {
    font-size: pxToRem($sizeFontH3Default);
  }

  @include mq($from: desktop) {
    font-size: pxToEm($sizeFontH3Default);
  }

  @include mq($from: desktop4k) {
    font-family: $fontSbbThin;
  }
}

@mixin headline4 {
  font-family: $fontSbbBold;
  font-weight: normal;
  font-size: pxToRem($sizeFontH4Default);
  line-height: 1.5;
  margin: 2em 0 0;

  @include mq($from: tabletPortrait) {
    font-size: pxToRem($sizeFontH4Default);
  }

  @include mq($from: desktop) {
    font-size: pxToEm($sizeFontH4Default);
  }

  @include mq($from: desktop4k) {
    font-family: $fontSbbRoman;
  }
}

@mixin lead {
  font-family: $fontSbbLight;
  font-weight: normal;
  color: $sbbColorText;
  font-size: pxToRem(20px);
  line-height: 1.3;
  margin: 2em 0 0;

  @include mq($from: tabletPortrait) {
    font-size: pxToRem(21px);
  }

  @include mq($from: desktop) {
    font-size: pxToEm(21px);
  }
}

@mixin copy {
  font-size: pxToRem($sizeFontDefault);
  line-height: 1.7;
  margin: 1em 0 0; // paragraph as default

  @include mq($from: tabletPortrait) {
    font-size: pxToRem($sizeFontDefault);
  }

  @include mq($from: desktop) {
    font-size: pxToRem($sizeFontDefault);
  }

  @include mq($from: desktop4k) {
    font-size: pxToRem($sizeFontDefault4k);
  }

  @include mq($from: desktop5k) {
    font-size: pxToRem($sizeFontDefault5k);
  }
}

@mixin inlinelinks {
  a {
    color: $sbbColorText;
    text-decoration: underline;

    &:hover,
    &:focus {
      color: $sbbColorCallToActionHover;
    }
  }
}

@mixin lists {
  ul,
  ol {
    font-size: pxToEm($sizeFontDefault);
    margin-left: pxToEm(8);
    margin-top: pxToEm(17);
    margin-bottom: pxToEm(30);

    @include mq($from: desktop) {
      margin-top: pxToEm(25);
    }

    li {
      margin-top: pxToEm(8);
    }
  }

  ul {
    list-style-type: disc;
    padding-left: pxToEm(16);
  }

  ul li {
    padding-left: pxToEm(16 - 6);
  }

  ol {
    list-style-type: none;
    counter-reset: item;
    padding-left: 0;

    > li {
      display: table;
      padding-left: 0;
    }

    > li:before {
      content: counters(item, '.') '.';
      counter-increment: item;

      display: table-cell;
      padding-right: pxToEm(13, $sizeFontDefault);
    }
  }

  ol ol,
  ol ul,
  ul ul,
  ul ol {
    margin: pxToEm(6) 0 0 pxToEm(8);
  }

  // if ol is nested inside ul, we need just 1 hierarchy level for the counter
  ul li ol > li:before {
    content: counter(item) '.';
  }
}

@mixin breakOutOfCenterAndGoFullBleed() {
  // https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

// Centered tab module
@mixin centeredTabModule() {
  display: flex;
  justify-content: center;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin inlineSVG() {
  float: none;
  display: inline-block;
  width: pxToEm(16, $sizeFontDefault);
  height: pxToEm(16, $sizeFontDefault);
  margin-bottom: pxToEm(-4, $sizeFontDefault);
  border-radius: 1px;
}

@mixin absoluteCenterXY() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin absoluteCenterX() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin absoluteCenterY() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin setFullBleed($offset) {
  margin-left: -$offset;
  margin-right: -$offset;
}

// Section (Fieldset)
// ----------------------------------------------------------------------------------------------------

@mixin fieldset {
  margin: 0;
  min-width: 0;

  @if $sbbBusiness {
    border: 1px solid $sbbColorGraphite;
    padding: pxToEm(16);
  } @else {
    border: 1px solid $sbbColorSilver;
    padding: pxToEm(36) pxToEm(24);

    @include mq($from: tabletPortrait) {
      padding: pxToEm(48) pxToEm(24);
    }

    @include mq($from: desktop4k) {
      font-size: pxToEm($sizeFontBase * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      font-size: pxToEm($sizeFontBase * $scalingFactor5k);
    }
  }

  > legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    font-family: $fontSbbLight;
    font-weight: 400;
    line-height: 1.2;
    float: left;

    @if $sbbBusiness {
      font-size: 21px;
      margin: 0 0 8px;
    } @else {
      font-size: 24px;
      margin: 0 0 24px;

      @include mq($from: desktop) {
        font-size: 32px;
      }

      @include mq($from: desktop4k) {
        font-size: 48px;
        margin: 0 0 36px;
      }

      @include mq($from: desktop5k) {
        font-size: 64px;
        margin: 0 0 48px;
      }
    }
  }

  fieldset {
    border-top: none;
    border-right: none;
    border-left: none;
    padding-left: 0;
    padding-right: 0;

    @if $sbbBusiness {
      border-color: $sbbColorCloud;
    }

    &:last-of-type {
      border-bottom: none;
    }

    > legend {
      @if $sbbBusiness {
        font-size: 16px;
      } @else {
        font-size: 20px;

        @include mq($from: desktop) {
          font-size: 22px;
        }

        @include mq($from: desktop4k) {
          font-size: 32px;
        }

        @include mq($from: desktop5k) {
          font-size: 42px;
        }
      }
    }
  }
}

@mixin baseBadgePill() {
  min-width: pxToEm(18, 11);
  border-radius: pxToEm(15, 11);
  padding: pxToEm(3, 11) pxToEm(5, 11) pxToEm(4, 11);
  background-color: $sbbColorMetal;
  color: $sbbColorWhite;
  font-family: $fontSbbBold;
  line-height: 1.1;
  font-size: pxToRem(11);
  text-align: center;
  height: pxToEm(18, 11);

  @include publicOnly() {
    @include mq($from: desktop4k) {
      font-size: pxToRem(17);
    }

    @include mq($from: desktop5k) {
      font-size: pxToRem(22);
    }
  }
}

@mixin svgIconColor($color) {
  svg.sbb-svg-icon {
    fill: $color;

    & > path {
      &[fill='none'] {
        stroke: $color;
      }

      &:not([fill]) {
        fill: $color;
      }
    }
  }
}

/**
 * Display content for screen reader only.
 * Copied from angular/components .cdk-visually-hidden, in order
 * to apply it to a class conditionally.
 */
@mixin sbbVisuallyHidden() {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  // This works around a Chrome bug that can cause the tab to crash when large amounts of
  // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
  white-space: nowrap;

  // Avoid browsers rendering the focus ring in some cases.
  outline: 0;

  // Avoid some cases where the browser will still render the native controls (see #9049).
  -webkit-appearance: none;
  -moz-appearance: none;
}

/***
* BUTTON CONFIGURATION VARIABLES
* - Remapping global vars into more semantics var names for buttons
* - Adding new specific vars for buttons
***/

$buttonSizeFontDefault: $sizeFontDefault;
$buttonDefaultBgColor: $sbbColorCallToAction;
$buttonDefaultBgColorHover: $sbbColorCallToActionHover;
$buttonDefaultColor: $sbbColorWhite;
$buttonAlternativeBgColor: $sbbColorGranite;
$buttonAlternativeBgColorHover: $sbbColorIron;
$buttonAlternativeColor: $sbbColorWhite;
$buttonSecondaryColor: $sbbColorIron;
$buttonSecondaryBgColor: $sbbColorSilver;
$buttonSecondaryBgColorHover: $sbbColorPlatinum;
$buttonGhostColor: $sbbColorGrey;
$buttonGhostColorHover: $sbbColorIron;
$buttonGhostBorderColor: $sbbColorStorm;
$buttonGhostBorderColorHover: $sbbColorIron;
$buttonFramelessColor: $sbbColorIron;
$buttonFramelessColorHover: $sbbColorRed125;
$buttonDisabledBorderColor: $sbbColorGreyMedium;

@if $sbbBusiness {
  $buttonGhostColor: $sbbColorGranite;
  $buttonGhostBorderColor: $sbbColorGranite;
}

/***
* BUTTON BASIC STRUCTURAL MIXINS AND PLACEHOLDERS
***/

@mixin buttonReset() {
  background: none;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
}

@mixin buttonResetFrameless() {
  @include buttonReset();
  border: none;
}

/*** KICKSTART BASIC BUTTON ***/
@mixin buttons($fontSize: $buttonSizeFontDefault) {
  @include buttonReset();
  @include ellipsis;

  width: 100%;
  background-color: $buttonDefaultBgColor;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: pxToRem($fontSize);
  line-height: 1.4;
  border-style: solid;
  border-radius: toEm(private-div(2, $fontSize));
  color: $buttonDefaultColor;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  @include mq($from: tabletPortrait) {
    font-size: pxToRem($fontSize);
    width: auto;
    min-width: toEm(private-div(60, $fontSize));
    max-width: toEm(private-div(400, $fontSize));
  }

  @include mq($from: desktop) {
    font-size: pxToRem($fontSize);
  }

  @include publicOnly() {
    border-width: pxToRem(2);
    height: toEm(private-div(48, $fontSize));
    padding: toEm(private-div(12.5, $fontSize)) toEm(private-div(40, $fontSize))
      toEm(private-div(15.5, $fontSize)) toEm(private-div(40, $fontSize));

    @include mq($from: desktop4k) {
      font-size: pxToRem($fontSize * $scalingFactor4k);
      border-width: pxToRem(2 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      font-size: pxToRem($fontSize * $scalingFactor5k);
      border-width: pxToRem(2 * $scalingFactor5k);
    }
  }

  @include businessOnly() {
    border-width: pxToRem(1);
    height: toEm(private-div(36, $fontSize));
    padding: toEm(private-div(6, $fontSize)) toEm(private-div(16, $fontSize))
      toEm(private-div(7, $fontSize));
  }

  &:not(:disabled) {
    &:hover,
    &:focus {
      cursor: pointer;
    }
  }
}

/*** UTILITY MIXIN FOR %arrowbuttons PLACEHOLDER ***/
@mixin buttonArrowHover {
  padding-left: pxToEm(70, $buttonSizeFontDefault);
  padding-right: pxToEm(40, $buttonSizeFontDefault);
  transition: padding-left $linkiconAnimation, padding-right $linkiconAnimation,
    color $linkiconAnimation, border-color $linkiconAnimation;

  .sbb-svgsprite-icon {
    transition: opacity $linkiconAnimation, transform $linkiconAnimation, fill $linkiconAnimation;
  }

  .sbb-svgsprite-icon:first-of-type {
    opacity: 1;
    transform: translateX(0);
  }

  .sbb-svgsprite-icon:last-of-type {
    opacity: 0;
    transform: translateX(pxToEm(26));
  }
}

@mixin arrowbuttons {
  position: relative;
  font-size: pxToRem($buttonSizeFontDefault);

  @include publicOnly() {
    padding-left: toEm(private-div(40, $buttonSizeFontDefault));
    padding-right: toEm(private-div(70, $buttonSizeFontDefault));
    transition: height $linkiconAnimation, padding-left $linkiconAnimation,
      padding-right $linkiconAnimation, color $linkiconAnimation;

    @include mq($from: desktop4k) {
      font-size: pxToRem($sizeFontDefault4k);
    }

    @include mq($from: desktop5k) {
      font-size: pxToRem($sizeFontDefault5k);
    }
  }

  @include businessOnly() {
    padding-right: toEm(private-div(46, $buttonSizeFontDefault));
  }

  .sbb-svgsprite-icon {
    position: absolute;
    width: pxToEm(24, $buttonSizeFontDefault);
    height: pxToEm(24, $buttonSizeFontDefault);
    top: 50%;
    margin-top: pxToEm(-12.5, $buttonSizeFontDefault);
    transition: opacity $linkiconAnimation, transform $linkiconAnimation, fill $linkiconAnimation;
    backface-visibility: hidden;
    @include svgIconColor(
      $buttonDefaultColor
    ); // TODO(icon-migration): remove svgIconColor because icons take color from button
    pointer-events: none;
  }

  .sbb-svgsprite-icon:first-of-type {
    margin-left: pxToEm(-30, $buttonSizeFontDefault);
    opacity: 0;
    transform: translateX(pxToEm(-26, $buttonSizeFontDefault));
  }

  .sbb-svgsprite-icon:last-of-type {
    margin-left: pxToEm(6, $buttonSizeFontDefault);
    opacity: 1;
    transform: translateX(0px);
  }
}

/***
* BUTTON WITH ARROWS PLACEHOLDER
* - Used placeholder instead mixin to improve compiled output size
***/
%arrowbuttons {
  @include arrowbuttons;

  @include publicOnly() {
    &:not(:disabled) {
      &:hover,
      &:focus {
        @include buttonArrowHover;
      }
    }
  }
}

/***
* BUTTON THEMES MIXINS AND PLACEHOLDERS
***/

/*** PRIMARY BUTTON ***/
@mixin primaryButton {
  color: $buttonDefaultColor;
  border: none;
  background-color: $buttonDefaultBgColor;

  &:not(:disabled) {
    &:hover,
    &:focus {
      background-color: $buttonDefaultBgColorHover;
      border: none;
      color: $buttonDefaultColor;

      // TODO(icon-migration): remove definition because icons take color from button
      .sbb-svgsprite-icon {
        @include svgIconColor($buttonDefaultColor);
      }
    }
  }
}

/***
* PRIMARY BUTTON PLACEHOLDER
* - Include primary mixin in order to allow extension
* 	in order to get a more compact compiled css
***/
%primaryButton {
  @include primaryButton();
}

/*** PRIMARY BUTTON WITH ICON ***/
@mixin primaryIconButton {
  @extend %primaryButton;
  @extend %arrowbuttons;
}

/*** SECONDARY BUTTON ***/
@mixin secondaryButton {
  color: $buttonSecondaryColor;
  background-color: $buttonSecondaryBgColor;
  border: none;

  &:not(:disabled) {
    &:hover,
    &:focus {
      background-color: $buttonSecondaryBgColorHover;
      border: none;
      color: $buttonSecondaryColor;
    }
  }
}

/***
* SECONDARY BUTTON PLACEHOLDER
* - Include secondary mixin in order to allow extension
* 	in order to get a more compact compiled css
***/
%secondaryButton {
  @include secondaryButton;
}

/*** SECONDARY BUTTON WITH ICON ***/
@mixin secondaryIconButton {
  @extend %secondaryButton;
  @extend %arrowbuttons;

  // TODO(icon-migration): remove definition because icons take color from button
  .sbb-svgsprite-icon {
    @include svgIconColor($buttonSecondaryColor);
  }

  // TODO(icon-migration): remove definition because icons take color from button
  &:hover,
  &:focus {
    .sbb-svgsprite-icon {
      @include svgIconColor($buttonSecondaryColor);
    }
  }
}

/***
* SECONDARY ICON BUTTON PLACEHOLDER
* - Include secondary mixin in order to allow extension
* 	in order to get a more compact compiled css
***/
%secondaryIconButton {
  @include secondaryIconButton;
}

/*** GHOST BUTTON ***/
@mixin ghostButtonPositive($fontSize: $buttonSizeFontDefault) {
  background-color: transparent;
  border-color: $buttonGhostBorderColor;
  color: $buttonGhostColor;
  transition: border-color $linkiconAnimation, height $linkiconAnimation,
    padding-left $linkiconAnimation, padding-right $linkiconAnimation, color $linkiconAnimation;
  line-height: pxToEm(17);

  @media screen and (-ms-high-contrast: active) {
    border: pxToEm(1) solid currentColor;
  }

  &:not(:disabled) {
    &:hover,
    &:focus {
      color: $buttonGhostColorHover;
      background-color: transparent;
      border-color: $buttonGhostBorderColorHover;

      // TODO(icon-migration): remove definition because icons take color from button
      .sbb-svgsprite-icon {
        @include svgIconColor($buttonGhostColorHover);
      }
    }
  }
}

/***
* GHOST BUTTON PLACEHOLDER
* - Include ghost mixin in order to allow extension
* 	in order to get a more compact compiled css
***/
%ghostButtonPositive {
  @include ghostButtonPositive;
}

/*** GHOST BUTTON WITH ICON ***/
@mixin ghostIconButtonPositive {
  @extend %ghostButtonPositive;
  @extend %arrowbuttons;

  // TODO(icon-migration): remove definition because icons take color from button
  .sbb-svgsprite-icon {
    @include svgIconColor($buttonGhostColorHover);
  }

  // TODO(icon-migration): remove definition because icons take color from button
  &:hover,
  &:focus {
    .sbb-svgsprite-icon {
      @include svgIconColor($buttonGhostColorHover);
    }
  }
}

/*** FRAMELESS BUTTON ***/
@mixin framelessButton($fontSize: $buttonSizeFontDefault) {
  background-color: transparent;
  border: none;
  color: $buttonFramelessColor;
  padding: 0;
  height: auto;
  width: auto;

  &:not(:disabled) {
    &:hover,
    &:focus {
      color: $buttonFramelessColorHover;
      background-color: transparent;
      border: none;
    }
  }
}

/***
* FRAMELESS BUTTON PLACEHOLDER
* - Include frameless mixin in order to allow extension
* 	in order to get a more compact compiled css
***/
%framelessButton {
  @include framelessButton;
}

/*** FRAMELESS BUTTON WITH ICON ***/
@mixin framelessIconButton($fontSize: $sizeFontDefault) {
  @extend %framelessButton;
  @extend %arrowbuttons;

  padding-right: toEm(private-div(30, $fontSize));

  // TODO(icon-migration): remove definition because icons take color from button
  .sbb-svgsprite-icon {
    @include svgIconColor($buttonFramelessColor);
  }

  &:hover,
  &:focus {
    padding-left: toEm(private-div(30, $fontSize));
    padding-right: 0;

    // TODO(icon-migration): remove definition because icons take color from button
    .sbb-svgsprite-icon {
      @include svgIconColor($buttonFramelessColorHover);
    }
  }
}

/*** DISABLED BUTTON ***/
@mixin disabledButton {
  @extend %ghostButtonPositive;

  border-color: $buttonDisabledBorderColor;
  text-decoration: line-through;

  .sbb-svgsprite-icon {
    display: none;
  }
}

@mixin buttonTypes {
  // Primary button with icon
  &-primary.sbb-button-has-icon {
    @include primaryIconButton;
  }

  // Primary button NO icon
  &-primary:not(.sbb-button-has-icon) {
    @include primaryButton;
  }

  // Secondary button with icon
  &-secondary.sbb-button-has-icon {
    @include secondaryIconButton;
  }

  // Secondary button NO icon
  &-secondary:not(.sbb-button-has-icon) {
    @include secondaryButton;
  }

  // Ghost button with icon
  &-ghost.sbb-button-has-icon {
    @include ghostIconButtonPositive;
  }

  // Ghost button NO icon
  &-ghost:not(.sbb-button-has-icon) {
    @include ghostButtonPositive;
  }
}

@mixin sbbButtonSecondaryDisabledBusiness {
  background-color: rgba($buttonSecondaryBgColor, 0.4);
  color: rgba($buttonSecondaryColor, 0.5);
}

// Form Styles
// ----------------------------------------------------------------------------------------------------
$inputFieldColor: if($sbbBusiness, $sbbColorIron, $sbbColorGrey);
$inputFieldDisabledColor: if($sbbBusiness, $sbbColorGranite, $sbbColorGrey);
$labelColor: if($sbbBusiness, $sbbColorGranite, $sbbColorGrey);

@mixin disabledelement {
  opacity: 0.5;
}

@mixin readonlyelement {
  @include publicOnly() {
    background: $sbbColorMilk;
    border-color: $sbbColorAluminum;
  }

  @include businessOnly() {
    background: transparent;
    border-color: transparent;
  }
}

@mixin inputFieldPadding() {
  @include publicOnly() {
    padding: 10px 14px 11px;

    @include mq($from: desktop4k) {
      padding: toPx(10 * $scalingFactor4k) toPx(14 * $scalingFactor4k) toPx(11 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      padding: toPx(10 * $scalingFactor5k) toPx(14 * $scalingFactor5k) toPx(11 * $scalingFactor5k);
    }
  }

  @include businessOnly() {
    padding: 6px 7px 8px;
  }
}

@mixin inputfields {
  @include ellipsis;
  @include placeholder($sbbColorStorm);
  @include disabledinputfields;
  @include readonlyinputfields;
  @include inputFieldPadding();

  outline: none;
  background: $sbbColorWhite;
  border: 2px solid $sbbColorGraphite;
  border-radius: 2px;
  color: $inputFieldColor;
  line-height: 23px;
  font-size: pxToRem($sizeFontDefault);
  -webkit-appearance: none;
  min-height: if($sbbBusiness, 36px, 48px);

  &::-ms-clear {
    display: none;
  }

  &:focus {
    border-color: $inputFieldColor;
  }

  @include businessOnly() {
    border-width: 1px;
    line-height: toPx(20);
  }

  @include publicOnly() {
    @include mq($from: desktop4k) {
      border-width: toPx(2 * $scalingFactor4k);
      border-radius: toPx(2 * $scalingFactor4k);
      font-size: toPx($sizeFontDefault4k);
      line-height: 35px;
    }

    @include mq($from: desktop5k) {
      border-width: toPx(2 * $scalingFactor5k);
      border-radius: toPx(2 * $scalingFactor5k);
      font-size: pxToRem($sizeFontDefault5k);
      line-height: 45px;
    }
  }

  // We want to provide the error styles both for invalid state
  // in a sbb-form-field and also for Angular Form Validation.
  .sbb-form-field-invalid &:not([aria-expanded='true']),
  &.ng-touched.ng-invalid:not([aria-expanded='true']) {
    color: $sbbColorError;
    border-color: $sbbColorError;
  }
}

@mixin disabledinputfields {
  &:disabled {
    background-color: $sbbColorMilk;
    border-color: $sbbColorAluminum;
    color: $inputFieldDisabledColor;
    -webkit-text-fill-color: $inputFieldDisabledColor;
    opacity: 1;
  }
}

@mixin readonlyinputfields {
  &[readonly],
  &.sbb-readonly {
    &,
    &:focus {
      @include readonlyelement;
    }
  }
}

@mixin label {
  letter-spacing: 0;
  outline: 0;
  resize: none;
  background-color: transparent;
  font-family: $fontSbbRoman;
  font-size: pxToRem(13);
  line-height: pxToRem(16);
  color: $labelColor;
  display: block;

  @include publicOnly() {
    @include mq($from: desktop4k) {
      font-size: pxToRem(13 * $scalingFactor4k);
      line-height: pxToRem(16 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      font-size: pxToRem(13 * $scalingFactor5k);
      line-height: pxToRem(16 * $scalingFactor5k);
    }
  }
}

@mixin formlabel {
  color: $labelColor;
  font-size: pxToEm(13);
}

@mixin inputField() {
  display: inline-block;

  font-family: $fontSbbRoman;
  font-size: toEm(private-div(15, $sizeFontDefault));
  border: 1px solid $sbbColorPlatinum;

  @include mq($from: tabletPortrait) {
    font-size: toEm(private-div(14, $sizeFontDefault));
  }

  &:focus {
    border-color: $inputFieldColor;
  }
}

@mixin textareaBase() {
  width: 100%;
  white-space: pre-wrap;
  overflow: auto;

  &:disabled {
    opacity: 1;
  }
}

@mixin textarea() {
  @include inputfields;
  @include disabledinputfields;
  @include textareaBase();
}

$checkBoxContainerBorder: if($sbbBusiness, 1, 2);

$checkboxRadioButtonGreyColor: if($sbbBusiness, $sbbColorGranite, $sbbColorGrey);
$checkboxRadioButtonFocusedLabelColor: if($sbbBusiness, $sbbColorIron, $sbbColorGrey);
$checkboxRadioButtonCheckedLabelColor: if($sbbBusiness, $sbbColorIron, $sbbColorBlack);
$checkboxRadioButtonDisabledLabelColor: if($sbbBusiness, $sbbColorStorm, $sbbColorGrey);
$checkboxRadioButtonPanelHeight: 64;
$checkboxRadioButtonPanelHeightWithSubtitle: 88;
$checkboxRadioButtonPanelBorderRadius: 2;
$checkboxRadioButtonPanelHeaderMargin: 24;
$checkboxRadioButtonPanelPadding: 20;
$checkboxRadioButtonPanelBorderSize: 1;
$checkboxRadioButtonPanelSubtitleFontSize: 13;
$checkboxRadioButtonPanelHeaderPaddingLeft: 28;
$checkboxRadioButtonPanelImageWidth: 64;
$checkboxRadioButtonPanelImageHeight: 40;
$checkboxRadioButtonVerticalSpace: if($sbbBusiness, 3, 16);
$checkboxRadioButtonHorizontalSpace: if($sbbBusiness, 15, 32);

@mixin checkboxContainer() {
  width: toPx(20);
  min-width: toPx(20);
  height: toPx(20);
  min-height: toPx(20);
  background-color: $sbbColorWhite;
  border: toPx($checkBoxContainerBorder) solid $sbbColorGraphite;
  border-radius: toPx(2);
  margin-right: toPx(8);
  margin-top: toPx(2.5);

  @include publicOnly() {
    @include mq($from: desktop4k) {
      width: toPx(20 * $scalingFactor4k);
      min-width: toPx(20 * $scalingFactor4k);
      height: toPx(20 * $scalingFactor4k);
      min-height: toPx(20 * $scalingFactor4k);
      border: toPx(2 * $scalingFactor4k) solid $sbbColorGraphite;
      margin-right: toPx(8 * $scalingFactor4k);
      margin-top: toPx(2.5 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      width: toPx(20 * $scalingFactor5k);
      min-width: toPx(20 * $scalingFactor5k);
      height: toPx(20 * $scalingFactor5k);
      min-height: toPx(20 * $scalingFactor5k);
      border: toPx(2 * $scalingFactor5k) solid $sbbColorGraphite;
      margin-right: toPx(8 * $scalingFactor5k);
      margin-top: toPx(2.5 * $scalingFactor5k);
    }
  }

  @include businessOnly() {
    border-width: 1px;
    margin-top: toPx(1);
  }

  .sbb-checkbox-checked {
    color: if($sbbBusiness, $sbbColorIron, $sbbColorRed);
    line-height: 0;
    height: 100%;
    width: 100%;
    border-radius: toPx(2);
    transform: scale(1.3);
    transition: opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
}

@mixin checkboxBase {
  display: flex;
  position: relative; // assure absolute positioned native input is close to the label!
  align-items: flex-start;

  @include publicOnly() {
    @include mq($from: desktop4k) {
      font-size: pxToRem($sizeFontDefault4k);
    }

    @include mq($from: desktop5k) {
      font-size: pxToRem($sizeFontDefault5k);
    }
  }

  & > input[type='checkbox'] {
    & + .sbb-checkbox-container {
      @include checkboxContainer();

      & > .sbb-checkbox-checked {
        display: none;
      }

      & + .sbb-checkbox-label-content {
        @include businessOnly() {
          line-height: toEm(private-div(21, $sizeFontDefault));
        }

        color: $checkboxRadioButtonGreyColor;
        transition: color 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      }
    }

    &:focus + .sbb-checkbox-container {
      border-color: $checkboxRadioButtonFocusedLabelColor;
    }

    &:checked + .sbb-checkbox-container,
    &[checked] + .sbb-checkbox-container {
      & > .sbb-checkbox-checked {
        display: block;
      }

      & + .sbb-checkbox-label-content {
        color: $checkboxRadioButtonCheckedLabelColor;
      }
    }

    @include businessOnly() {
      &:indeterminate + .sbb-checkbox-container,
      &[indeterminate] + .sbb-checkbox-container {
        &::before {
          content: '';
          position: relative;
          height: 1px;
          width: 10px;
          left: 4px;
          top: 8.5px;
          border: 1px solid $sbbColorGranite;
          display: block;
        }

        & > .sbb-checkbox-checked {
          display: none;
        }

        & + .sbb-checkbox-label-content {
          color: $sbbColorBlack;
        }
      }
    }

    &:disabled + .sbb-checkbox-container,
    &[disabled] + .sbb-checkbox-container {
      border-color: $sbbColorAluminum;
      background-color: $sbbColorMilk;

      & > .sbb-checkbox-checked {
        color: $checkboxRadioButtonGreyColor;
      }

      & + .sbb-checkbox-label-content {
        color: $checkboxRadioButtonDisabledLabelColor;
      }
    }
  }
}

@mixin radioButtonBase {
  display: flex;
  position: relative; // assure absolute positioned native input is close to the label!
  align-items: flex-start;

  @include publicOnly() {
    @include mq($from: desktop4k) {
      font-size: pxToRem($sizeFontDefault4k);
    }

    @include mq($from: desktop5k) {
      font-size: pxToRem($sizeFontDefault5k);
    }
  }

  & > input[type='radio'] {
    & + .sbb-radio-circle-container {
      width: toPx(20);
      min-width: toPx(20);
      height: toPx(20);
      min-height: toPx(20);
      background-color: $sbbColorWhite;

      @include businessOnly() {
        margin-top: 0;
        border: toPx(1) solid $sbbColorGraphite;
      }

      @include publicOnly() {
        margin-top: toPx(2.5);
        border: toPx(2) solid $sbbColorGraphite;

        @include mq($from: desktop4k) {
          width: toPx(20 * $scalingFactor4k);
          min-width: toPx(20 * $scalingFactor4k);
          height: toPx(20 * $scalingFactor4k);
          min-height: toPx(20 * $scalingFactor4k);
          border: toPx(2 * $scalingFactor4k) solid $sbbColorGraphite;
          margin-right: toPx(8 * $scalingFactor4k);
          margin-top: toPx(2.5 * $scalingFactor4k);
        }

        @include mq($from: desktop5k) {
          width: toPx(20 * $scalingFactor5k);
          min-width: toPx(20 * $scalingFactor5k);
          height: toPx(20 * $scalingFactor5k);
          min-height: toPx(20 * $scalingFactor5k);
          border: toPx(2 * $scalingFactor5k) solid $sbbColorGraphite;
          margin-right: toPx(8 * $scalingFactor5k);
          margin-top: toPx(2.5 * $scalingFactor5k);
        }
      }

      border-radius: 50%;
      margin-right: toPx(8);

      .sbb-radio-circle-checked {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        transform: scale(0.65);
        transition: opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);

        @include publicOnly() {
          background-color: $sbbColorRed;
        }

        @include businessOnly() {
          background-color: $sbbColorIron;
        }
      }

      & > .sbb-radio-circle-checked {
        display: none;
      }

      & + .sbb-radio-label-content {
        user-select: auto;
        color: $checkboxRadioButtonGreyColor;
        transition: color 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);

        @include businessOnly() {
          padding-top: toPx(2);
          padding-bottom: toPx(3);
          line-height: pxToEm(15px);
        }
      }
    }

    &:focus + .sbb-radio-circle-container {
      border-color: $checkboxRadioButtonFocusedLabelColor;
    }

    &:checked + .sbb-radio-circle-container,
    &[checked] + .sbb-radio-circle-container {
      & > .sbb-radio-circle-checked {
        display: block;
      }

      & + .sbb-radio-label-content {
        color: $checkboxRadioButtonCheckedLabelColor;
      }
    }

    &:disabled + .sbb-radio-circle-container,
    &[disabled] + .sbb-radio-circle-container {
      border-color: $sbbColorAluminum;
      background-color: $sbbColorMilk;

      & > .sbb-radio-circle-checked {
        background-color: $checkboxRadioButtonGreyColor;
      }

      & + .sbb-radio-label-content {
        color: $checkboxRadioButtonDisabledLabelColor;
      }
    }
  }
}

@mixin checkboxRadioButtonPanel {
  .sbb-checkbox-radio-button-panel {
    border: toPx($checkboxRadioButtonPanelBorderSize) solid $sbbColorMilk;
    background-color: $sbbColorMilk;
    font-size: toPx($sizeFontDefault);
    width: 100%;
    min-height: toPx($checkboxRadioButtonPanelHeight);
    border-radius: toPx($checkboxRadioButtonPanelBorderRadius);
    display: flex;
    transition: border-color 0.15s ease-in-out;
    user-select: none;
    position: relative;

    &-checked {
      background-color: $sbbColorWhite;
      border: solid toPx($checkboxRadioButtonPanelBorderSize) $sbbColorBlack;
      color: $sbbColorBlack;
    }

    @include mq($from: desktop4k) {
      font-size: toPx($sizeFontDefault * $scalingFactor4k);
      height: toPx($checkboxRadioButtonPanelHeight * $scalingFactor4k);
      border: toPx($checkboxRadioButtonPanelBorderSize * $scalingFactor4k) solid $sbbColorMilk;
      border-radius: toPx($checkboxRadioButtonPanelBorderRadius * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      font-size: toPx($sizeFontDefault * $scalingFactor5k);
      height: toPx($checkboxRadioButtonPanelHeight * $scalingFactor5k);
      border: toPx($checkboxRadioButtonPanelBorderSize * $scalingFactor5k) solid $sbbColorMilk;
      border-radius: toPx($checkboxRadioButtonPanelBorderRadius * $scalingFactor5k);
    }

    &-has-subtitle {
      min-height: toPx($checkboxRadioButtonPanelHeightWithSubtitle);
      @include mq($from: desktop4k) {
        min-height: toPx($checkboxRadioButtonPanelHeightWithSubtitle * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        min-height: toPx($checkboxRadioButtonPanelHeightWithSubtitle * $scalingFactor5k);
      }
    }

    &-disabled {
      @include checkboxRadioButtonPanelDisabled;
    }

    .sbb-checkbox-radio-button-panel-header {
      @include radioButtonBase;
    }

    .sbb-checkbox-radio-button-panel-multiple-header {
      @include checkboxBase;
    }

    .sbb-checkbox-radio-button-panel-header,
    .sbb-checkbox-radio-button-panel-multiple-header {
      padding: toPx($checkboxRadioButtonPanelPadding);

      @include mq($from: desktop4k) {
        padding: toPx($checkboxRadioButtonPanelPadding * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        padding: toPx($checkboxRadioButtonPanelPadding * $scalingFactor5k);
      }
    }

    .sbb-checkbox-radio-button-panel-header-subtitle {
      color: $sbbColorGrey;
      font-size: toPx($checkboxRadioButtonPanelSubtitleFontSize);

      @include mq($from: desktop4k) {
        font-size: toPx($checkboxRadioButtonPanelSubtitleFontSize * $scalingFactor4k);
      }
      @include mq($from: desktop5k) {
        font-size: toPx($checkboxRadioButtonPanelSubtitleFontSize * $scalingFactor5k);
      }
    }
  }
}

@mixin checkboxRadioButtonPanelDisabled {
  color: $sbbColorGrey;
  background-color: $sbbColorWhite;
  border: toPx($checkboxRadioButtonPanelBorderSize) solid $sbbColorMilk;
  @include mq($from: desktop4k) {
    border: toPx($checkboxRadioButtonPanelBorderSize * $scalingFactor4k) solid $sbbColorMilk;
  }
  @include mq($from: desktop5k) {
    border: toPx($checkboxRadioButtonPanelBorderSize * $scalingFactor5k) solid $sbbColorMilk;
  }
}

@mixin checkboxRadioButtonPanelImage {
  &:not(:empty) {
    width: toPx($checkboxRadioButtonPanelImageWidth);
    height: toPx($checkboxRadioButtonPanelImageHeight);
    margin-left: auto;
    align-self: center;
    padding-right: toPx($checkboxRadioButtonPanelPadding);

    @include mq($from: desktop4k) {
      width: toPx($checkboxRadioButtonPanelImageWidth * $scalingFactor4k);
      height: toPx($checkboxRadioButtonPanelImageHeight * $scalingFactor4k);
      padding-right: toPx($checkboxRadioButtonPanelPadding * $scalingFactor4k);
    }
    @include mq($from: desktop5k) {
      width: toPx($checkboxRadioButtonPanelImageWidth * $scalingFactor5k);
      height: toPx($checkboxRadioButtonPanelImageHeight * $scalingFactor5k);
      padding-right: toPx($checkboxRadioButtonPanelPadding * $scalingFactor5k);
    }
    * {
      max-width: 100%;
      max-height: 100%;
    }
  }
}

@mixin checkboxRadioButtonVerticalSpacing($selector) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;

  #{$selector} + #{$selector} {
    margin-top: toPx($checkboxRadioButtonVerticalSpace);

    @include publicOnly() {
      @include mq($from: desktop4k) {
        margin-top: toPx($checkboxRadioButtonVerticalSpace * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        margin-top: toPx($checkboxRadioButtonVerticalSpace * $scalingFactor5k);
      }
    }
  }
}

@mixin checkboxRadioButtonHorizontalSpacing($selector) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;

  #{$selector} {
    margin-right: toPx($checkboxRadioButtonHorizontalSpace);

    @include publicOnly() {
      @include mq($from: desktop4k) {
        margin-right: toPx($checkboxRadioButtonHorizontalSpace * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        margin-right: toPx($checkboxRadioButtonHorizontalSpace * $scalingFactor5k);
      }
    }

    &:last-of-type {
      margin-right: 0;
    }
  }
}

$autocompleteTransition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
  opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
$autocompleteBg: $sbbColorWhite;
$autocompleteBorderWidth: if($sbbBusiness, 1px, 2px);
$autocompleteBorder: if(
  $sbbBusiness,
  $autocompleteBorderWidth solid $sbbColorIron,
  $autocompleteBorderWidth solid $sbbColorGrey
);
$autocompleteBorderRadius: 2px;
$autocompleteBorderTopReverse: $autocompleteBorder;
$autocompleteShadowWidth: if($sbbBusiness, 4px, 8px);
$autocompleteInputActiveBorderBottomColor: $sbbColorCloud;
$autocompleteInputActiveBorderWidth: 1px;
$autocompleteAndOptionPaddingX: if($sbbBusiness, 8px, 16px);
$autocompletePaddingBottom: if($sbbBusiness, 4px, 18px);
$autocompletePaddingX: if($sbbBusiness, 8px, 16px);

$optionMultipleCheckboxPaddingLeft: if($sbbBusiness, 8px, 16px);
$optionMultipleNoCheckboxPaddingLeft: if($sbbBusiness, 8px, 14px);
$optionMarginY: if($sbbBusiness, 4px, 10px);
$optionGroupItemPaddingLeft: if($sbbBusiness, 16px, 24px);
$optionAndAutocompleteColor: if($sbbBusiness, $sbbColorIron, $sbbColorGrey);
$optionHoverColor: if($sbbBusiness, $sbbColorRed125, $sbbColorRed);
$optionSelectedColor: $sbbColorBlack;

@mixin autocompleteBase() {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: $autocompleteBg;
  border: $autocompleteBorder;
  transition: $autocompleteTransition;
  color: $optionAndAutocompleteColor;

  &.sbb-autocomplete-visible {
    visibility: visible;
  }

  &.sbb-autocomplete-hidden {
    visibility: hidden;
  }

  @include publicOnly() {
    @include mq($from: desktop4k) {
      border-width: toPx($autocompleteBorderWidth * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      border-width: toPx($autocompleteBorderWidth * $scalingFactor5k);
    }
  }

  sbb-option-group {
    @include optionGroupBase;
  }
}

@mixin autocompleteCombinedBoxShadows($mode: default, $scalingFactor: 1) {
  $sign: 1;
  @if $mode == reverse {
    $sign: -1;
  }
  box-shadow: autocompleteBoxShadow($sign, $scalingFactor),
    horizontalBorderBoxShadow(-$sign, $scalingFactor);
}

@function autocompleteBoxShadow($sign, $scalingFactor) {
  @return 0 toPx($sign * $autocompleteShadowWidth * $scalingFactor) 0 rgba(0, 0, 0, 0.15);
}

@function horizontalBorderBoxShadow($sign, $scalingFactor) {
  @return 0
    toPx($sign * ($autocompleteBorderWidth + $autocompleteInputActiveBorderWidth) * $scalingFactor)
    0 toPx(-$autocompleteBorderWidth * $scalingFactor) $autocompleteInputActiveBorderBottomColor;
}

@mixin autocompleteOffsetCorrection($mode: default, $scalingFactor: 1) {
  $sign: -1;
  @if $mode == reverse {
    $sign: 1;
  }
  $offset-top: $sign * ($autocompleteBorderWidth - $autocompleteInputActiveBorderWidth) *
    $scalingFactor;

  @if $offset-top < 0 {
    $offset-top: $offset-top - 0.05; // better rendering e.g. in 4k mode
  }
  @if $offset-top > 0 {
    $offset-top: ceil($offset-top);
  }
  position: relative;
  top: toPx($offset-top);
}

@mixin autocompleteDirectionalRules($mode: default) {
  @if $mode == default {
    border-bottom-left-radius: $autocompleteBorderRadius;
    border-bottom-right-radius: $autocompleteBorderRadius;
    border-top: none;
    @include autocompleteCombinedBoxShadows();
    @include autocompleteOffsetCorrection();

    @include publicOnly() {
      @include mq($from: desktop4k) {
        border-bottom-left-radius: toPx($autocompleteBorderRadius * $scalingFactor4k);
        border-bottom-right-radius: toPx($autocompleteBorderRadius * $scalingFactor4k);
        @include autocompleteCombinedBoxShadows($scalingFactor: $scalingFactor4k);
        @include autocompleteOffsetCorrection($scalingFactor: $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        border-bottom-left-radius: toPx($autocompleteBorderRadius * $scalingFactor5k);
        border-bottom-right-radius: toPx($autocompleteBorderRadius * $scalingFactor5k);
        @include autocompleteCombinedBoxShadows($scalingFactor: $scalingFactor5k);
        @include autocompleteOffsetCorrection($scalingFactor: $scalingFactor5k);
      }
    }
  } @else if $mode == reverse {
    border-radius: $autocompleteBorderRadius $autocompleteBorderRadius 0 0;
    border-top: $autocompleteBorderTopReverse;
    border-bottom: none;
    @include autocompleteCombinedBoxShadows($mode: reverse);
    @include autocompleteOffsetCorrection($mode: reverse);

    @include publicOnly() {
      @include mq($from: desktop4k) {
        border-top-left-radius: toPx($autocompleteBorderRadius * $scalingFactor4k);
        border-top-right-radius: toPx($autocompleteBorderRadius * $scalingFactor4k);
        border-top-width: toPx($autocompleteBorderRadius * $scalingFactor4k);
        @include autocompleteCombinedBoxShadows($mode: reverse, $scalingFactor: $scalingFactor4k);
        @include autocompleteOffsetCorrection($mode: reverse, $scalingFactor: $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        border-top-left-radius: toPx($autocompleteBorderRadius * $scalingFactor5k);
        border-top-right-radius: toPx($autocompleteBorderRadius * $scalingFactor5k);
        border-top-width: toPx($autocompleteBorderRadius * $scalingFactor5k);
        @include autocompleteCombinedBoxShadows($mode: reverse, $scalingFactor: $scalingFactor5k);
        @include autocompleteOffsetCorrection($mode: reverse, $scalingFactor: $scalingFactor5k);
      }
    }
  }
}

@mixin autocompleteInputActive($mode: default) {
  @if $mode == default {
    @include autocompleteInputActiveDefault();
  } @else if $mode == reverse {
    @include autocompleteInputActiveReverse();
  }
}

@mixin autocompleteInputActiveDefault() {
  border-radius: $autocompleteBorderRadius $autocompleteBorderRadius 0 0;
  border-color: $optionAndAutocompleteColor;
}

@mixin autocompleteInputActiveReverse() {
  border-radius: 0 0 $autocompleteBorderRadius $autocompleteBorderRadius;
  border-color: $optionAndAutocompleteColor;
}

@mixin optionGroupBase {
  position: relative;
  display: block;
  color: $sbbColorMetal;

  sbb-option {
    padding-left: $optionGroupItemPaddingLeft;

    &:first-of-type {
      @if $sbbBusiness {
        padding-top: $optionMarginY;
      } @else {
        margin-top: 0;
        padding-top: 0;
      }
    }
  }
  .sbb-optgroup-label {
    padding-left: $autocompleteAndOptionPaddingX;
    padding-right: $autocompleteAndOptionPaddingX;

    @if $sbbBusiness {
      padding-top: 8px;
      padding-bottom: 0;
    } @else {
      padding-top: 14px;
      padding-bottom: 14px;

      @include mq($from: desktop4k) {
        padding-top: toPx(17px);
        padding-bottom: toPx(17px);
      }

      @include mq($from: desktop5k) {
        padding-top: toPx(20px);
        padding-bottom: toPx(20px);
      }
    }

    @include label;
  }
}

@mixin optionGroupDivider() {
  sbb-option-group + sbb-option-group,
  sbb-option + sbb-option-group,
  sbb-option-group + sbb-option {
    border-top: 1px solid $autocompleteInputActiveBorderBottomColor;

    @include publicOnly() {
      @include mq($from: desktop4k) {
        border-top-width: toPx(1 * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        border-top-width: toPx(1 * $scalingFactor5k);
      }
    }
  }
}

@mixin optionBorderLeft($color) {
  &::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    left: 0;
    top: 0;
    background-color: $color;
  }
}

@mixin optionSelected() {
  color: $optionSelectedColor;
  @include svgIconColor(
    $optionSelectedColor
  ); // TODO(icon-migration): remove definition because new icons inherit colors

  @include businessOnly() {
    background-color: $sbbColorCloud;
    @include optionBorderLeft($optionSelectedColor);
  }
}

@mixin optionBase($selectMode: false) {
  @include ellipsis;

  position: relative;
  display: block;
  text-decoration: none;
  padding: toPx(4) $autocompleteAndOptionPaddingX;
  text-align: left;
  max-width: 100%;
  cursor: pointer;
  outline: 0;
  color: $optionAndAutocompleteColor;
  @include svgIconColor(
    $optionAndAutocompleteColor
  ); // TODO(icon-migration): remove definition because new icons inherit colors

  @if $selectMode == true {
    cursor: default;
  }

  &:first-of-type {
    margin-top: $optionMarginY;
  }
  &:last-of-type {
    margin-bottom: $optionMarginY;
  }

  line-height: if($sbbBusiness, pxToRem(20), pxToRem(23));

  @include publicOnly() {
    @include mq($from: desktop4k) {
      font-size: toPx($sizeFontDefault * $scalingFactor4k);
      line-height: pxToRem(23 * $scalingFactor4k);
      padding: toPx(4 * $scalingFactor4k) toPx($autocompleteAndOptionPaddingX * $scalingFactor4k);

      &:first-of-type {
        margin-top: toPx($optionMarginY * $scalingFactor4k);
      }
      &:last-of-type {
        margin-bottom: toPx($optionMarginY * $scalingFactor4k);
      }
    }
    @include mq($from: desktop5k) {
      font-size: toPx($sizeFontDefault * $scalingFactor5k);
      line-height: pxToRem(23 * $scalingFactor5k);
      padding: toPx(4 * $scalingFactor5k) toPx($autocompleteAndOptionPaddingX * $scalingFactor5k);

      &:first-of-type {
        margin-top: toPx($optionMarginY * $scalingFactor5k);
      }
      &:last-of-type {
        margin-bottom: toPx($optionMarginY * $scalingFactor5k);
      }
    }
  }

  &:not(.sbb-active) strong {
    color: $sbbColorBlack;
  }

  &.sbb-selected {
    @include optionSelected();
  }

  &:not(:disabled):not(.sbb-option-disabled):hover,
  &:not(:disabled):not(.sbb-option-disabled):focus,
  &:not(:disabled):not(.sbb-option-disabled):hover strong,
  &:not(:disabled):not(.sbb-option-disabled):focus strong,
  &.sbb-active {
    color: $optionHoverColor;
    @include svgIconColor(
      $optionHoverColor
    ); // TODO(icon-migration): remove definition because new icons inherit colors

    @include businessOnly() {
      background-color: $sbbColorMilk;
      @include optionBorderLeft($optionHoverColor);
    }
  }

  .sbb-option-text {
    display: inline-block;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sbb-icon:not(.sbb-checkbox-checked),
  .sbb-icon-component:not(.sbb-checkbox-checked) {
    // TODO(icon-migration): remove '.sbb-icon-component' because new icons inherit colors (also color: can be removed)
    line-height: 0;
    margin: if($sbbBusiness, pxToRem(-9) 0 pxToRem(-9) 0, pxToRem(-7) 0 pxToRem(-7) 0);
    transform: translateY(pxToRem(7));
    width: 24px;
    height: 24px;

    @include publicOnly() {
      @include mq($from: desktop4k) {
        margin-top: pxToRem(-12);
        margin-bottom: pxToRem(-12);
        transform: translateY(pxToRem(7 * $scalingFactor4k));
        width: 36px;
        height: 36px;
      }

      @include mq($from: desktop5k) {
        margin-top: pxToRem(-15);
        margin-bottom: pxToRem(-15);
        transform: translateY(pxToRem(7 * $scalingFactor5k));
        width: 48px;
        height: 48px;
      }
    }
  }

  > .sbb-icon:first-child:not(.sbb-checkbox-checked),
  > .sbb-icon-component:first-child:not(.sbb-checkbox-checked) {
    // TODO(icon-migration): remove '.sbb-icon-component' because new icons inherit colors (also color: can be removed)
    float: left; // used to ignore users whitespace and to ensure margin is correct
    margin-right: pxToRem(if($sbbBusiness, 8, 11));
    margin-left: pxToRem(if($sbbBusiness, 0, -1));

    @include publicOnly() {
      @include mq($from: desktop4k) {
        margin-right: pxToRem(11 * $scalingFactor4k);
        margin-left: pxToRem(-1 * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        margin-right: pxToRem(11 * $scalingFactor5k);
        margin-left: pxToRem(-1 * $scalingFactor5k);
      }
    }
  }
}

$sbbPanelBorder: 2px solid $sbbColorGrey;
$sbbPanelShadow: 0 8px 0 rgba(0, 0, 0, 0.15);
$sbbPanelShadowReverse: 0 -8px 0 rgba(0, 0, 0, 0.15);
$sbbPanelColor: $sbbColorGrey;
$sbbPanelPaddingX: 16px;
$sbbPanelPaddingTop: 14px;
$sbbPanelPaddingBottom: 14px;
$sbbPanelItemActiveColor: $sbbColorRed;
$sbbPanelFirstSelectedBarTop: 6;
$sbbPanelItemSelectedBarHeight: 22;
$sbbPanelItemSelectedBarWidth: 1;
$sbbPanelItemSelectedBarTop: 3;

@if $sbbBusiness {
  $sbbPanelBorder: 1px solid $sbbColorIron;
  $sbbPanelShadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  $sbbPanelShadowReverse: 0 -4px 0 rgba(0, 0, 0, 0.15);
  $sbbPanelColor: $sbbColorIron;
  $sbbPanelPaddingX: 8px;
  $sbbPanelPaddingTop: 8px;
  $sbbPanelPaddingBottom: 8px;
  $sbbPanelItemActiveColor: $sbbColorRed125;
}

@mixin panelBase() {
  position: relative;
  width: 100%;
  background-color: $sbbColorWhite;
  border: $sbbPanelBorder;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: $sbbPanelColor;

  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 0;
    border-bottom: 1px solid $sbbColorCloud;

    @include publicOnly() {
      @include mq($from: desktop4k) {
        border-bottom-width: toPx(1 * $scalingFactor4k);
      }

      @include mq($from: desktop5k) {
        border-bottom-width: toPx(1 * $scalingFactor5k);
      }
    }
  }

  &.sbb-visible {
    visibility: visible;
  }

  &.sbb-hidden {
    visibility: hidden;
  }

  @include publicOnly() {
    @include mq($from: desktop4k) {
      border: toPx(2 * $scalingFactor4k) solid $sbbColorGrey;
      box-shadow: 0 toPx(8 * $scalingFactor4k) 0 rgba(0, 0, 0, 0.15);
      border-top: none;

      &::after {
        border-bottom-width: toPx(1 * $scalingFactor4k);
      }
    }

    @include mq($from: desktop5k) {
      border: toPx(2 * $scalingFactor5k) solid $sbbColorGrey;
      box-shadow: 0 toPx(8 * $scalingFactor5k) 0 rgba(0, 0, 0, 0.15);
      border-top: none;
      &::after {
        border-bottom-width: toPx(1 * $scalingFactor5k);
      }
    }
  }
}

@mixin panelBelow() {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-top: none;
  box-shadow: $sbbPanelShadow;
  margin-top: -2px;

  @include publicOnly() {
    @include mq($from: desktop4k) {
      border-bottom-left-radius: toPx(2 * $scalingFactor4k);
      margin-top: toPx(-2 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      border-bottom-left-radius: toPx(2 * $scalingFactor5k);
      margin-top: toPx(-2 * $scalingFactor5k);
    }
  }

  &::after {
    top: 0;
    bottom: auto;
  }
}

@mixin panelAbove() {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top: $sbbPanelBorder;
  border-bottom: none;
  box-shadow: $sbbPanelShadowReverse;
  margin-top: auto;
  margin-bottom: -2px;

  @include publicOnly() {
    @include mq($from: desktop4k) {
      border-top-left-radius: toPx(2 * $scalingFactor4k);
      border-top-width: toPx(2 * $scalingFactor4k);
      margin-bottom: toPx(-2 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      border-top-left-radius: toPx(2 * $scalingFactor5k);
      border-top-width: toPx(2 * $scalingFactor5k);
      margin-bottom: toPx(-2 * $scalingFactor5k);
    }
  }

  &::after {
    top: auto;
    bottom: 0;
  }
}

@mixin panelItems() {
  @include buttonResetFrameless;
  @include optionBase;

  &.sbb-active {
    @include optionSelected;
  }

  &:disabled,
  &[disabled] {
    opacity: 0.5;
  }

  &:disabled,
  &[disabled],
  &[aria-disabled='true'] {
    user-select: none;
    cursor: default;
  }
}


// ----------------------------------------------------------------------------------------------------
// Custom Webfonts
// ----------------------------------------------------------------------------------------------------

@mixin sbbFonts() {
  @font-face {
    font-family: 'SBBWeb Bold';
    src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2') format('woff2'),
      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff') format('woff');
    font-display: swap;
  }

  @font-face {
    font-family: 'SBBWeb Light';
    src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2') format('woff2'),
      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff') format('woff');
    font-display: swap;
  }

  @font-face {
    font-family: 'SBBWeb Roman';
    src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2') format('woff2'),
      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff') format('woff');
    font-display: fallback;
  }

  @font-face {
    font-family: 'SBBWeb Thin';
    src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Thin.woff2') format('woff2'),
      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Thin.woff') format('woff');
    font-display: swap;
  }

  @font-face {
    font-family: 'SBBWeb Ultralight';
    src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-UltraLight.woff2') format('woff2'),
      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-UltraLight.woff') format('woff');
    font-display: swap;
  }
}

@mixin sbbInputFields() {
  input[type='email'],
  input[type='password'],
  input[type='search'],
  input[type='text'],
  input[type='number'],
  input[type='tel'],
  input[type='time'],
  input[type='datetime'],
  input[type='datetime-local'],
  input[type='url'],
  input:not([type]) {
    @include inputfields;
  }

  input[placeholder] {
    text-overflow: ellipsis;
  }

  input[type='number'],
  input[type='time'],
  input[type='datetime'],
  input[type='datetime-local'] {
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button,
    &::-webkit-clear-button {
      appearance: none;
      margin: 0;
      width: 0;
      padding: 0;
      background: transparent;
    }
  }
}

@mixin timeInputBase {
  text-align: center;

  @include publicOnly() {
    $timeInputWidth: 84;
    $timeInputHeight: 48;

    width: toPx($timeInputWidth);
    height: toPx($timeInputHeight);

    @include mq($from: desktop4k) {
      width: toPx($timeInputWidth * $scalingFactor4k);
      height: toPx($timeInputHeight * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      width: toPx($timeInputWidth * $scalingFactor5k);
      height: toPx($timeInputHeight * $scalingFactor5k);
    }
  }

  @include businessOnly() {
    width: 70px;
    height: 36px;
  }
}

@mixin nativeSelectBase {
  $selectArrowWidthHeight: 24;
  $selectNativeBackground: 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJfeDMwX18xXyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7ZmlsbDogJTIzNjY2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTcuNywxMC43TDguNCwxMGwzLjYsMy42bDMuNi0zLjZsMC43LDAuN0wxMiwxNUw3LjcsMTAuN3oiLz48L3N2Zz4=';
  $selectArrowRight: 12;
  $selectTriggerPaddingRight: 44;

  @include businessOnly() {
    $selectArrowRight: 6;
    $selectTriggerPaddingRight: 38;
  }

  @include inputfields;
  cursor: pointer;
  align-items: center;
  width: 100%;
  padding-right: toPx($selectTriggerPaddingRight);

  &:disabled {
    cursor: default;
  }

  &::-ms-expand {
    display: none;
  }

  background: url($selectNativeBackground) no-repeat;
  background-position: center right toPx($selectArrowRight);
  background-size: toPx($selectArrowWidthHeight) toPx($selectArrowWidthHeight);

  @include publicOnly() {
    @include mq($from: desktop4k) {
      background-size: toPx($selectArrowWidthHeight * $scalingFactor4k);
      background-position: center right toPx($selectArrowRight * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      background-size: toPx($selectArrowWidthHeight * $scalingFactor5k);
      background-position: center right toPx($selectArrowRight * $scalingFactor5k);
    }
  }
}

@mixin sbbTimeInputField() {
  input.sbb-time-input {
    @include timeInputBase;
  }
}

@mixin sbbSelect() {
  select {
    @include nativeSelectBase;
  }
}

@mixin sbbFieldset() {
  fieldset {
    @include fieldset;
  }
}

@mixin sbbTextarea() {
  textarea {
    @include textarea();
  }
}

@mixin sbbHeadings() {
  h1,
  .text-headline1 {
    @include headline1;
  }

  h2,
  .text-headline2 {
    @include headline2;
  }

  h3,
  .text-headline3 {
    @include headline3;
  }

  h4,
  .text-headline4 {
    @include headline4;
  }

  .text-lead {
    @include lead;
  }
}

// Links mixins
// ----------------------------------------------------------------------------------------------------

@mixin standardLink {
  color: $sbbColorBlack;
  line-height: pxToRem(23px);
  text-decoration: underline;
  text-decoration-skip-ink: auto; // -> read more about here https://medium.com/@iamhiwelo/improving-text-readability-for-dyslexic-users-with-skip-ink-underlines-bf52a2f3426b

  &:hover,
  &:focus {
    color: $sbbColorRed125;

    @media screen and (-ms-high-contrast: active) {
      color: windowText;

      &:before,
      &:after {
        border-color: windowText;
      }
    }
  }
}

@mixin sbbLink() {
  a {
    @include standardLink;
  }
}

@mixin sbbOverlay {
  .cdk-overlay-pane.sbb-overlay-panel {
    max-height: none;
  }
}

@mixin sbbParagraph() {
  p,
  .text-copy {
    @include copy;
  }
}

@mixin reset() {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  article,
  aside,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  nav,
  section {
    display: block;
  }

  html {
    background: $sbbColorBg;
    color: $sbbColorText;
    // !important is required, as arcgis defines its own font-family and we need to overwrite it.
    font-family: $fontSbbRoman !important;
    font-size: private-div($sizeFontBase, 16px) * 100%;
    line-height: $sizeLineHeightBase;

    @include fontSmoothing;

    b,
    strong,
    optgroup[label='*'] {
      font-family: $fontSbbBold;
      font-weight: normal;
    }
  }

  body {
    margin: 0;
  }

  // Suppress the focus outline on elements that cannot be accessed via keyboard.
  // This prevents an unwanted focus outline from appearing around elements that
  // might still respond to pointer events.
  //
  // Credit: https://github.com/suitcss/base
  [tabindex='-1']:focus {
    outline: 0 !important;
  }

  input,
  button,
  select,
  optgroup,
  textarea {
    margin: 0; // Remove the margin in Firefox and Safari
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  table {
    th,
    td {
      color: $sbbColorBlack;
      font-size: pxToEm($sizeFontDefault);
      line-height: 1.5;
      margin: 0.75em 0 0; // paragraph as default
    }
    th {
      font-family: $fontSbbBold;
      font-weight: 400;
    }
  }

  [hidden] {
    display: none !important;
  }

  .clearfix {
    @include clearfix;
  }
}

$thumbColor: $sbbColorPlatinum;
$trackColor: $sbbColorMilk;

@mixin scrollbarColor($thumbColor, $trackColor) {
  scrollbar-color: $thumbColor $trackColor;
  &::-webkit-scrollbar-thumb {
    background-color: $thumbColor;
  }
  &::-webkit-scrollbar-track {
    background-color: $trackColor;
  }
}

@mixin sbbScrollbar() {
  .sbb-scrollbar {
    @include scrollbarColor(transparent, transparent);

    &:hover,
    &.sbb-scrollbar-opaque {
      @include scrollbarColor($thumbColor, $trackColor);
    }

    scrollbar-width: thin;
    &::-webkit-scrollbar {
      width: 0.5rem;
      height: 0.5rem;
    }

    @supports (-webkit-touch-callout: none) {
      // Only applied on iOS devices.
      // Sets scrollbar on iOS devices invisible which solves a bug where a scrollbar
      // is wrongly visible for a short time (until clicking or scrolling) inside the sidebar.
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }

    &:hover::-webkit-scrollbar-thumb:hover {
      background-color: $sbbColorStorm;
    }
  }
}

$tableBg: $sbbColorWhite;
$tableTheadBgColor: $sbbColorCloud;
$tableTbodyStripesBgColor: $sbbColorMilk;
$tableTheadPadding: pxToEm(16);
$tableTbodyPadding: pxToEm(16);
$tableTheadCellPaddingMobile: pxToEm(29) pxToEm(12) pxToEm(30) pxToEm(12);
$tableTheadCellPadding: pxToEm(29) pxToEm(16) pxToEm(30) pxToEm(16);
$tableTbodyCellPaddingMobile: pxToEm(18) pxToEm(12) pxToEm(19) pxToEm(12);
$tableTbodyCellPadding: pxToEm(18) pxToEm(16) pxToEm(19) pxToEm(16);
$tableTrowHeightBusiness: pxToEm(36);
$tableCaptionColor: $sbbColorGrey;

@mixin tableCaption() {
  font-size: pxToEm(13);
  color: $tableCaptionColor;
}

@mixin table {
  border-spacing: 0;
  background-color: $tableBg;

  @if $sbbBusiness {
    width: 100%;
    border-collapse: collapse;
  } @else {
    padding-bottom: $tableTbodyPadding;

    @include mq($from: desktop4k) {
      font-size: toEm(1 * $scalingFactor4k);
    }

    @include mq($from: desktop5k) {
      font-size: toEm(1 * $scalingFactor5k);
    }
  }

  thead {
    @if $sbbBusiness {
      text-align: left;
      background-color: $sbbColorMilk;
      border-bottom: 1px solid $sbbColorAluminum;

      [dir='rtl'] & {
        text-align: right;
      }
    } @else {
      background-color: $tableTheadBgColor;

      > tr {
        th,
        td {
          padding: $tableTheadCellPaddingMobile;

          @include mq($from: tabletPortrait) {
            padding: $tableTheadCellPadding;

            &:first-child {
              border-left: $tableTheadPadding solid $tableTheadBgColor;
            }

            &:last-child {
              border-right: $tableTheadPadding solid $tableTheadBgColor;
            }
          }
        }
      }
    }
  }

  tbody {
    > tr {
      @if $sbbBusiness {
        background-color: $sbbColorWhite;
        border-bottom: 1px solid $sbbColorAluminum;

        &:hover {
          background-color: $sbbColorCloud;
        }
      } @else {
        &:nth-child(even) {
          background-color: $tableTbodyStripesBgColor;
        }

        th,
        td {
          padding: $tableTbodyCellPaddingMobile;

          @include mq($from: tabletPortrait) {
            padding: $tableTbodyCellPadding;

            &:first-child {
              border-left: $tableTheadPadding solid $tableBg;
            }

            &:last-child {
              border-right: $tableTheadPadding solid $tableBg;
            }
          }
        }
      }
    }
  }

  thead,
  tbody,
  tfoot {
    > tr {
      th,
      td {
        @if $sbbBusiness {
          height: $tableTrowHeightBusiness;
          padding: 0 $tableTbodyPadding;
          border-right: 1px solid $sbbColorAluminum;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            padding-left: $tableTbodyPadding;
            border-left: none;

            [dir='rtl'] & {
              padding-left: 0;
              padding-right: $tableTbodyPadding;
            }
          }

          &:last-child {
            padding-right: $tableTbodyPadding;
            border-right: none;

            [dir='rtl'] & {
              padding-right: 0;
              padding-left: $tableTbodyPadding;
            }
          }
        }
      }
    }
  }

  caption {
    @include tableCaption();
  }

  &-align-center {
    text-align: center;
  }

  &-align-left {
    text-align: left;

    /* th in IE11 won't inherit text-align: we apply it through selector */
    thead,
    tbody {
      > tr {
        th {
          text-align: left;
        }
      }
    }
  }

  &-align-right {
    text-align: right;

    /* th in IE11 won't inherit text-align: we apply it through selector */
    thead,
    tbody {
      > tr {
        th {
          text-align: right;
        }
      }
    }
  }
}

@mixin sbbTable() {
  .sbb-table {
    @include table();
  }
}