1444.css.map

{"version":3,"file":"1444.css","mappings":"AAwBA;AKFA","sources":["webpack://backpack/./packages/bpk-mixins/_spinners.scss","webpack://backpack/./packages/bpk-component-spinner/src/BpkSpinner.module.scss","webpack://backpack/./packages/bpk-mixins/_utils.scss","webpack://backpack/./packages/node_modules/@skyscanner/bpk-foundations-web/tokens/base.default.scss","webpack://backpack/./packages/bpk-mixins/_icons.scss","webpack://backpack/./packages/bpk-component-button/src/BpkButton.module.scss","webpack://backpack/./packages/bpk-mixins/_buttons.scss","webpack://backpack/./packages/bpk-mixins/_typography.scss"],"sourcesContent":["/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* stylelint-disable at-rule-disallowed-list */\n\n@use 'tokens';\n@use 'icons';\n@use 'utils';\n\n@keyframes bpk-keyframe-spin {\n  100% {\n    transform: rotate(1turn);\n  }\n}\n\n/// Small spinner.\n///\n/// @param {key} $spinner - The key of the desired SVG datauri from the $bpk-spinners map.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-spinner(spinner-sky-gray-tint-02);\n///   }\n\n@mixin bpk-spinner() {\n  width: tokens.bpk-spacing-base();\n  height: tokens.bpk-spacing-base();\n  animation: bpk-keyframe-spin 600ms linear infinite;\n}\n\n/// Large spinner. Modifies the bpk-spinner mixin.\n///\n/// @require {mixin} bpk-spinner\n///\n/// @example scss\n///   .selector {\n///     @include bpk-spinner(spinner-sky-gray-tint-02);\n///     @include bpk-spinner--lg();\n///   }\n\n@mixin bpk-spinner--lg() {\n  width: tokens.bpk-spacing-lg();\n  height: tokens.bpk-spacing-lg();\n}\n\n/// Extra large spinner. Modifies the bpk-spinner mixin.\n///\n/// @require {mixin} bpk-spinner\n///\n/// @example scss\n///   .selector {\n///     @include bpk-spinner(spinner-sky-gray-tint-02);\n///     @include bpk-spinner--xl();\n///   }\n\n@mixin bpk-spinner--xl() {\n  width: tokens.bpk-spacing-xl();\n  height: tokens.bpk-spacing-xl();\n}\n\n/// Align spinner to button. Modifies the bpk-spinner mixin.\n///\n/// @require {mixin} bpk-spinner\n///\n/// @example scss\n///   .selector {\n///     @include bpk-spinner();\n///     @include bpk-icon--align-to-button();\n///   }\n\n@mixin bpk-spinner--align-to-button() {\n  vertical-align: baseline;\n}\n\n/// Align spinner to large button. Modifies the bpk-spinner mixin.\n///\n/// @require {mixin} bpk-spinner\n///\n/// @example scss\n///   .selector {\n///     @include bpk-spinner();\n///     @include bpk-spinner--align-to-large-button();\n///   }\n\n@mixin bpk-spinner--align-to-large-button() {\n  @include icons.bpk-icon-lg--align-to-large-button;\n}\n","/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@use '../../bpk-mixins/tokens';\n@use '../../bpk-mixins/spinners';\n@use '../../bpk-mixins/utils';\n\n.bpk-spinner {\n  display: block;\n\n  @include spinners.bpk-spinner;\n\n  &--primary {\n    // Post colour adoption/rollout we will require to move the 'primary' style to be the same as dark and make dark (moving to primary/defautl) and light the only options\n    @include utils.bpk-themeable-property(\n      fill,\n      --bpk-spinner-primary-color,\n      tokens.$bpk-core-accent-day\n    );\n  }\n\n  &--light {\n    fill: tokens.$bpk-text-on-dark-day;\n  }\n\n  &--dark {\n    fill: tokens.$bpk-text-primary-day;\n  }\n\n  &--large {\n    @include spinners.bpk-spinner--lg;\n  }\n\n  &--extra-large {\n    @include spinners.bpk-spinner--xl;\n  }\n\n  &--align-to-button {\n    @include spinners.bpk-spinner--align-to-button;\n  }\n\n  &--align-to-large-button {\n    @include spinners.bpk-spinner--align-to-large-button;\n  }\n}\n","/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* stylelint-disable at-rule-disallowed-list */\n\n@use 'sass:string';\n@use 'tokens';\n\n////\n/// @group utils\n////\n\n/// Standard focus indicator for elements.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-focus-indicator();\n///   }\n\n@mixin bpk-focus-indicator {\n  outline: (tokens.$bpk-one-pixel-rem * 2) solid tokens.$bpk-text-link-day;\n  outline-offset: (tokens.$bpk-one-pixel-rem * 2);\n}\n\n/// Hide visually and from screen readers.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hidden();\n///   }\n\n@mixin bpk-hidden {\n  display: none !important; /* stylelint-disable-line declaration-no-important */\n}\n\n/// Hide only visually, but have it available for screen readers:\n///\n/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n///\n/// @example scss\n///   .selector {\n///     @include bpk-visually-hidden();\n///   }\n\n@mixin bpk-visually-hidden {\n  position: absolute;\n  width: 1px; /* stylelint-disable-line unit-disallowed-list */\n  height: 1px; /* stylelint-disable-line unit-disallowed-list */\n  margin: -1px; /* stylelint-disable-line unit-disallowed-list */\n  padding: 0;\n  border: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n}\n\n/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard:\n///\n/// https://www.drupal.org/node/897638\n///\n/// @require {mixin} bpk-visually-hidden\n///\n/// @example scss\n///   .selector {\n///     @include bpk-visually-hidden();\n///     @include bpk-visually-hidden--focusable();\n///   }\n\n@mixin bpk-visually-hidden--focusable {\n  &:active,\n  &:focus {\n    position: static;\n    width: auto;\n    height: auto;\n    margin: 0;\n    overflow: visible;\n    clip: auto;\n  }\n}\n\n/// Hide visually and from screen readers, but maintain layout.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-invisible();\n///   }\n\n@mixin bpk-invisible {\n  visibility: hidden;\n}\n\n/// Clearfix: contain floats.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-clearfix();\n///   }\n\n@mixin bpk-clearfix {\n  &::before,\n  &::after {\n    content: '';\n    display: table;\n  }\n\n  &::after {\n    clear: both;\n  }\n}\n\n/// Target RTL specific styles.\n///\n/// @content\n///\n/// @example scss\n///   .selector {\n///     @include bpk-rtl() {\n///       /* RTL scss goes here */\n///     }\n///   }\n\n@mixin bpk-rtl {\n  html[dir='rtl'] & {\n    @content;\n  }\n}\n\n/// :hover pseudo selector wrapper which prevents styles displaying on touch devices\n///\n/// @content\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hover() {\n///       /* Non-touch specific hover scss goes here */\n///     }\n///   }\n\n@mixin bpk-hover {\n  .bpk-no-touch-support &:hover:not(:active):not(:disabled) {\n    @content;\n  }\n\n  // Duplicating the above rule with `:global(...)` pseudo selector around the\n  // global `.bpk-no-touch-support` class to provide support for CSS modules.\n  // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped\n  //   leaving a duplicate rule which in turn will be 'uglified' out - so no worries there\n  // - when processed through node-sass only, the `:global(...)` pseudo selector will be left\n  //   intact and ignored by all browsers\n  // stylelint-disable-next-line selector-pseudo-class-no-unknown\n  :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) {\n    @content;\n  }\n}\n\n/// Target locale specific styles.\n///\n/// @content\n///\n/// @example scss\n///   .selector {\n///     @include bpk-locale('ja-JP') {\n///       /* ja-JP scss goes here */\n///     }\n///   }\n\n@mixin bpk-locale($locale) {\n  html[lang='#{$locale}'] &,\n  html[lang='#{string.to_lower_case($locale)}'] & {\n    @content;\n  }\n}\n\n/// Create a Backpack themeable property with\n/// fallback support for old browsers and when\n/// the CSS variable is not defined.\n///\n/// @content\n///\n/// @example scss\n///   .selector {\n///     @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color);\n///   }\n\n@mixin bpk-themeable-property($property, $variableName, $fallback) {\n  #{$property}: $fallback;\n  #{$property}: var($variableName, $fallback);\n}\n\n/// Create a property that uses the Backpack primary color blue-500.\n///\n/// @content\n///\n/// @example scss\n///   .selector {\n///     @include bpk-apply-primary-color-to(color);\n///   }\n@mixin bpk-apply-primary-color-to($property) {\n  @include bpk-themeable-property(\n    $property,\n    --bpk-primary-color,\n    tokens.$bpk-color-sky-blue\n  );\n}\n\n/// Replace part of a string with another string.\n///\n/// @param {string} $string - The string inside which the replacement should take place.\n/// @param {string} $search - The substring to be replaced.\n/// @param {string} $replace [''] - The string to replace $search.\n\n@function str-replace($string, $search, $replace: '') {\n  /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */\n  /* stylelint-disable-next-line scss/no-global-function-names */\n  $index: string.index($string, $search);\n\n  @if $index {\n    @return string.slice($string, 1, $index - 1) + $replace +\n      str-replace(\n        string.slice($string, $index + string.length($search)),\n        $search,\n        $replace\n      );\n  }\n\n  @return $string;\n}\n\n/// Increases the tappable area of the element to the\n/// minimum required for touch devices.\n///\n/// @content\n///\n/// @example scss\n///   .selector {\n///     @include bpk-touch-area;\n///   }\n\n@mixin bpk-touch-tappable {\n  position: relative;\n\n  &::before {\n    position: absolute;\n    /* stylelint-disable-next-line function-calc-no-invalid */\n    top: calc(\n      (-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%\n    );\n    /* stylelint-disable-next-line function-calc-no-invalid */\n    left: calc(\n      (-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%\n    );\n    content: '';\n    width: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm();\n    height: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm();\n  }\n}\n","/*\n * \n * Backpack - Skyscanner's Design System\n * \n * Copyright 2016-2021 Skyscanner Ltd\n * \n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n * \n *   http://www.apache.org/licenses/LICENSE-2.0\n * \n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n * \n */\n/// @group badge-colors\n$bpk-private-badge-background-normal-day: rgb(239, 243, 248) !default;\n/// @group badge-colors\n$bpk-private-badge-background-normal-night: rgb(36, 51, 70) !default;\n/// @group canvas-colors\n$bpk-canvas-day: rgb(255, 255, 255) !default;\n/// @group canvas-colors\n$bpk-canvas-night: rgb(1, 9, 19) !default;\n/// @group canvas-colors\n$bpk-canvas-contrast-day: rgb(239, 243, 248) !default;\n/// @group canvas-colors\n$bpk-canvas-contrast-night: rgb(1, 9, 19) !default;\n/// @group core-colors\n$bpk-core-eco-day: rgb(15, 161, 169) !default;\n/// @group core-colors\n$bpk-core-eco-night: rgb(15, 161, 169) !default;\n/// @group core-colors\n$bpk-core-accent-day: rgb(0, 98, 227) !default;\n/// @group core-colors\n$bpk-core-accent-night: rgb(132, 233, 255) !default;\n/// @group core-colors\n$bpk-core-primary-day: rgb(5, 32, 60) !default;\n/// @group core-colors\n$bpk-core-primary-night: rgb(5, 65, 132) !default;\n/// @group status-colors\n$bpk-status-success-spot-night: rgb(98, 241, 198) !default;\n/// @group status-colors\n$bpk-status-success-fill-night: rgb(177, 255, 231) !default;\n/// @group status-colors\n$bpk-status-success-spot-day: rgb(12, 131, 138) !default;\n/// @group status-colors\n$bpk-status-success-fill-day: rgb(212, 255, 242) !default;\n/// @group status-colors\n$bpk-status-danger-spot-night: rgb(255, 100, 156) !default;\n/// @group status-colors\n$bpk-status-warning-spot-night: rgb(254, 235, 135) !default;\n/// @group status-colors\n$bpk-status-danger-fill-night: rgb(255, 202, 221) !default;\n/// @group status-colors\n$bpk-status-warning-fill-night: rgb(251, 241, 187) !default;\n/// @group status-colors\n$bpk-status-danger-spot-day: rgb(231, 8, 102) !default;\n/// @group status-colors\n$bpk-status-warning-spot-day: rgb(245, 93, 66) !default;\n/// @group status-colors\n$bpk-status-danger-fill-day: rgb(255, 233, 249) !default;\n/// @group status-colors\n$bpk-status-warning-fill-day: rgb(255, 247, 207) !default;\n/// @group surface-colors\n$bpk-surface-hero-night: rgb(1, 9, 19) !default;\n/// @group surface-colors\n$bpk-surface-tint-night: rgba(255, 255, 255, 0.1) !default;\n/// @group surface-colors\n$bpk-surface-default-night: rgb(19, 29, 43) !default;\n/// @group surface-colors\n$bpk-surface-hero-day: rgb(0, 98, 227) !default;\n/// @group surface-colors\n$bpk-surface-tint-day: rgba(255, 255, 255, 0.1) !default;\n/// @group surface-colors\n$bpk-surface-default-day: rgb(255, 255, 255) !default;\n/// @group surface-colors\n$bpk-surface-contrast-night: rgb(1, 9, 19) !default;\n/// @group surface-colors\n$bpk-surface-contrast-day: rgb(5, 32, 60) !default;\n/// @group surface-colors\n$bpk-surface-elevated-night: rgb(36, 51, 70) !default;\n/// @group surface-colors\n$bpk-surface-low-contrast-night: rgb(36, 51, 70) !default;\n/// @group surface-colors\n$bpk-surface-subtle-night: rgb(36, 51, 70) !default;\n/// @group surface-colors\n$bpk-surface-elevated-day: rgb(255, 255, 255) !default;\n/// @group surface-colors\n$bpk-surface-highlight-night: rgb(36, 51, 70) !default;\n/// @group surface-colors\n$bpk-surface-low-contrast-day: rgb(245, 247, 250) !default;\n/// @group surface-colors\n$bpk-surface-subtle-day: rgb(227, 240, 255) !default;\n/// @group surface-colors\n$bpk-surface-highlight-day: rgb(224, 228, 233) !default;\n/// @group text-colors\n$bpk-text-on-dark-day: rgb(255, 255, 255) !default;\n/// @group text-colors\n$bpk-text-on-light-night: rgb(1, 9, 19) !default;\n/// @group text-colors\n$bpk-text-disabled-on-dark-day: rgba(255, 255, 255, 0.5) !default;\n/// @group text-colors\n$bpk-text-on-light-day: rgb(22, 22, 22) !default;\n/// @group text-colors\n$bpk-text-link-night: rgb(132, 233, 255) !default;\n/// @group text-colors\n$bpk-text-hero-night: rgb(1, 9, 19) !default;\n/// @group text-colors\n$bpk-text-disabled-night: rgba(255, 255, 255, 0.2) !default;\n/// @group text-colors\n$bpk-text-link-day: rgb(0, 98, 227) !default;\n/// @group text-colors\n$bpk-text-hero-day: rgb(0, 98, 227) !default;\n/// @group text-colors\n$bpk-text-primary-night: rgb(255, 255, 255) !default;\n/// @group text-colors\n$bpk-text-success-night: rgb(98, 241, 198) !default;\n/// @group text-colors\n$bpk-text-disabled-day: rgba(0, 0, 0, 0.2) !default;\n/// @group text-colors\n$bpk-text-primary-day: rgb(22, 22, 22) !default;\n/// @group text-colors\n$bpk-text-success-day: rgb(12, 131, 138) !default;\n/// @group text-colors\n$bpk-text-error-night: rgb(255, 100, 156) !default;\n/// @group text-colors\n$bpk-text-error-day: rgb(231, 8, 102) !default;\n/// @group text-colors\n$bpk-text-primary-inverse-night: rgb(1, 9, 19) !default;\n/// @group text-colors\n$bpk-text-secondary-night: rgb(189, 196, 203) !default;\n/// @group text-colors\n$bpk-text-on-dark-night: rgb(255, 255, 255) !default;\n/// @group text-colors\n$bpk-text-primary-inverse-day: rgb(255, 255, 255) !default;\n/// @group text-colors\n$bpk-text-disabled-on-dark-night: rgba(255, 255, 255, 0.5) !default;\n/// @group text-colors\n$bpk-text-secondary-day: rgb(98, 105, 113) !default;\n/// @group line-colors\n$bpk-line-day: rgb(193, 199, 207) !default;\n/// @group line-colors\n$bpk-line-night: rgb(68, 80, 95) !default;\n/// @group line-colors\n$bpk-line-on-dark-day: rgba(255, 255, 255, 0.5) !default;\n/// @group line-colors\n$bpk-line-on-dark-night: rgb(68, 80, 95) !default;\n/// @group scrim-colors\n$bpk-scrim-day: rgba(0, 0, 0, 0.7) !default;\n/// @group scrim-colors\n$bpk-scrim-night: rgba(0, 0, 0, 0.7) !default;\n/// @group overlay-colors\n$bpk-overlay-day: rgba(0, 0, 0, 0.2) !default;\n/// @group overlay-colors\n$bpk-overlay-night: rgba(255, 255, 255, 0.8) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-default-day: rgb(239, 243, 248) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-on-contrast-day: rgb(255, 255, 255) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-success-day: rgb(12, 131, 138) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-error-night: rgb(255, 100, 156) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-info-night: rgb(189, 196, 203) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-error-day: rgb(231, 8, 102) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-info-day: rgb(98, 105, 113) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-warning-night: rgb(254, 235, 135) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-warning-day: rgb(245, 93, 66) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-default-night: rgb(19, 29, 43) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-on-contrast-night: rgb(19, 29, 43) !default;\n/// @group info-banner-colors\n$bpk-private-info-banner-success-night: rgb(98, 241, 198) !default;\n/// @group marcomms-colors\n$bpk-marcomms-berry: rgb(231, 8, 102) !default;\n/// @group marcomms-colors\n$bpk-marcomms-charcoal: rgb(22, 22, 22) !default;\n/// @group marcomms-colors\n$bpk-marcomms-orange: rgb(255, 123, 89) !default;\n/// @group marcomms-colors\n$bpk-marcomms-grey-40: rgb(98, 105, 113) !default;\n/// @group marcomms-colors\n$bpk-marcomms-blue-bright: rgb(161, 238, 255) !default;\n/// @group marcomms-colors\n$bpk-marcomms-yellow: rgb(254, 235, 135) !default;\n/// @group marcomms-colors\n$bpk-marcomms-green-bright: rgb(147, 255, 222) !default;\n/// @group marcomms-colors\n$bpk-marcomms-pink: rgb(255, 163, 229) !default;\n/// @group marcomms-colors\n$bpk-marcomms-sky-blue: rgb(0, 98, 227) !default;\n/// @group marcomms-colors\n$bpk-marcomms-dark-sky: rgb(5, 32, 60) !default;\n/// @group marcomms-colors\n$bpk-marcomms-purple: rgb(142, 71, 186) !default;\n/// @group marcomms-colors\n$bpk-marcomms-white: rgb(255, 255, 255) !default;\n/// @group marcomms-colors\n$bpk-marcomms-yellow-muted: rgb(255, 247, 207) !default;\n/// @group marcomms-colors\n$bpk-marcomms-pink-muted: rgb(255, 233, 249) !default;\n/// @group marcomms-colors\n$bpk-marcomms-green-muted: rgb(212, 255, 242) !default;\n/// @group marcomms-colors\n$bpk-marcomms-blue-muted: rgb(217, 248, 255) !default;\n/// @group marcomms-colors\n$bpk-marcomms-eco-green: rgb(15, 161, 169) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-on-fill-day: rgb(21, 70, 121) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;\n/// @group chip-colors\n$bpk-private-chip-disabled-background-night: rgb(11, 18, 29) !default;\n/// @group chip-colors\n$bpk-private-chip-disabled-background-day: rgb(224, 228, 233) !default;\n/// @group chip-colors\n$bpk-private-chip-on-dark-on-fill-night: rgb(2, 77, 175) !default;\n/// @group map-marker-colors\n$bpk-private-map-previous-selection-day: rgb(207, 228, 255) !default;\n/// @group map-marker-colors\n$bpk-private-map-cluster-pin-night: rgb(255, 255, 255) !default;\n/// @group map-marker-colors\n$bpk-private-map-cluster-pin-previous-selection-night: rgb(148, 195, 255) !default;\n/// @group map-marker-colors\n$bpk-private-map-cluster-pin-day: rgb(5, 32, 60) !default;\n/// @group map-marker-colors\n$bpk-private-map-cluster-pin-previous-selection-day: rgb(148, 195, 255) !default;\n/// @group map-marker-colors\n$bpk-private-map-marker-viewed-foreground-night: rgba(0, 0, 0, 0.8) !default;\n/// @group map-marker-colors\n$bpk-private-map-marker-viewed-foreground-day: rgba(255, 255, 255, 0.8) !default;\n/// @group map-marker-colors\n$bpk-private-map-poi-pin-night: rgb(142, 71, 186) !default;\n/// @group map-marker-colors\n$bpk-private-map-previous-selection-night: rgb(207, 228, 255) !default;\n/// @group map-marker-colors\n$bpk-private-map-poi-pin-day: rgb(142, 71, 186) !default;\n/// @group button-colors\n$bpk-private-button-secondary-pressed-background-night: rgb(1, 9, 19) !default;\n/// @group button-colors\n$bpk-private-button-link-normal-foreground-night: rgb(132, 233, 255) !default;\n/// @group button-colors\n$bpk-private-button-link-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-secondary-normal-background-night: rgb(36, 51, 70) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-pressed-background-day: rgb(21, 70, 121) !default;\n/// @group button-colors\n$bpk-private-button-featured-normal-background-day: rgb(0, 98, 227) !default;\n/// @group button-colors\n$bpk-private-button-featured-pressed-background-night: rgb(209, 247, 255) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-normal-background-night: rgb(2, 77, 175) !default;\n/// @group button-colors\n$bpk-private-button-secondary-pressed-background-day: rgb(193, 199, 207) !default;\n/// @group button-colors\n$bpk-private-button-link-normal-foreground-day: rgb(0, 98, 227) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-disabled-background-night: rgb(11, 18, 29) !default;\n/// @group button-colors\n$bpk-private-button-destructive-normal-foreground-night: rgb(255, 100, 156) !default;\n/// @group button-colors\n$bpk-private-button-link-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-secondary-normal-background-day: rgb(224, 228, 233) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-normal-background-day: rgb(5, 32, 60) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-normal-background-night: rgb(255, 255, 255) !default;\n/// @group button-colors\n$bpk-private-button-featured-pressed-background-day: rgb(2, 77, 175) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-pressed-background-night: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-destructive-normal-foreground-day: rgb(231, 8, 102) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-normal-background-day: rgb(255, 255, 255) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(4, 24, 45) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-disabled-background-night: rgb(11, 18, 29) !default;\n/// @group button-colors\n$bpk-private-button-link-pressed-foreground-day: rgb(2, 77, 175) !default;\n/// @group button-colors\n$bpk-private-button-destructive-normal-background-night: rgb(36, 51, 70) !default;\n/// @group button-colors\n$bpk-private-button-primary-normal-background-night: rgb(2, 77, 175) !default;\n/// @group button-colors\n$bpk-private-button-destructive-pressed-background-night: rgb(255, 100, 156) !default;\n/// @group button-colors\n$bpk-private-button-primary-pressed-background-night: rgb(5, 65, 132) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-disabled-background-day: rgb(224, 228, 233) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-disabled-background-night: rgb(11, 18, 29) !default;\n/// @group button-colors\n$bpk-private-button-primary-normal-background-day: rgb(5, 32, 60) !default;\n/// @group button-colors\n$bpk-private-button-destructive-normal-background-day: rgb(224, 228, 233) !default;\n/// @group button-colors\n$bpk-private-button-link-on-dark-pressed-foreground-night: rgba(255, 255, 255, 0.5) !default;\n/// @group button-colors\n$bpk-private-button-destructive-pressed-background-day: rgb(231, 8, 102) !default;\n/// @group button-colors\n$bpk-private-button-primary-pressed-background-day: rgb(21, 70, 121) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-disabled-background-day: rgb(224, 228, 233) !default;\n/// @group button-colors\n$bpk-private-button-link-on-dark-normal-foreground-night: rgb(255, 255, 255) !default;\n/// @group button-colors\n$bpk-private-button-disabled-background-night: rgb(11, 18, 29) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-normal-background-night: rgba(255, 255, 255, 0.1) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-link-on-dark-pressed-foreground-day: rgba(255, 255, 255, 0.5) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-pressed-background-night: rgb(193, 199, 207) !default;\n/// @group button-colors\n$bpk-private-button-link-on-dark-normal-foreground-day: rgb(255, 255, 255) !default;\n/// @group button-colors\n$bpk-private-button-disabled-background-day: rgb(224, 228, 233) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-normal-background-day: rgba(255, 255, 255, 0.1) !default;\n/// @group button-colors\n$bpk-private-button-secondary-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-dark-pressed-background-day: rgb(193, 199, 207) !default;\n/// @group button-colors\n$bpk-private-button-primary-on-light-pressed-background-night: rgb(5, 65, 132) !default;\n/// @group button-colors\n$bpk-private-button-featured-normal-background-night: rgb(132, 233, 255) !default;\n/// @group rating-bar-colors\n$bpk-private-bar-track-default-day: rgb(224, 228, 233) !default;\n/// @group rating-bar-colors\n$bpk-private-bar-track-default-night: rgb(36, 51, 70) !default;\n/// @group rating-bar-colors\n$bpk-private-bar-track-on-contrast-day: rgb(255, 255, 255) !default;\n/// @group rating-bar-colors\n$bpk-private-bar-track-on-contrast-night: rgb(36, 51, 70) !default;\n/// @group skeleton-colors\n$bpk-private-skeleton-shimmer-start-end-day: rgba(255, 255, 255, 0) !default;\n/// @group skeleton-colors\n$bpk-private-skeleton-shimmer-start-end-night: rgba(0, 0, 0, 0) !default;\n/// @group skeleton-colors\n$bpk-private-skeleton-shimmer-center-day: rgba(255, 255, 255, 0.6) !default;\n/// @group skeleton-colors\n$bpk-private-skeleton-shimmer-center-night: rgba(0, 0, 0, 0.2) !default;\n/// @group sponsored-banner-colors\n$bpk-private-sponsored-banner-background-day: rgb(239, 243, 248) !default;\n/// @group sponsored-banner-colors\n$bpk-private-sponsored-banner-background-night: rgb(36, 51, 70) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-hover-day: rgb(21, 70, 121) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-hover-night: rgb(209, 247, 255) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-outline-day: rgb(193, 199, 207) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-outline-night: rgb(255, 255, 255) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-on-dark-outline-day: rgba(255, 255, 255, 0.2) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-on-dark-outline-night: rgba(255, 255, 255, 0.2) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-selected-day: rgb(2, 77, 175) !default;\n/// @group navigation-tab-colors\n$bpk-private-navigation-tab-selected-night: rgb(5, 65, 132) !default;\n/// @group card-button-colors\n$bpk-private-card-button-contained-fill-day: rgba(255, 255, 255, 0.8) !default;\n/// @group card-button-colors\n$bpk-private-card-button-contained-fill-night: rgba(0, 0, 0, 0.8) !default;\n/// @group segmented-control-colors\n$bpk-private-segmented-control-canvas-default-day: rgb(239, 243, 248) !default;\n/// @group segmented-control-colors\n$bpk-private-segmented-control-canvas-default-night: rgb(19, 29, 43) !default;\n/// @group segmented-control-colors\n$bpk-private-segmented-control-surface-contrast-day: rgba(255, 255, 255, 0.1) !default;\n/// @group segmented-control-colors\n$bpk-private-segmented-control-surface-contrast-night: rgb(19, 29, 43) !default;\n/// @group segmented-control-colors\n$bpk-private-segmented-control-surface-contrast-on-day: rgb(2, 77, 175) !default;\n/// @group segmented-control-colors\n$bpk-private-segmented-control-surface-contrast-on-night: rgb(5, 65, 132) !default;\n/// @group colors\n$bpk-color-sky-blue-shade-03: rgb(2, 18, 44) !default;\n/// @group colors\n$bpk-color-primary-gradient-light: rgb(0, 98, 227) !default;\n/// @group colors\n$bpk-color-erfoud: rgb(255, 181, 77) !default;\n/// @group colors\n$bpk-color-valensole: rgb(165, 155, 200) !default;\n/// @group colors\n$bpk-color-monteverde: rgb(0, 166, 152) !default;\n/// @group text-colors\n$bpk-background-elevation-03-dark-color: rgb(58, 58, 60) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;\n/// @group colors\n$bpk-color-black: rgb(1, 9, 19) !default;\n/// @group text-colors\n$bpk-background-elevation-02-dark-color: rgb(44, 44, 46) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-02: rgb(104, 105, 127) !default;\n/// @group colors\n$bpk-line-dark-color: rgb(72, 72, 74) !default;\n/// @group text-colors\n$bpk-background-elevation-01-dark-color: rgb(29, 27, 32) !default;\n/// @group colors\n$bpk-color-sagano: rgb(208, 238, 236) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-03: rgb(143, 144, 160) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-04: rgb(178, 178, 191) !default;\n/// @group colors\n$bpk-color-harbour: rgb(246, 221, 225) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-05: rgb(205, 205, 215) !default;\n/// @group colors\n$bpk-background-alternative-secondary-dark-color: rgb(29, 27, 32) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-06: rgb(221, 221, 229) !default;\n/// @group text-colors\n$bpk-text-primary-dark-color: rgb(255, 255, 255) !default;\n/// @group text-colors\n$bpk-text-quaternary-dark-color: rgb(142, 142, 147) !default;\n/// @group colors\n$bpk-background-light-color: rgb(255, 255, 255) !default;\n/// @group colors\n$bpk-color-black-tint-01: rgb(29, 27, 32) !default;\n/// @group colors\n$bpk-color-sky-gray-tint-07: rgb(241, 242, 248) !default;\n/// @group colors\n$bpk-color-black-tint-02: rgb(44, 44, 46) !default;\n/// @group colors\n$bpk-color-abisko: rgb(90, 72, 155) !default;\n/// @group text-colors\n$bpk-text-quaternary-light-color: rgb(143, 144, 160) !default;\n/// @group colors\n$bpk-background-dark-color: rgb(0, 0, 0) !default;\n/// @group colors\n$bpk-color-black-tint-03: rgb(58, 58, 60) !default;\n/// @group text-colors\n$bpk-text-primary-light-color: rgb(17, 18, 54) !default;\n/// @group colors\n$bpk-color-black-tint-04: rgb(72, 72, 74) !default;\n/// @group colors\n$bpk-background-alternative-secondary-light-color: rgb(255, 255, 255) !default;\n/// @group colors\n$bpk-color-white: rgb(255, 255, 255) !default;\n/// @group colors\n$bpk-color-black-tint-05: rgb(99, 99, 102) !default;\n/// @group colors\n$bpk-color-black-tint-06: rgb(142, 142, 147) !default;\n/// @group colors\n$bpk-color-panjin: rgb(209, 67, 91) !default;\n/// @group colors\n$bpk-color-system-green: rgb(0, 166, 152) !default;\n/// @group colors\n$bpk-color-kolkata: rgb(255, 148, 0) !default;\n/// @group colors\n$bpk-color-glencoe: rgb(115, 206, 198) !default;\n/// @group text-colors\n$bpk-background-elevation-01-light-color: rgb(255, 255, 255) !default;\n/// @group colors\n$bpk-color-tochigi: rgb(225, 221, 236) !default;\n/// @group colors\n$bpk-line-light-color: rgb(205, 205, 215) !default;\n/// @group text-colors\n$bpk-background-elevation-02-light-color: rgb(255, 255, 255) !default;\n/// @group text-colors\n$bpk-background-elevation-03-light-color: rgb(255, 255, 255) !default;\n/// @group colors\n$bpk-color-petra: rgb(255, 171, 149) !default;\n/// @group colors\n$bpk-color-sky-blue: rgb(0, 98, 227) !default;\n/// @group text-colors\n$bpk-text-tertiary-dark-color: rgb(142, 142, 147) !default;\n/// @group colors\n$bpk-background-tertiary-dark-color: rgb(44, 44, 46) !default;\n/// @group colors\n$bpk-background-secondary-dark-color: rgb(29, 27, 32) !default;\n/// @group text-colors\n$bpk-text-secondary-dark-color: rgb(178, 178, 191) !default;\n/// @group colors\n$bpk-background-alternative-light-color: rgb(241, 242, 248) !default;\n/// @group colors\n$bpk-primary-dark-color: rgb(109, 159, 235) !default;\n/// @group colors\n$bpk-color-bagan: rgb(255, 235, 208) !default;\n/// @group colors\n$bpk-color-hillier: rgb(225, 139, 150) !default;\n/// @group colors\n$bpk-color-sky-blue-tint-01: rgb(109, 159, 235) !default;\n/// @group colors\n$bpk-color-sky-blue-tint-02: rgb(157, 192, 242) !default;\n/// @group colors\n$bpk-color-bunol: rgb(255, 123, 89) !default;\n/// @group colors\n$bpk-color-sky-blue-tint-03: rgb(205, 223, 248) !default;\n/// @group colors\n$bpk-color-sky-gray: rgb(17, 18, 54) !default;\n/// @group colors\n$bpk-color-system-red: rgb(209, 67, 91) !default;\n/// @group text-colors\n$bpk-text-secondary-light-color: rgb(104, 105, 127) !default;\n/// @group colors\n$bpk-background-alternative-dark-color: rgb(0, 0, 0) !default;\n/// @group colors\n$bpk-primary-light-color: rgb(0, 98, 227) !default;\n/// @group colors\n$bpk-background-tertiary-light-color: rgb(255, 255, 255) !default;\n/// @group colors\n$bpk-color-nara: rgb(255, 231, 224) !default;\n/// @group colors\n$bpk-color-sky-blue-shade-01: rgb(8, 78, 178) !default;\n/// @group colors\n$bpk-background-secondary-light-color: rgb(241, 242, 248) !default;\n/// @group text-colors\n$bpk-text-tertiary-light-color: rgb(143, 144, 160) !default;\n/// @group colors\n$bpk-color-sky-blue-shade-02: rgb(4, 39, 89) !default;\n/// @group animations\n$bpk-duration-xs: 50ms !default;\n/// @group animations\n$bpk-duration-sm: 200ms !default;\n/// @group animations\n$bpk-duration-base: 400ms !default;\n/// @group borders\n$bpk-border-size-sm: 1px !default;\n/// @group borders\n$bpk-border-size-lg: 2px !default;\n/// @group radii\n$bpk-border-radius-full: 100% !default;\n/// @group radii\n$bpk-border-radius-xl: 2.5rem !default;\n/// @group radii\n$bpk-border-radius-md: .75rem !default;\n/// @group radii\n$bpk-border-radius-nav-tabs: 1.125rem !default;\n/// @group radii\n$bpk-border-radius-sm: .5rem !default;\n/// @group radii\n$bpk-border-radius-xs: .25rem !default;\n/// @group radii\n$bpk-border-radius-lg: 1.5rem !default;\n/// @group borders\n$bpk-border-size-xl: 3px !default;\n/// @group box-shadows\n$bpk-box-shadow-sm: 0px 1px 3px 0px rgba(37,32,31,.3) !default;\n/// @group box-shadows\n$bpk-box-shadow-lg: 0px 4px 14px 0px rgba(37,32,31,.25) !default;\n/// @group box-shadows\n$bpk-box-shadow-xl: 0px 12px 50px 0px rgba(37,32,31,.25) !default;\n/// @group breakpoints\n$bpk-breakpoint-query-tablet-only: \"(min-width: 32.0625rem) and (max-width: 64rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-small-tablet-margin: 1.5rem !default;\n/// @group breakpoints\n$bpk-breakpoint-query-small-tablet: \"(max-width: 48rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-small-mobile-margin: 1rem !default;\n/// @group breakpoints\n$bpk-breakpoint-query-mobile: \"(max-width: 32rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-query-small-tablet-only: \"(min-width: 32.0625rem) and (max-width: 48rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-small-mobile: 22.4375rem !default;\n/// @group breakpoints\n$bpk-breakpoint-query-above-mobile: \"(min-width: 32.0625rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-query-tablet: \"(max-width: 64rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-small-tablet: 48rem !default;\n/// @group breakpoints\n$bpk-breakpoint-query-above-tablet: \"(min-width: 64.0625rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-desktop: 80rem !default;\n/// @group breakpoints\n$bpk-breakpoint-mobile: 32rem !default;\n/// @group breakpoints\n$bpk-breakpoint-tablet: 64rem !default;\n/// @group breakpoints\n$bpk-breakpoint-query-desktop-only: \"(min-width: 64.0625rem) and (max-width: 80rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-query-above-desktop: \"(min-width: 80.0625rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-tablet-margin: 2rem !default;\n/// @group breakpoints\n$bpk-breakpoint-mobile-margin: 1rem !default;\n/// @group breakpoints\n$bpk-breakpoint-query-small-mobile: \"(max-width: 22.4375rem)\" !default;\n/// @group breakpoints\n$bpk-breakpoint-desktop-margin: 1rem * 3 !default;\n/// @group buttons\n$bpk-button-height: 2.25rem !default;\n/// @group buttons\n$bpk-button-border-radius: .5rem !default;\n/// @group buttons\n$bpk-button-large-height: 3rem !default;\n/// @group buttons\n$bpk-private-button-line-height: 1.5rem !default;\n/// @group buttons\n$bpk-private-card-button-contained-color: rgba(255, 255, 255, 0.8) !default;\n/// @group calendar\n$bpk-calendar-day-spacing: .5rem !default;\n/// @group calendar\n$bpk-calendar-day-size: 2.25rem !default;\n/// @group cards\n$bpk-card-background-color: rgb(255, 255, 255) !default;\n/// @group cards\n$bpk-card-padding: 1rem !default;\n/// @group colors\n$bpk-primary-gradient: #0062E3 !default;\n/// @group flare\n$bpk-flare-height-desktop: 1.5rem !default;\n/// @group flare\n$bpk-flare-height-mobile: 1rem !default;\n/// @group flare\n$bpk-flare-corner-radius: 1.3125rem !default;\n/// @group forms\n$bpk-input-large-height: 3rem !default;\n/// @group forms\n$bpk-input-border: solid .0625rem #C1C7CF !default;\n/// @group forms\n$bpk-select-border-radius: .5rem !default;\n/// @group forms\n$bpk-input-background: #ffffff !default;\n/// @group forms\n$bpk-input-border-width: .0625rem !default;\n/// @group forms\n$bpk-label-disabled-color: rgba(0, 0, 0, 0.2) !default;\n/// @group forms\n$bpk-input-large-border-radius: .75rem !default;\n/// @group forms\n$bpk-input-border-radius: .5rem !default;\n/// @group forms\n$bpk-select-disabled-border-color: rgb(224, 228, 233) !default;\n/// @group forms\n$bpk-input-disabled-color: rgba(0, 0, 0, 0.2) !default;\n/// @group forms\n$bpk-input-padding-x: .5rem !default;\n/// @group forms\n$bpk-input-padding-y: .5rem !default;\n/// @group forms\n$bpk-select-border-width: .0625rem !default;\n/// @group forms\n$bpk-form-validation-color: rgb(231, 8, 102) !default;\n/// @group forms\n$bpk-input-height: 2.25rem !default;\n/// @group forms\n$bpk-select-large-border-radius: .75rem !default;\n/// @group forms\n$bpk-input-disabled-border-color: rgb(239, 243, 248) !default;\n/// @group horizontal-nav\n$bpk-horizontal-nav-bar-selected-color: rgb(0, 98, 227) !default;\n/// @group icons\n$bpk-icon-size-sm: 1rem !default;\n/// @group icons\n$bpk-icon-size-lg: 1.5rem !default;\n/// @group icons\n$bpk-icon-size-xl: 2rem !default;\n/// @group icons\n$bpk-icon-size-xxl: 2.5rem !default;\n/// @group icons\n$bpk-icon-size-xxxl: 3rem !default;\n/// @group modals\n$bpk-modal-background-color: rgb(255, 255, 255) !default;\n/// @group modals\n$bpk-modal-initial-opacity: 0 !default;\n/// @group modals\n$bpk-modal-opacity: 1 !default;\n/// @group modals\n$bpk-modal-max-width: 32rem !default;\n/// @group modals\n$bpk-modal-wide-max-width: 64rem !default;\n/// @group modals\n$bpk-modal-content-padding: 1rem !default;\n/// @group notifications\n$bpk-banner-alert-header-expandable-hover-background-color: rgb(239, 243, 248) !default;\n/// @group notifications\n$bpk-banner-alert-header-expandable-active-background-color: rgb(239, 243, 248) !default;\n/// @group notifications\n$bpk-banner-alert-primary-color: rgb(0, 98, 227) !default;\n/// @group notifications\n$bpk-banner-alert-success-color: rgb(12, 131, 138) !default;\n/// @group notifications\n$bpk-banner-alert-warn-color: rgb(245, 93, 66) !default;\n/// @group notifications\n$bpk-banner-alert-error-color: rgb(231, 8, 102) !default;\n/// @group notifications\n$bpk-banner-alert-neutral-color: rgb(193, 199, 207) !default;\n/// @group panels\n$bpk-panel-border-color: rgb(193, 199, 207) !default;\n/// @group slider-colors\n$bpk-private-slider-selected-day: rgb(21, 70, 121) !default;\n/// @group spacings\n@function bpk-spacing-xxxxl() { @return 6rem; }\n/// @group spacings\n@function bpk-spacing-xxl() { @return 2.5rem; }\n/// @group spacings\n@function bpk-spacing-md() { @return .5rem; }\n/// @group spacings\n@function bpk-spacing-sm() { @return .25rem; }\n/// @group spacings\n@function bpk-spacing-lg() { @return 1.5rem; }\n/// @group spacings\n@function bpk-spacing-xs() { @return .125rem; }\n/// @group spacings\n$bpk-one-pixel-rem: .0625rem !default;\n/// @group spacings\n@function bpk-spacing-xxs() { @return .0625rem; }\n/// @group spacings\n$bpk-spacing-none: 0 !default;\n/// @group spacings\n$bpk-spacing-icon-text: .5rem !default;\n/// @group spacings\n@function bpk-spacing-base() { @return 1rem; }\n/// @group spacings\n@function bpk-spacing-xl() { @return 2rem; }\n/// @group spacings\n@function bpk-spacing-xxxl() { @return 4rem; }\n/// @group font-weights\n$bpk-font-weight-book: 400 !default;\n/// @group typesettings\n$bpk-line-height-xl-tight: 1.75rem !default;\n/// @group typesettings\n$bpk-line-height-xxxxxl: 4rem !default;\n/// @group typesettings\n$bpk-line-height-xxxl: 3rem !default;\n/// @group typesettings\n$bpk-line-height-xl: 2rem !default;\n/// @group typesettings\n$bpk-font-size-xl: 1.5rem !default;\n/// @group typesettings\n$bpk-font-family-larken: 'Larken', sans-serif !default;\n/// @group typesettings\n$bpk-font-size-xxxxxl: 4rem !default;\n/// @group typesettings\n$bpk-font-size-xxxl: 2.5rem !default;\n/// @group typesettings\n$bpk-line-height-sm: 1.25rem !default;\n/// @group typesettings\n$bpk-line-height-lg-tight: 1.5rem !default;\n/// @group typesettings\n$bpk-line-height-lg: 1.75rem !default;\n/// @group font-weights\n$bpk-font-weight-black: 900 !default;\n/// @group typesettings\n$bpk-line-height-xs: 1rem !default;\n/// @group typesettings\n$bpk-font-size-sm: .875rem !default;\n/// @group typesettings\n$bpk-font-size-xs: .75rem !default;\n/// @group letter-spacings\n$bpk-letter-spacing-tight: -0.02em !default;\n/// @group typesettings\n$bpk-font-size-lg: 1.25rem !default;\n/// @group letter-spacings\n$bpk-letter-spacing-display: -0.05em !default;\n/// @group letter-spacings\n$bpk-letter-spacing-hero: -0.04em !default;\n/// @group typesettings\n$bpk-font-size-root: 100% !default;\n/// @group typesettings\n$bpk-font-size-6-xl: 4.75rem !default;\n/// @group typesettings\n$bpk-font-family-base: 'Skyscanner Relative', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;\n/// @group font-weights\n$bpk-font-weight-bold: 700 !default;\n/// @group text-colors\n$bpk-font-color-base: rgb(22, 22, 22) !default;\n/// @group typesettings\n$bpk-line-height-base-tight: 1.25rem !default;\n/// @group typesettings\n$bpk-font-size-7-xl: 6rem !default;\n/// @group typesettings\n$bpk-line-height-6-xl: 4.75rem !default;\n/// @group typesettings\n$bpk-font-size-8-xl: 7.5rem !default;\n/// @group typesettings\n$bpk-font-size-xxl: 2rem !default;\n/// @group typesettings\n$bpk-font-size-xxxxl: 3rem !default;\n/// @group typesettings\n$bpk-line-height-base: 1.5rem !default;\n/// @group typesettings\n$bpk-line-height-7-xl: 6rem !default;\n/// @group typesettings\n$bpk-font-size-base: 1rem !default;\n/// @group font-weights\n$bpk-font-weight-light: 300 !default;\n/// @group typesettings\n$bpk-line-height-8-xl: 7.5rem !default;\n/// @group typesettings\n$bpk-line-height-xxl: 2.5rem !default;\n/// @group typesettings\n$bpk-line-height-xxxxl: 3.5rem !default;\n/// @group z-indices\n$bpk-zindex-autosuggest: 900 !default;\n/// @group z-indices\n$bpk-zindex-popover: 900 !default;\n/// @group z-indices\n$bpk-zindex-tooltip: 900 !default;\n/// @group z-indices\n$bpk-zindex-scrim: 1000 !default;\n/// @group z-indices\n$bpk-zindex-modal: 1100 !default;\n/// @group z-indices\n$bpk-zindex-drawer: 1100 !default;","/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* stylelint-disable at-rule-disallowed-list */\n\n@use 'tokens';\n@use 'utils';\n\n////\n/// @group svgs\n////\n\n/// Button alignment utility.\n///\n/// @access private\n\n@mixin _bpk-svg--align-to-button() {\n  vertical-align: text-bottom;\n}\n\n/// Large button alignment utility.\n///\n/// @access private\n\n@mixin _bpk-svg--align-to-large-button() {\n  margin-top: (\n      tokens.$bpk-private-button-line-height - tokens.$bpk-icon-size-lg\n    ) *\n    0.5;\n  vertical-align: top;\n}\n\n/// Align to button. Modifies the bpk-icon-sm mixin.\n///\n/// @require {mixin} bpk-icon-sm\n///\n/// @example scss\n///   .selector {\n///     @include bpk-icon-sm(flight-sky-gray-tint-02);\n///     @include bpk-icon-sm--align-to-button();\n///   }\n\n@mixin bpk-icon-sm--align-to-button() {\n  @include _bpk-svg--align-to-button;\n}\n\n/// Align to large button. Modifies the bpk-icon-lg mixin.\n///\n/// @require {mixin} bpk-icon-lg\n///\n/// @example scss\n///   .selector {\n///     @include bpk-icon-lg(flight-sky-gray-tint-02);\n///     @include bpk-icon-lg--align-to-large-button();\n///   }\n\n@mixin bpk-icon-lg--align-to-large-button() {\n  @include _bpk-svg--align-to-large-button;\n}\n\n/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.\n///\n/// @require {mixin} bpk-icon-sm\n/// @require {mixin} bpk-icon-lg\n///\n/// @example scss\n///   .selector {\n///     @include bpk-icon-sm(flight-sky-gray-tint-02);\n///     @include bpk-icon--rtl-support();\n///   }\n\n@mixin bpk-icon--rtl-support() {\n  @include utils.bpk-rtl {\n    transform: scaleX(-1);\n  }\n}\n","/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@use '../../bpk-mixins/buttons';\n@use '../../bpk-mixins/tokens';\n@use '../../bpk-mixins/typography';\n\n.bpk-button {\n  @include buttons.bpk-button;\n\n  @media (hover: hover) {\n    &--link:hover:not(:active):not(:disabled) &--link-underlined,\n    &--link-on-dark:hover:not(:active):not(:disabled) &--link-underlined {\n      background-size: 0 tokens.$bpk-border-size-sm;\n    }\n\n    &--link:hover:not(:active):not(:disabled) &--link-underlined--implicit,\n    &--link-on-dark:hover:not(:active):not(:disabled)\n      &--link-underlined--implicit--alternate {\n      background-size: 100% tokens.$bpk-border-size-sm;\n    }\n  }\n\n  &--large {\n    @include buttons.bpk-button--large;\n  }\n\n  &--icon-only {\n    @include buttons.bpk-button--icon-only;\n  }\n\n  &--large-icon-only {\n    @include buttons.bpk-button--large-icon-only;\n  }\n\n  &--destructive {\n    @include buttons.bpk-button--secondary;\n    @include buttons.bpk-button--destructive;\n  }\n\n  &--featured {\n    @include buttons.bpk-button--featured;\n  }\n\n  &--link {\n    @include buttons.bpk-button--link;\n    @include typography.bpk-link;\n\n    // override SVG display for link buttons\n    --bpk-button-svg-display: inline-block;\n    --bpk-button-svg-vertical-align: middle;\n\n    &--implicit {\n      @include typography.bpk-link--implicit;\n    }\n\n    &--icon-only {\n      @include buttons.bpk-button--link-icon-only;\n    }\n  }\n\n  &--link-on-dark {\n    @include buttons.bpk-button--link-on-dark;\n    @include typography.bpk-link--alternate;\n\n    // override SVG display for link buttons\n    --bpk-button-svg-display: inline-block;\n    --bpk-button-svg-vertical-align: middle;\n\n    &--implicit {\n      @include typography.bpk-link--implicit;\n    }\n  }\n\n  &--link-underlined {\n    @include buttons.bpk-button--link-underlined;\n\n    &--implicit {\n      @include typography.bpk-link-underlined--implicit;\n    }\n\n    &--alternate {\n      @include typography.bpk-link-underlined--alternate;\n    }\n\n    &--implicit--alternate {\n      @include typography.bpk-link-underlined-implicit--alternate;\n    }\n  }\n\n  &--primary-on-dark {\n    @include buttons.bpk-button--primary-on-dark;\n  }\n\n  &--primary-on-light {\n    @include buttons.bpk-button--primary-on-light;\n  }\n\n  &--secondary {\n    @include buttons.bpk-button--secondary;\n  }\n\n  &--secondary-on-dark {\n    @include buttons.bpk-button--secondary-on-dark;\n  }\n\n  &--full-width {\n    @include buttons.bpk-button--full-width;\n  }\n\n  &--has-icon {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.bpk-spacing-md();\n  }\n\n  &--full-width#{&}--has-icon {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__leading-icon,\n  &__trailing-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    text-decoration: none;\n  }\n\n  &__loading-container {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &__loading-icon {\n    position: absolute;\n    display: inline-flex;\n\n    // Reset SVG display overrides (e.g. from link button) so the spinner SVG\n    // always renders as block and stays within its 16×16 container.\n    --bpk-button-svg-display: block;\n    --bpk-button-svg-vertical-align: baseline;\n  }\n\n  &__content--hidden {\n    opacity: 0;\n  }\n\n  /* stylelint-disable selector-max-compound-selectors */\n  span > svg {\n    display: var(--bpk-button-svg-display, block);\n    vertical-align: var(--bpk-button-svg-vertical-align, baseline);\n  }\n\n  svg {\n    fill: currentcolor;\n  }\n}\n","/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* stylelint-disable at-rule-disallowed-list */\n\n@use 'tokens';\n@use 'typography';\n@use 'utils';\n\n////\n/// @group buttons\n////\n\n// --- Private: pressed/hover colour declarations ---\n// These mixins centralise pressed/hover token references.\n// hover and loading can include the same mixin — token values\n// are defined exactly once.\n\n@mixin _bpk-button-primary-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-primary-hover-background-color,\n    tokens.$bpk-private-button-primary-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-primary-hover-text-color,\n    tokens.$bpk-text-on-dark-day\n  );\n}\n\n@mixin _bpk-button-primary-on-dark-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-primary-on-dark-hover-background-color,\n    tokens.$bpk-private-button-primary-on-dark-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-primary-on-dark-hover-text-color,\n    tokens.$bpk-text-on-light-day\n  );\n}\n\n@mixin _bpk-button-primary-on-light-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-primary-on-light-hover-background-color,\n    tokens.$bpk-private-button-primary-on-light-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-primary-on-light-hover-text-color,\n    tokens.$bpk-text-on-dark-night\n  );\n}\n\n@mixin _bpk-button-secondary-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-secondary-hover-background-color,\n    tokens.$bpk-private-button-secondary-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-secondary-hover-text-color,\n    tokens.$bpk-text-primary-day\n  );\n}\n\n@mixin _bpk-button-secondary-on-dark-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-secondary-on-dark-hover-background-color,\n    tokens.$bpk-private-button-secondary-on-dark-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-secondary-on-dark-hover-text-color,\n    tokens.$bpk-text-on-dark-day\n  );\n}\n\n@mixin _bpk-button-destructive-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-destructive-hover-background-color,\n    tokens.$bpk-private-button-destructive-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-destructive-hover-text-color,\n    tokens.$bpk-text-primary-inverse-day\n  );\n}\n\n@mixin _bpk-button-featured-hover {\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-featured-hover-background-color,\n    tokens.$bpk-private-button-featured-pressed-background-day\n  );\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-featured-hover-text-color,\n    tokens.$bpk-text-primary-inverse-day\n  );\n}\n\n@mixin _bpk-button-link-on-dark-hover {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-link-on-dark-hover-text-color,\n    tokens.$bpk-private-button-link-on-dark-pressed-foreground-day\n  );\n}\n\n// --- End private mixins ---\n\n/// Standard button.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///   }\n\n@mixin bpk-button {\n  display: inline-block;\n  min-height: tokens.$bpk-button-height;\n  margin: 0;\n  padding: (6 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-base();\n  border: 0;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  vertical-align: middle;\n  user-select: none;\n\n  @include utils.bpk-themeable-property(\n    border-radius,\n    --bpk-button-border-radius,\n    tokens.$bpk-button-border-radius\n  );\n  @include typography.bpk-label-1;\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-primary-text-color,\n    tokens.$bpk-text-on-dark-day\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-primary-background-color,\n    tokens.$bpk-private-button-primary-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-primary-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-primary-active-text-color,\n      tokens.$bpk-text-on-dark-day\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-primary-active-background-color,\n      tokens.$bpk-private-button-primary-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-disabled-background-day;\n    color: tokens.$bpk-text-disabled-day;\n    cursor: not-allowed;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-primary-hover;\n  }\n}\n\n/// Large button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--large();\n///   }\n\n@mixin bpk-button--large {\n  min-height: tokens.$bpk-button-large-height;\n  padding: (12 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-base();\n}\n\n/// PrimaryOnDark button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--primary-on-dark();\n///   }\n\n@mixin bpk-button--primary-on-dark {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-primary-on-dark-text-color,\n    tokens.$bpk-text-on-light-day\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-primary-on-dark-background-color,\n    tokens.$bpk-private-button-primary-on-dark-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-primary-on-dark-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-primary-on-dark-active-text-color,\n      tokens.$bpk-text-on-light-day\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-primary-on-dark-active-background-color,\n      tokens.$bpk-private-button-primary-on-dark-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-primary-on-dark-disabled-background-day;\n    color: tokens.$bpk-private-button-primary-on-dark-disabled-foreground-day;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-primary-on-dark-hover;\n  }\n}\n\n/// PrimaryOnLight button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--primary-on-light();\n///   }\n\n@mixin bpk-button--primary-on-light {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-primary-on-light-text-color,\n    tokens.$bpk-text-on-dark-night\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-primary-on-light-background-color,\n    tokens.$bpk-private-button-primary-on-light-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-primary-on-light-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-primary-on-light-active-text-color,\n      tokens.$bpk-text-on-dark-night\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-primary-on-light-active-background-color,\n      tokens.$bpk-private-button-primary-on-light-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-primary-on-light-disabled-background-day;\n    color: tokens.$bpk-private-button-primary-on-light-disabled-foreground-day;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-primary-on-light-hover;\n  }\n}\n\n/// Secondary button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--secondary();\n///   }\n\n@mixin bpk-button--secondary {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-secondary-text-color,\n    tokens.$bpk-text-primary-day\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-secondary-background-color,\n    tokens.$bpk-private-button-secondary-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-secondary-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-secondary-active-text-color,\n      tokens.$bpk-text-primary-day\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-secondary-active-background-color,\n      tokens.$bpk-private-button-secondary-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-disabled-background-day;\n    color: tokens.$bpk-text-disabled-day;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-secondary-hover;\n  }\n}\n\n/// Secondary on dark button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--secondary-on-dark();\n///   }\n\n@mixin bpk-button--secondary-on-dark {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-secondary-on-dark-text-color,\n    tokens.$bpk-text-on-dark-day\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-secondary-on-dark-background-color,\n    tokens.$bpk-private-button-secondary-on-dark-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-secondary-on-dark-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-secondary-on-dark-active-text-color,\n      tokens.$bpk-text-on-dark-day\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-secondary-on-dark-active-background-color,\n      tokens.$bpk-private-button-secondary-on-dark-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-secondary-on-dark-disabled-background-day;\n    color: tokens.$bpk-private-button-secondary-on-dark-disabled-foreground-day;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-secondary-on-dark-hover;\n  }\n}\n\n/// Destructive button. Modifies the bpk-button & bpk-button--secondary lib.\n///\n/// @require {mixin} bpk-button\n/// @require {mixin} bpk-button--secondary\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--secondary();\n///     @include bpk-button--destructive();\n///   }\n\n@mixin bpk-button--destructive {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-destructive-text-color,\n    tokens.$bpk-private-button-destructive-normal-foreground-day\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-destructive-background-color,\n    tokens.$bpk-private-button-destructive-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-destructive-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-destructive-active-text-color,\n      tokens.$bpk-text-primary-inverse-day\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-destructive-active-background-color,\n      tokens.$bpk-private-button-destructive-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-disabled-background-day;\n    color: tokens.$bpk-text-disabled-day;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-destructive-hover;\n  }\n}\n\n/// Link-style button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--link();\n///   }\n\n@mixin bpk-button--link {\n  $vertical-padding: tokens.$bpk-one-pixel-rem * 6;\n  $vertical-padding-large: tokens.$bpk-one-pixel-rem * 12;\n\n  background: none; /* stylelint-disable-line order/order, order/properties-order */\n  box-shadow: none;\n\n  @include typography.bpk-link--implicit;\n\n  &::after {\n    bottom: auto;\n  }\n\n  padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */\n  color: tokens.$bpk-private-button-link-normal-foreground-day;\n\n  @include utils.bpk-hover {\n    background: none;\n    color: tokens.$bpk-private-button-link-pressed-foreground-day;\n    text-decoration: none;\n  }\n\n  &:active {\n    background: none;\n    color: tokens.$bpk-private-button-link-pressed-foreground-day;\n    text-decoration: none;\n  }\n\n  // The link button inherits from bpk-link which defines :active styles but has no disabled state,\n  // so we need to ensure the disabled appearance is maintained even when clicked.\n  &:disabled,\n  &:disabled:active {\n    background: none;\n    color: tokens.$bpk-text-disabled-day;\n    text-decoration: none;\n  }\n\n  // Loading state override: restore pressed appearance while disabled.\n  &.bpk-button--loading:disabled,\n  &.bpk-button--loading:disabled:active {\n    background: none;\n\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-link-loading-color,\n      tokens.$bpk-text-primary-day\n    );\n  }\n\n  &-large {\n    padding: $vertical-padding-large 0;\n  }\n}\n\n/// Link on dark button. Modifies the bpk-button & bpk-button--link lib.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--link-on-dark();\n///   }\n\n@mixin bpk-button--link-on-dark {\n  @include bpk-button--link;\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-link-on-dark-text-color,\n    tokens.$bpk-private-button-link-on-dark-normal-foreground-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-link-on-dark-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-link-on-dark-active-text-color,\n      tokens.$bpk-private-button-link-on-dark-pressed-foreground-day\n    );\n  }\n\n  &:visited {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-link-on-dark-text-color,\n      tokens.$bpk-private-button-link-on-dark-normal-foreground-day\n    );\n  }\n\n  &:disabled,\n  &:disabled:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-link-on-dark-disabled-color,\n      tokens.$bpk-private-button-link-on-dark-disabled-foreground-day\n    );\n  }\n\n  // Loading state override: restore pressed/hover appearance while disabled.\n  &.bpk-button--loading:disabled,\n  &.bpk-button--loading:disabled:active {\n    @include _bpk-button-link-on-dark-hover;\n  }\n}\n\n/// Button link icon only aligned. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--link-icon-only;\n///   }\n\n@mixin bpk-button--link-icon-only {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n}\n\n/// Button link underlined. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--link-underlined;\n///   }\n\n@mixin bpk-button--link-underlined {\n  gap: tokens.bpk-spacing-md();\n\n  @include bpk-button--link-icon-only;\n  @include typography.bpk-link-underlined;\n}\n\n/// Icon-only button. Modifies the bpk-button mixin.\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--icon-only();\n///   }\n\n@mixin bpk-button--icon-only {\n  $horizontal-padding: (tokens.$bpk-button-height - tokens.$bpk-icon-size-sm) *\n    0.5; // extra padding so that the width will be the same size as the size using sm icons\n\n  padding-right: $horizontal-padding;\n  padding-left: $horizontal-padding;\n}\n\n/// Large icon-only button. Modifies the bpk-button & bpk-button--large lib.\n///\n/// @require {mixin} bpk-button\n/// @require {mixin} bpk-button--large\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--large();\n///     @include bpk-button--large-icon-only();\n///   }\n\n@mixin bpk-button--large-icon-only {\n  $horizontal-padding: (\n      tokens.$bpk-button-large-height - tokens.$bpk-icon-size-lg\n    ) *\n    0.5; // extra padding so that the width will be the same size as the size using lg icons\n\n  padding-right: $horizontal-padding;\n  padding-left: $horizontal-padding;\n}\n\n/// Featured button. Modifies the bpk-button\n///\n/// @require {mixin} bpk-button\n/// @require {mixin} bpk-button--large\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--featured();\n///   }\n\n@mixin bpk-button--featured {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-button-featured-text-color,\n    tokens.$bpk-text-primary-inverse-day\n  );\n  @include utils.bpk-themeable-property(\n    background-color,\n    --bpk-button-featured-background-color,\n    tokens.$bpk-private-button-featured-normal-background-day\n  );\n\n  @include utils.bpk-hover {\n    @include _bpk-button-featured-hover;\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-button-featured-active-text-color,\n      tokens.$bpk-text-primary-inverse-day\n    );\n    @include utils.bpk-themeable-property(\n      background-color,\n      --bpk-button-featured-active-background-color,\n      tokens.$bpk-private-button-featured-pressed-background-day\n    );\n  }\n\n  &:disabled {\n    background-color: tokens.$bpk-private-button-disabled-background-day;\n    color: tokens.$bpk-text-disabled-day;\n  }\n\n  // Loading state override: restore hover/pressed appearance while disabled.\n  &.bpk-button--loading:disabled {\n    @include _bpk-button-featured-hover;\n  }\n}\n\n/// Full width button. Modifies the bpk-button to horizontally fill its container\n///\n/// @require {mixin} bpk-button\n///\n/// @example scss\n///   .selector {\n///     @include bpk-button();\n///     @include bpk-button--full-width();\n///   }\n\n@mixin bpk-button--full-width {\n  display: block;\n  width: 100%;\n}\n","/*\n * Backpack - Skyscanner's Design System\n *\n * Copyright 2016 Skyscanner Ltd\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* stylelint-disable at-rule-disallowed-list */\n\n@use 'tokens';\n@use 'borders';\n@use 'radii';\n@use 'utils';\n\n////\n/// @group typography\n////\n\n/// Type factory.\n///\n/// @param {variable} $font-size\n/// @param {variable} $line-height\n/// @param {variable} $font-weight false\n/// @param {variable} $letter-spacing false\n///\n/// @access private\n\n@mixin _bpk-text-factory(\n  $font-size,\n  $line-height,\n  $font-weight: false,\n  $letter-spacing: false\n) {\n  font-size: $font-size;\n  line-height: $line-height;\n\n  @if $font-weight {\n    font-weight: $font-weight;\n  }\n\n  @if $letter-spacing {\n    letter-spacing: $letter-spacing;\n  }\n}\n\n/// Text margin reset.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///   }\n\n@mixin bpk-text {\n  margin: 0;\n}\n\n/// Extra small text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--xs;\n///   }\n\n@mixin bpk-text--xs {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xs,\n    tokens.$bpk-line-height-xs,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Extra small text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-xs;\n///   }\n\n@mixin bpk-text-xs {\n  @include bpk-text--xs;\n}\n\n/// Small text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--sm;\n///   }\n\n@mixin bpk-text--sm {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-sm,\n    tokens.$bpk-line-height-sm,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Small text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-sm;\n///   }\n\n@mixin bpk-text-sm {\n  @include bpk-text--sm;\n}\n\n/// Base text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--base;\n///   }\n\n@mixin bpk-text--base {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-base,\n    tokens.$bpk-line-height-base,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Base text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-base;\n///   }\n\n@mixin bpk-text-base {\n  @include bpk-text--base;\n}\n\n/// Large text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--lg;\n///   }\n\n@mixin bpk-text--lg {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-lg,\n    tokens.$bpk-line-height-lg,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Large text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-lg;\n///   }\n\n@mixin bpk-text-lg {\n  @include bpk-text--lg;\n}\n\n/// Extra large text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--xl;\n///   }\n\n@mixin bpk-text--xl {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xl,\n    tokens.$bpk-line-height-xl,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Extra large text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-xl;\n///   }\n\n@mixin bpk-text-xl {\n  @include bpk-text--xl;\n}\n\n/// Extra extra large text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--xxl;\n///   }\n\n@mixin bpk-text--xxl {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxl,\n    tokens.$bpk-line-height-xxl,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Extra extra large text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-xxl;\n///   }\n\n@mixin bpk-text-xxl {\n  @include bpk-text--xxl;\n}\n\n/// Extra extra large text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--xxxl;\n///   }\n\n@mixin bpk-text--xxxl {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxl,\n    tokens.$bpk-line-height-xxxl,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Extra extra large text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-xxxl;\n///   }\n\n@mixin bpk-text-xxxl {\n  @include bpk-text--xxxl;\n}\n\n/// Extra extra large text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--xxxxl;\n///   }\n\n@mixin bpk-text--xxxxl {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxxl,\n    tokens.$bpk-line-height-xxxxl,\n    tokens.$bpk-font-weight-bold,\n    tokens.$bpk-letter-spacing-tight\n  );\n}\n\n/// Extra extra large text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-xxxxl;\n///   }\n\n@mixin bpk-text-xxxxl {\n  @include bpk-text--xxxxl;\n}\n\n/// Extra extra large text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--xxxxxl;\n///   }\n\n@mixin bpk-text--xxxxxl {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxxxl,\n    tokens.$bpk-line-height-xxxxxl,\n    tokens.$bpk-font-weight-bold,\n    tokens.$bpk-letter-spacing-tight\n  );\n}\n\n/// Extra extra large text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-xxxxxl;\n///   }\n\n@mixin bpk-text-xxxxxl {\n  @include bpk-text--xxxxxl;\n}\n\n/// Bold text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--bold;\n///   }\n\n@mixin bpk-text--bold {\n  font-weight: tokens.$bpk-font-weight-bold;\n}\n\n/// Bold text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-bold;\n///   }\n\n@mixin bpk-text-bold {\n  @include bpk-text--bold;\n}\n\n/// Black text style\n///\n/// @require {mixin} bpk-text\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text;\n///     @include bpk-text--black;\n///   }\n\n@mixin bpk-text--black {\n  font-weight: tokens.$bpk-font-weight-black;\n}\n\n/// Black text style (without margin reset)\n///\n/// @example scss\n///   .selector {\n///     @include bpk-text-heavy;\n///   }\n\n@mixin bpk-text-black {\n  @include bpk-text--black;\n}\n\n/// Caption text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-caption;\n///   }\n\n@mixin bpk-caption {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xs,\n    tokens.$bpk-line-height-xs,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Footnote text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-footnote;\n///   }\n\n@mixin bpk-footnote {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-sm,\n    tokens.$bpk-line-height-sm,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Label-1 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-label-1;\n///   }\n\n@mixin bpk-label-1 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-base,\n    tokens.$bpk-line-height-base,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Label-2 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-label-2;\n///   }\n\n@mixin bpk-label-2 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-sm,\n    tokens.$bpk-line-height-sm,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Label-3 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-label-3;\n///   }\n\n@mixin bpk-label-3 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xs,\n    tokens.$bpk-line-height-xs,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Default body text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-body-default;\n///   }\n\n@mixin bpk-body-default {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-base,\n    tokens.$bpk-line-height-base,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Longform body text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-body-longform;\n///   }\n\n@mixin bpk-body-longform {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-lg,\n    tokens.$bpk-line-height-lg,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Subheading text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-subheading;\n///   }\n\n@mixin bpk-subheading {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xl,\n    tokens.$bpk-line-height-xl,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Editorial 1 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-editorial-1;\n///   }\n\n@mixin bpk-editorial-1 {\n  font-family: var(--bpk-larken-font-stack, tokens.$bpk-font-family-larken);\n\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxxl,\n    tokens.$bpk-line-height-xxxxl,\n    tokens.$bpk-font-weight-light\n  );\n}\n\n/// Editorial 2 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-editorial-2;\n///   }\n\n@mixin bpk-editorial-2 {\n  font-family: var(--bpk-larken-font-stack, tokens.$bpk-font-family-larken);\n\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxl,\n    tokens.$bpk-line-height-xxl,\n    tokens.$bpk-font-weight-light\n  );\n}\n\n/// Editorial 3 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-editorial-3;\n///   }\n\n@mixin bpk-editorial-3 {\n  font-family: var(--bpk-larken-font-stack, tokens.$bpk-font-family-larken);\n\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-lg,\n    tokens.$bpk-line-height-lg,\n    tokens.$bpk-font-weight-book\n  );\n}\n\n/// Hero 1 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hero-1;\n///   }\n\n@mixin bpk-hero-1 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-8-xl,\n    tokens.$bpk-line-height-8-xl,\n    tokens.$bpk-font-weight-black,\n    tokens.$bpk-letter-spacing-hero\n  );\n}\n\n/// Hero 2 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hero-2;\n///   }\n\n@mixin bpk-hero-2 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-7-xl,\n    tokens.$bpk-line-height-7-xl,\n    tokens.$bpk-font-weight-black,\n    tokens.$bpk-letter-spacing-hero\n  );\n}\n\n/// Hero 3 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hero-3;\n///   }\n\n@mixin bpk-hero-3 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-6-xl,\n    tokens.$bpk-line-height-6-xl,\n    tokens.$bpk-font-weight-black,\n    tokens.$bpk-letter-spacing-hero\n  );\n}\n\n/// Hero 4 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hero-4;\n///   }\n\n@mixin bpk-hero-4 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxxxl,\n    tokens.$bpk-line-height-xxxxxl,\n    tokens.$bpk-font-weight-black,\n    tokens.$bpk-letter-spacing-hero\n  );\n}\n\n/// Hero 5 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hero-5;\n///   }\n\n@mixin bpk-hero-5 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxxl,\n    tokens.$bpk-line-height-xxxl,\n    tokens.$bpk-font-weight-black,\n    tokens.$bpk-letter-spacing-hero\n  );\n}\n\n/// Hero 6 text style\n///\n/// @example scss\n///   .selector {\n///     @include bpk-hero-6;\n///   }\n\n@mixin bpk-hero-6 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxl,\n    tokens.$bpk-line-height-xxl,\n    tokens.$bpk-font-weight-black,\n    tokens.$bpk-letter-spacing-hero\n  );\n}\n\n/// Level 1 heading.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-heading-1();\n///   }\n\n@mixin bpk-heading-1 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxxl,\n    tokens.$bpk-line-height-xxxl,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Level 2 heading.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-heading-2();\n///   }\n\n@mixin bpk-heading-2 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xxl,\n    tokens.$bpk-line-height-xxl,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Level 3 heading.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-heading-3();\n///   }\n\n@mixin bpk-heading-3 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-xl,\n    tokens.$bpk-line-height-xl-tight,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Level 4 heading.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-heading-4();\n///   }\n\n@mixin bpk-heading-4 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-lg,\n    tokens.$bpk-line-height-lg-tight,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Level 5 heading.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-heading-5();\n///   }\n\n@mixin bpk-heading-5 {\n  @include _bpk-text-factory(\n    tokens.$bpk-font-size-base,\n    tokens.$bpk-line-height-base-tight,\n    tokens.$bpk-font-weight-bold\n  );\n}\n\n/// Paragraph.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-paragraph();\n///   }\n\n@mixin bpk-paragraph {\n  margin-top: tokens.$bpk-spacing-none;\n  margin-bottom: tokens.bpk-spacing-base();\n}\n\n/// List.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-list();\n///   }\n\n@mixin bpk-list {\n  margin-top: tokens.bpk-spacing-base();\n  margin-bottom: tokens.bpk-spacing-base();\n  padding-left: tokens.bpk-spacing-lg();\n}\n\n/// Nested list. Modifies the bpk-list mixin.\n///\n/// @require {mixin} bpk-list\n///\n/// @example scss\n///   .selector {\n///     @include bpk-list();\n///     @include bpk-list--nested();\n///   }\n\n@mixin bpk-list--nested {\n  margin-top: tokens.$bpk-spacing-none;\n  margin-bottom: tokens.$bpk-spacing-none;\n  padding-top: tokens.bpk-spacing-md();\n  padding-bottom: tokens.bpk-spacing-sm();\n}\n\n/// List item.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-list-item();\n///   }\n\n@mixin bpk-list-item {\n  margin-top: 0;\n  margin-bottom: tokens.bpk-spacing-sm();\n}\n\n/// Underlined part inside an inline link.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link-underlined();\n///   }\n\n@mixin bpk-link-underlined {\n  padding-bottom: tokens.$bpk-one-pixel-rem;\n  transition: background-size 200ms ease;\n  background: linear-gradient(\n    tokens.$bpk-text-primary-day,\n    tokens.$bpk-text-primary-day\n  );\n  background-repeat: no-repeat;\n  background-position: 0 100%;\n  background-size: 100% tokens.$bpk-border-size-sm;\n\n  @include utils.bpk-hover {\n    background-size: 0 tokens.$bpk-border-size-sm;\n  }\n}\n\n/// Underlined part inside an implicit inline link.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link-underlined--implicit();\n///   }\n\n@mixin bpk-link-underlined--implicit {\n  background-size: 0 tokens.$bpk-border-size-sm;\n\n  @include utils.bpk-hover {\n    background-size: 100% tokens.$bpk-border-size-sm;\n  }\n}\n\n/// Underlined part inside an alternate inline link.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link-underlined--alternate();\n///   }\n\n@mixin bpk-link-underlined--alternate {\n  background: linear-gradient(\n    tokens.$bpk-text-on-dark-day,\n    tokens.$bpk-text-on-dark-day\n  );\n  background-repeat: no-repeat;\n  background-position: 0 100%;\n  background-size: 100% tokens.$bpk-border-size-sm;\n\n  @include utils.bpk-hover {\n    background-size: 0 tokens.$bpk-border-size-sm;\n  }\n}\n\n/// Underlined part inside an implicit alternate inline link.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link-underlined-implicit--alternate();\n///   }\n\n@mixin bpk-link-underlined-implicit--alternate {\n  background: linear-gradient(\n    tokens.$bpk-text-on-dark-day,\n    tokens.$bpk-text-on-dark-day\n  );\n  background-repeat: no-repeat;\n  background-position: 0 100%;\n  background-size: 0 tokens.$bpk-border-size-sm;\n\n  @include utils.bpk-hover {\n    background-size: 100% tokens.$bpk-border-size-sm;\n  }\n}\n\n/// Inline link.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link();\n///   }\n\n@mixin bpk-link {\n  position: relative;\n  display: inline;\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  text-decoration: none;\n  cursor: pointer;\n  appearance: none;\n\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-link-color,\n    tokens.$bpk-text-primary-day\n  );\n\n  @include utils.bpk-hover {\n    text-decoration: none;\n\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-hover-color,\n      tokens.$bpk-text-primary-day\n    );\n  }\n\n  &:visited {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-visited-color,\n      tokens.$bpk-text-primary-day\n    );\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-active-color,\n      tokens.$bpk-text-primary-day\n    );\n  }\n}\n\n/// Implicit inline link.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link();\n///     @include bpk-link--implicit();\n///   }\n\n@mixin bpk-link--implicit {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-link-color,\n    tokens.$bpk-text-primary-day\n  );\n\n  @include utils.bpk-hover {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-hover-color,\n      tokens.$bpk-text-primary-day\n    );\n  }\n\n  &:active {\n    text-decoration: none;\n\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-active-color,\n      tokens.$bpk-text-primary-day\n    );\n  }\n}\n\n/// White link. Modifies the bpk-link mixin.\n///\n/// @require {mixin} bpk-link\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link();\n///     @include bpk-link--white();\n///   }\n\n@mixin bpk-link--alternate {\n  @include utils.bpk-themeable-property(\n    color,\n    --bpk-link-alternate-color,\n    tokens.$bpk-text-on-dark-day\n  );\n\n  @include utils.bpk-hover {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-alternate-hover-color,\n      tokens.$bpk-text-on-dark-day\n    );\n  }\n\n  &:visited {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-alternate-visited-color,\n      tokens.$bpk-text-on-dark-day\n    );\n  }\n\n  &:active {\n    @include utils.bpk-themeable-property(\n      color,\n      --bpk-link-alternate-active-color,\n      tokens.$bpk-text-on-dark-day\n    );\n  }\n}\n\n/// White link. Modifies the bpk-link mixin.\n///\n/// @require {mixin} bpk-link\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link();\n///     @include bpk-link--white();\n///   }\n\n@mixin bpk-link--white {\n  @include bpk-link--alternate;\n}\n\n/// Active link. Modifies the bpk-link mixin.\n///\n/// @require {mixin} bpk-link\n///\n/// @example scss\n///   .selector {\n///     @include bpk-link();\n///     @include bpk-link--active();\n///   }\n\n@mixin bpk-link--active {\n  color: tokens.$bpk-text-primary-day;\n\n  &:visited {\n    color: tokens.$bpk-text-primary-day;\n  }\n\n  &:active {\n    color: tokens.$bpk-text-primary-day;\n  }\n}\n\n/// Table.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-table();\n///   }\n\n@mixin bpk-table {\n  width: 100%;\n  margin-bottom: tokens.bpk-spacing-md();\n  border-collapse: collapse;\n  table-layout: fixed;\n\n  @include borders.bpk-border-sm(tokens.$bpk-line-day, '');\n}\n\n/// Alternate table style.\n/// @require {mixin} bpk-table\n///\n/// @example scss\n///   .selector {\n///     @include bpk-table();\n///     @include bpk-table--alternate();\n///   }\n\n@mixin bpk-table--alternate {\n  @include borders.bpk-border-sm(tokens.$bpk-line-day, '');\n}\n\n/// Table cell.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-table__cell();\n///   }\n\n@mixin bpk-table__cell {\n  padding: tokens.bpk-spacing-base();\n}\n\n/// Table head cell. Modifies the bpk-table__cell mixin.\n///\n/// @require {mixin} bpk-table__cell\n///\n/// @example scss\n///   .selector {\n///     @include bpk-table__cell();\n///     @include bpk-table__cell--head();\n///   }\n\n@mixin bpk-table__cell--head {\n  background-color: tokens.$bpk-canvas-contrast-day;\n  text-align: left;\n\n  @include bpk-label-1;\n\n  @include utils.bpk-rtl {\n    text-align: right;\n  }\n}\n\n/// Alternate table head cell. Modifies the bpk-table__cell mixin.\n///\n/// @require {mixin} bpk-table__cell\n///\n/// @example scss\n///   .selector {\n///     @include bpk-table__cell();\n///     @include bpk-table__cell--head-alternate();\n///   }\n\n@mixin bpk-table__cell--head-alternate {\n  background-color: tokens.$bpk-canvas-day;\n  text-align: left;\n\n  @include bpk-text--bold;\n\n  @include utils.bpk-rtl {\n    text-align: right;\n  }\n}\n\n/// Code.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-code();\n///   }\n\n@mixin bpk-code {\n  display: inline;\n  padding: 0 tokens.bpk-spacing-sm();\n  background-color: tokens.$bpk-surface-highlight-day;\n  color: tokens.$bpk-text-primary-day;\n  text-align: left;\n  white-space: nowrap;\n  vertical-align: bottom;\n\n  @include radii.bpk-border-radius-xs;\n\n  @include utils.bpk-rtl {\n    direction: ltr;\n  }\n}\n\n/// Alternate code style suited for display on non-white backgrounds.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-code();\n///     @include bpk-code--alternate();\n///   }\n\n@mixin bpk-code--alternate {\n  background-color: tokens.$bpk-canvas-contrast-day;\n  text-shadow: none;\n}\n\n/// Code block. Modifies the bpk-code mixin.\n///\n/// @require {mixin} bpk-code\n///\n/// @example scss\n///   .selector {\n///     @include bpk-code();\n///     @include bpk-code--block();\n///   }\n\n@mixin bpk-code--block {\n  display: block;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  white-space: inherit;\n  overflow: auto;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n/// Pre (code block wrapper).\n///\n/// @example scss\n///   .selector {\n///     @include bpk-code__pre();\n///   }\n\n@mixin bpk-code__pre {\n  margin: 0 0 tokens.bpk-spacing-base();\n  padding: tokens.bpk-spacing-lg();\n  background-color: tokens.$bpk-surface-highlight-day;\n\n  @include radii.bpk-border-radius-xs;\n}\n\n/// Pre (code block wrapper) alternate style.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-code__pre();\n///     @include bpk-code__pre--alternate();\n///   }\n\n@mixin bpk-code__pre--alternate {\n  background-color: transparent;\n\n  @include borders.bpk-border-sm(tokens.$bpk-line-day);\n}\n\n/// Blockquote.\n///\n/// @example scss\n///   .selector {\n///     @include bpk-blockquote();\n///   }\n\n@mixin bpk-blockquote {\n  margin: 0 0 tokens.bpk-spacing-base() 0;\n  padding: tokens.bpk-spacing-lg();\n\n  @include borders.bpk-border-left-lg(tokens.$bpk-core-accent-day);\n  @include borders.bpk-border-left-lg(\n    var(--bpk-blockquote-bar-color, tokens.$bpk-core-accent-day)\n  );\n\n  @include utils.bpk-rtl {\n    padding: tokens.bpk-spacing-lg();\n    border-left: 0;\n\n    @include borders.bpk-border-right-lg(tokens.$bpk-core-accent-day);\n    @include borders.bpk-border-right-lg(\n      var(--bpk-blockquote-bar-color, tokens.$bpk-core-accent-day)\n    );\n  }\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/// Adds additional spacing above and below blockquotes. Modifies the bpk-blockquote mixin.\n///\n/// @require {mixin} bpk-blockquote\n///\n/// @example scss\n///   .selector {\n///     @include bpk-blockquote();\n///     @include bpk-blockquote--extra-spacing();\n///   }\n\n@mixin bpk-blockquote--extra-spacing {\n  margin-top: tokens.bpk-spacing-xl();\n  margin-bottom: tokens.bpk-spacing-xl();\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}