@design-factory/styles 21.0.0-next.0

package/scss/components/fonts/_fonts-family.scss

@@ -0,0 +1,195 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff') format('woff');
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff') format('woff');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff') format('woff');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff') format('woff');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff') format('woff');
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff') format('woff');
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff') format('woff');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff') format('woff');
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff') format('woff');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff') format('woff');
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff') format('woff');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus Neue Web';
+  src:
+    url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff') format('woff');
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Design-Factory-icon';
+  src: url('#{$font-path}/df-icons/df-icons-light.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 300;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Design-Factory-icon';
+  src: url('#{$font-path}/df-icons/df-icons-solid.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+}
+
+/*!
+ * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: block;
+  src: url('#{$font-path}/font-awesome/fa-light-300.woff2') format('woff2');
+}
+
+.fal,
+.fa-light {
+  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-weight: 300 !important;
+}
+
+/*!
+ * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url('#{$font-path}/font-awesome/fa-solid-900.woff2') format('woff2');
+}
+
+.fas,
+.fa-solid {
+  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-weight: 900 !important;
+}
+
+/*!
+ * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url('#{$font-path}/font-awesome/fa-brands-400.woff2') format('woff2');
+}
+
+.fab,
+.fa-brands {
+  font-family: 'Font Awesome 6 Brands', sans-serif !important;
+  font-weight: 400;
+}

package/scss/components/fonts/_fonts.scss

@@ -0,0 +1,50 @@
+caption {
+  font-size: var(--df-typo-sizing-small);
+}
+
+blockquote {
+  //add
+  font-style: italic;
+  letter-spacing: -0.01rem;
+  line-height: 1.25;
+}
+
+.df-recommend,
+.df-not-recommend,
+.df-warning {
+  font-size: 1.125rem;
+  font-weight: var(--df-typo-weight-regular);
+  line-height: 1.1;
+  border-bottom: 3px solid;
+  padding-bottom: var(--df-spacing-3);
+  margin-bottom: var(--df-spacing-5);
+
+  &:before {
+    font-family: 'Font Awesome 6 Pro', sans-serif;
+    font-weight: 900;
+    margin-inline-end: var(--df-spacing-3);
+  }
+}
+
+.df-recommend {
+  color: var(--df-color-success-alt-default-foreground);
+  &:before {
+    content: '\f058'; // fa-check-circle
+  }
+}
+
+.df-not-recommend {
+  color: var(--df-color-danger-alt-default-foreground);
+  &:before {
+    content: '\f056'; // fa-minus-circle
+  }
+}
+
+.df-warning {
+  color: var(--df-color-warning-alt-default-foreground);
+  border-color: var(--df-color-warning-alt-default-border);
+  &:before {
+    content: '\f071'; // fa-exclamation-triangle
+    color: var(--df-color-icon-warning-foreground);
+  }
+}

package/scss/components/fonts/_fonts.variables.scss

@@ -0,0 +1,68 @@
+$mark-bg: var(--df-color-inert-neutral-alt-background) !default;
+$mark-color: var(--df-color-inert-neutral-alt-foreground) !default;
+
+$blockquote-font-size: var(--df-typo-sizing-2xlarge) !default;
+$blockquote-footer-font-size: var(--df-typo-sizing-large) !default;
+$blockquote-footer-color: var(--df-color-subtext-foreground) !default;
+
+$lead-font-weight: var(--df-typo-weight-light) !default;
+$lead-font-size: var(--df-typo-sizing-2xlarge) !default;
+
+$headings-margin-bottom: var(--df-spacing-3) !default;
+$headings-font-weight: var(--df-typo-weight-medium) !default;
+$headings-font-family: var(--df-typo-font-primaryFamily), sans-serif !default;
+$headings-line-height: 1.5 !default;
+
+$font-size-base: var(--df-typo-sizing-default) !default; // Assumes the browser default, typically `16px`
+$font-size-sm: var(--df-typo-sizing-small) !default;
+$font-size-lg: var(--df-typo-sizing-large) !default;
+
+$font-weight-light: var(--df-typo-weight-light) !default;
+$font-weight-normal: var(--df-typo-weight-regular) !default;
+$font-weight-medium: var(--df-typo-weight-medium) !default;
+// we override semibold as Amadeus font does not have a semibold weight
+$font-weight-semibold: $font-weight-medium !default;
+$font-weight-bold: var(--df-typo-weight-bold) !default;
+// we override bolder as Amadeus font does not have a bolder weight
+$font-weight-bolder: var(--df-typo-weight-bold) !default;
+
+//redefining bootstrap value here since we do not have a token yet and they are used for some calculations
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: var(--df-typo-sizing-4xlarge) !default;
+$h2-font-size: var(--df-typo-sizing-3xlarge) !default;
+$h3-font-size: var(--df-typo-sizing-2xlarge) !default;
+$h4-font-size: $font-size-lg !default;
+$h5-font-size: $font-size-base !default;
+$h6-font-size: $font-size-sm !default;
+
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
+  lg: $font-size-lg,
+  sm: $font-size-sm,
+  xs: var(--df-typo-sizing-xsmall)
+) !default;
+
+$display-font-weight: $font-weight-medium !default;
+
+$display-font-sizes: (
+  1: var(--df-typo-sizing-9xlarge),
+  2: var(--df-typo-sizing-8xlarge),
+  3: var(--df-typo-sizing-7xlarge),
+  4: var(--df-typo-sizing-6xlarge),
+  5: var(--df-typo-sizing-5xlarge),
+  6: $h1-font-size
+) !default;
+
+$display-line-height: 1.1 !default;
+
+$small-font-size: $font-size-sm !default;
+
+$font-family-sans-serif: var(--df-typo-font-primaryFamily), sans-serif !default;

package/scss/components/fonts/_icon-font.scss

@@ -0,0 +1,97 @@
+[class^='icon-'],
+[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'Design-Factory-icon' !important;
+  speak: none;
+  font-weight: 300;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -10%;
+
+  &.df-icon-solid {
+    font-weight: 900;
+  }
+}
+
+[class^='fa-'],
+[class*=' fa-'] {
+  font-family: 'Font Awesome 6 Pro', sans-serif;
+
+  &.fa-solid {
+    font-weight: 900;
+  }
+}
+
+.icon-df-logo:before {
+  content: '\efa1';
+}
+.icon-df-transfers:before {
+  content: '\efa2';
+}
+.icon-df-insurance:before {
+  content: '\ef1f';
+}
+.icon-df-no-camera:before {
+  content: '\ef20';
+}
+.icon-df-safety:before {
+  content: '\ef21';
+}
+.icon-df-first-item:before {
+  content: '\ef22';
+}
+.icon-df-last-item:before {
+  content: '\ef23';
+}
+.icon-df-lookup:before {
+  content: '\ef24';
+}
+.icon-df-facebook:before {
+  content: '\ef1a';
+}
+.icon-df-linkedin:before {
+  content: '\ef1b';
+}
+.icon-df-twitter:before {
+  content: '\ef1c';
+}
+.icon-df-youtube:before {
+  content: '\ef1d';
+}
+.icon-df-bluetooth:before {
+  content: '\ef1e';
+}
+.icon-df-corporate:before {
+  content: '\e900';
+}
+.icon-df-download:before {
+  content: '\e901';
+}
+.icon-df-filter:before {
+  content: '\e902';
+}
+.icon-df-hotel:before {
+  content: '\e903';
+}
+.icon-df-amadeus-mob:before {
+  content: '\e904';
+}
+.icon-df-mobility:before {
+  content: '\e905';
+}
+.icon-df-railways:before {
+  content: '\e906';
+}
+.icon-df-apps:before {
+  content: '\e907';
+}
+.icon-df-caps-lock:before {
+  content: '\e908';
+}
+.icon-df-paper-plane:before {
+  content: '\e909';
+}
+.icon-df-plane-seat:before {
+  content: '\e90a';
+}

package/scss/components/fonts/_multi-lang.mixins.scss

@@ -0,0 +1,8 @@
+@import 'multi-lang/chinese.mixins';
+@import 'multi-lang/cyrillic.mixins';
+@import 'multi-lang/cyrillic-extended.mixins';
+@import 'multi-lang/georgian.mixins';
+@import 'multi-lang/hebrew.mixins';
+@import 'multi-lang/arabic.mixins';
+@import 'multi-lang/japanese.mixins';
+@import 'multi-lang/korean.mixins';

package/scss/components/fonts/multi-lang/_arabic.mixins.scss

@@ -0,0 +1,9 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-arabic($parent-selector) {
+  $headings-font-stack: var(--df-typo-font-primaryFamily), 'Noto Sans', sans-serif;
+  $body-font-stack: 'Source Sans Pro', 'Noto Sans', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans-arabic();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/fonts/multi-lang/_chinese.mixins.scss

@@ -0,0 +1,14 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-chinese($parent-selector) {
+  $headings-font-stack:
+    var(--df-typo-font-primaryFamily), 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN',
+    'Source Han Sans CN', '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体',
+    'Microsoft YaHei New', '微软雅黑', 'Microsoft Yahei', sans-serif;
+  $body-font-stack:
+    'Source Sans Pro', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN', 'Source Han Sans CN',
+    '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体', 'Microsoft YaHei New', '微软雅黑',
+    'Microsoft Yahei', sans-serif;
+
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/fonts/multi-lang/_cyrillic-extended.mixins.scss

@@ -0,0 +1,11 @@
+@import '../font-faces.mixins';
+
+// Kazakh, Tajik, Kirghiz languages
+@mixin df-fonts-multi-lang-cyrillic-extended($parent-selector) {
+  $headings-font-stack: 'Noto Sans', sans-serif;
+  $body-font-stack: 'Source Sans Pro Full', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans();
+  @include df-fonts-multi-lang-font-faces-source-sans-pro-full();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/fonts/multi-lang/_cyrillic.mixins.scss

@@ -0,0 +1,10 @@
+@import '../font-faces.mixins';
+
+// Russian, Ukrainian, Belarusian, Bulgarian, Macedonian languages
+@mixin df-fonts-multi-lang-cyrillic($parent-selector) {
+  $headings-font-stack: 'Amadeus Full', sans-serif;
+  $body-font-stack: 'Source Sans Pro Full', sans-serif;
+  @include df-fonts-multi-lang-font-faces-amadeus-full();
+  @include df-fonts-multi-lang-font-faces-source-sans-pro-full();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/fonts/multi-lang/_georgian.mixins.scss

@@ -0,0 +1,9 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-georgian($parent-selector) {
+  $headings-font-stack: var(--df-typo-font-primaryFamily), 'Noto Sans', sans-serif;
+  $body-font-stack: 'Noto Sans', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans-georgian();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/fonts/multi-lang/_hebrew.mixins.scss

@@ -0,0 +1,9 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-hebrew($parent-selector) {
+  $headings-font-stack: var(--df-typo-font-primaryFamily), 'Noto Sans', sans-serif;
+  $body-font-stack: 'Source Sans Pro', 'Noto Sans', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans-hebrew();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/fonts/multi-lang/_japanese.mixins.scss

@@ -0,0 +1,25 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-japanese($parent-selector) {
+  $headings-font-stack:
+    var(--df-typo-font-primaryFamily), '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
+    'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ',
+    Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
+    'Droid Sans Japanese', sans-serif;
+  $body-font-stack:
+    'Source Sans Pro', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
+    'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ',
+    Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
+    'Droid Sans Japanese', sans-serif;
+
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+
+  #{$parent-selector} {
+    .display-1,
+    .display-2,
+    .display-3,
+    .display-4 {
+      font-weight: 400;
+    }
+  }
+}

package/scss/components/fonts/multi-lang/_korean.mixins.scss

@@ -0,0 +1,12 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-korean($parent-selector) {
+  $headings-font-stack:
+    var(--df-typo-font-primaryFamily), 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림',
+    'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  $body-font-stack:
+    'Source Sans Pro', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림', 'Gulim', '돋움',
+    'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/scss/components/footer/_footer.mixins.scss

@@ -0,0 +1,36 @@
+@mixin footer-link() {
+  color: var(--df-footer-color-link-primary-default-foreground);
+  border-bottom-color: var(--df-footer-color-link-primary-default-foreground);
+  --df-box-shadow-color: var(--df-footer-color-link-primary-default-border);
+
+  &:hover {
+    color: var(--df-footer-color-link-primary-hovered-foreground);
+    border-bottom-color: var(--df-footer-color-link-primary-hovered-foreground);
+    background-color: var(--df-footer-color-link-primary-hovered-background);
+    --df-box-shadow-color: var(--df-footer-color-link-primary-hovered-border);
+  }
+
+  &:active {
+    color: var(--df-footer-color-link-primary-pressed-foreground);
+    border-bottom-color: var(--df-footer-color-link-primary-pressed-foreground);
+    background-color: var(--df-footer-color-link-primary-pressed-background);
+    --df-box-shadow-color: var(--df-footer-color-link-primary-pressed-border);
+  }
+}
+
+@mixin footer-link-visited() {
+  color: var(--df-footer-color-link-visited-default-foreground);
+  border-bottom-color: var(--df-footer-color-link-visited-default-foreground);
+
+  &:hover {
+    color: var(--df-footer-color-link-visited-hovered-foreground);
+    border-bottom-color: var(--df-footer-color-link-visited-hovered-foreground);
+    background-color: var(--df-footer-color-link-visited-hovered-background);
+  }
+
+  &:active {
+    color: var(--df-footer-color-link-visited-pressed-foreground);
+    border-bottom-color: var(--df-footer-color-link-visited-pressed-foreground);
+    background-color: var(--df-footer-color-link-visited-pressed-background);
+  }
+}

package/scss/components/footer/_footer.scss

@@ -0,0 +1,49 @@
+@use './footer.mixins' as footer-mixin;
+
+.df-app-footer {
+  margin-top: auto; // to put it at the bottom of the flex container
+  display: flex;
+  flex-direction: column;
+
+  background-color: var(--df-footer-color-inert-neutral-background);
+  color: var(--df-footer-color-inert-neutral-foreground);
+
+  hr {
+    border-top-color: var(--df-footer-color-inert-neutral-border);
+  }
+
+  .df-app-footer-links {
+    a {
+      &:not(:visited) {
+        @include footer-mixin.footer-link();
+      }
+
+      &:visited {
+        @include footer-mixin.footer-link-visited();
+      }
+
+      --df-inner-box-shadow-color: var(--df-footer-color-inert-neutral-background);
+    }
+  }
+
+  .df-app-footer-line {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding-inline-start: 0;
+  }
+
+  .df-footer-brand {
+    display: flex;
+    align-items: center;
+    outline: none;
+    border-bottom: 0;
+    color: var(--df-footer-color-logo-foreground);
+
+    &:after {
+      display: none;
+    }
+  }
+}