@orangesk/orange-design-system 2.0.0-beta.16 → 2.0.0-beta.18

package/src/components/Megamenu/Megamenu.tsx

@@ -42,9 +42,33 @@ import {
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_CART_ICON,
   CLASS_SPACER,
+  CLASS_TAG,
+  CLASS_TAG_ORANGE,
+  CLASS_TAG_SMALL,
+  CLASS_LIST_INLINE,
 } from "./constants";
 
-export const Megamenu = ({ className }: any) => {
+export const list = [
+  "Dobitie kreditu",
+  "Nedostupnosť služieb",
+  "Faktúry",
+  "Zdieľanie dát",
+  "Prečerpané dáta",
+  "Elektronická faktúra",
+  "Prvá pomoc internet",
+  "Nastavenie zariadení a sim kariet",
+  "Pevny internet do domacnosti",
+  "Dátový roaming",
+  "Nákup online",
+  "Telemarketing",
+];
+
+export type MegamenuProps = {
+  className?: string;
+  searchEmpty?: boolean;
+};
+
+export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
   return (
     <header>
       <nav
@@ -188,7 +212,16 @@ export const Megamenu = ({ className }: any) => {
                             <a href="#">Chcem nové číslo</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Yoxo paušál</a>
+                            <a href="#">Yoxo paušál</a>{" "}
+                            <span
+                              className={cx(
+                                CLASS_TAG,
+                                CLASS_TAG_ORANGE,
+                                CLASS_TAG_SMALL,
+                              )}
+                            >
+                              Novinka
+                            </span>
                           </li>
                         </ul>
 
@@ -365,27 +398,43 @@ export const Megamenu = ({ className }: any) => {
                       type="text"
                       placeholder="Search"
                       name="search-1"
+                      defaultValue={searchEmpty ? "" : "apple"}
                     />
-                    <ul className={CLASS_SUBNAV}>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple hodinky</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple iphone</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple 16</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple pro</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple watch</a>
-                      </li>
-                    </ul>
+                    {searchEmpty ? (
+                      <>
+                        <p>Najhľadanejši výrazy</p>
+                        <ul className={CLASS_LIST_INLINE}>
+                          {list.map((item) => (
+                            <li key={item}>
+                              <a href="/" className={cx(CLASS_TAG)}>
+                                {item}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ) : (
+                      <ul className={CLASS_SUBNAV}>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple hodinky</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple iphone</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple 16</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple pro</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple watch</a>
+                        </li>
+                      </ul>
+                    )}
                   </div>
                 </div>
               </li>
@@ -647,7 +696,16 @@ export const Megamenu = ({ className }: any) => {
                             aria-labelledby="mobile-internet-tv-heading"
                           >
                             <li className={CLASS_SUBNAV_ITEM}>
-                              <a href="#">Ponuka Love</a>
+                              <a href="#">Ponuka Love</a>{" "}
+                              <span
+                                className={cx(
+                                  CLASS_TAG,
+                                  CLASS_TAG_ORANGE,
+                                  CLASS_TAG_SMALL,
+                                )}
+                              >
+                                Novinka
+                              </span>
                             </li>
                             <li className={CLASS_SUBNAV_ITEM}>
                               <a href="#">Výhodný pár zariadení</a>

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -33,9 +33,12 @@ import {
   CLASS_ACCORDION_ITEM,
   CLASS_ACCORDION_TITLE,
   CLASS_SPACER_SMALL,
+  CLASS_LIST_INLINE,
+  CLASS_TAG,
 } from "./constants";
+import { list, MegamenuProps } from "./Megamenu";
 
-export const MegamenuBlog = ({ className }: any) => {
+export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
   return (
     <header>
       <nav
@@ -113,27 +116,41 @@ export const MegamenuBlog = ({ className }: any) => {
                       type="text"
                       placeholder="Search"
                       name="search-1"
+                      defaultValue={searchEmpty ? "" : "apple"}
                     />
-                    <ul className={CLASS_SUBNAV}>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple hodinky</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple iphone</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple 16</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple pro</a>
-                      </li>
-                      <li className={CLASS_SUBNAV_ITEM}>
-                        <a href="#">apple watch</a>
-                      </li>
-                    </ul>
+                    {searchEmpty ? (
+                      <>
+                        <p>Najhľadanejši výrazy</p>
+                        <ul className={CLASS_LIST_INLINE}>
+                          {list.map((item) => (
+                            <a key={item}>
+                              <span className={cx(CLASS_TAG)}>{item}</span>
+                            </a>
+                          ))}
+                        </ul>
+                      </>
+                    ) : (
+                      <ul className={CLASS_SUBNAV}>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple hodinky</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple iphone</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple 16</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple pro</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple watch</a>
+                        </li>
+                      </ul>
+                    )}
                   </div>
                 </div>
               </li>

package/src/components/Megamenu/constants.ts

@@ -49,6 +49,8 @@ export const CLASS_INPUT = `${CLASS_ROOT}__input`;
 export const CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input--search-icon-with-placeholder`;
 
 export const CLASS_TAG = `${CLASS_ROOT}__tag`;
+export const CLASS_TAG_ORANGE = `${CLASS_ROOT}__tag--orange`;
+export const CLASS_TAG_SMALL = `${CLASS_ROOT}__tag--small`;
 export const CLASS_TAG_TRANSPARENT = `${CLASS_ROOT}__tag--transparent`;
 export const CLASS_TAG_LARGE = `${CLASS_ROOT}__tag--large`;
 

package/src/components/Megamenu/styles/mixins.scss

@@ -206,7 +206,7 @@
   left: 0;
   width: 100%;
   background-color: var(--color-surface-primary);
-  padding: convert.to-rem(20px) 0;
+  padding: convert.to-rem(60px) 0 convert.to-rem(60px) 0;
   display: none;
   opacity: 0;
   z-index: 15;
@@ -353,6 +353,8 @@
 }
 
 @mixin subnav-item {
+  display: flex;
+  gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
   &:last-child {
@@ -705,6 +707,22 @@
       @include tag.color($variant);
     }
   }
+
+  // Interactive styles for button and anchor tags
+  &:not(&--transparent):where(button) {
+    @include tag.button();
+    z-index: 2;
+  }
+
+  &:not(&--transparent):where(a) {
+    @include tag.button();
+    z-index: 2;
+    text-decoration: none !important;
+  }
+
+  &:not(&--transparent) {
+    @include tag.buttton-disabled();
+  }
 }
 
 @mixin tag-transparent {

package/src/components/Megamenu/styles/style.scss

@@ -11,10 +11,12 @@
 }
 
 #{config.$class-root},
+.is-light #{config.$class-root},
 #{config.$class-root}.is-light {
   @include mixins.light-vars;
 }
 
+.is-dark #{config.$class-root},
 #{config.$class-root}.is-dark {
   @include mixins.dark-vars;
 }

package/src/components/Modal/ModalProductHeader.tsx

@@ -5,6 +5,8 @@ interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;
   /** Use small spacing */
   space?: "small";
+  /** Optional id for accessibility (e.g., for aria-labelledby) */
+  titleId?: string;
 }
 
 export const CLASS_ROOT = "modal__product";
@@ -12,7 +14,7 @@ export const CLASS_ROOT = "modal__product";
 const ModalProductHeader = React.forwardRef<
   HTMLDivElement,
   ModalProductHeaderProps
->(({ className, children, image, space, ...other }, ref) => {
+>(({ className, children, image, space, titleId, ...other }, ref) => {
   const classes = cx(
     `${CLASS_ROOT}-header`,
     {
@@ -25,7 +27,9 @@ const ModalProductHeader = React.forwardRef<
 
   return (
     <div className={classes} ref={ref} {...other}>
-      <div className={contentClasses}>{children}</div>
+      <div className={contentClasses} id={titleId}>
+        {children}
+      </div>
       {image}
     </div>
   );

package/src/components/Modal/tests/ModalProductHeader.unit.test.js

@@ -70,4 +70,16 @@ describe("rendering ModalProductHeader", () => {
       container.querySelector(".modal__product-content"),
     ).toHaveTextContent("Product Header");
   });
+
+  it("has titleId attribute when titleId prop is provided", () => {
+    const { container } = render(
+      <ModalProductHeader titleId="test-title-id">
+        Product Header
+      </ModalProductHeader>,
+    );
+    expect(container.querySelector(".modal__product-content")).toHaveAttribute(
+      "id",
+      "test-title-id",
+    );
+  });
 });

package/src/components/PromoBanner/PromoBanner.tsx

@@ -39,7 +39,7 @@ export const PromoBanner = ({
     className,
   );
   return (
-    <Grid className={classes}>
+    <Grid columnGapSize="large" className={classes}>
       {variant === "reverse" && image && (
         <GridCol
           size={{ xs: 12, md: 6 }}

package/src/components/PromoBanner/styles/mixins.scss

@@ -29,8 +29,13 @@
   text-align: end;
   align-self: center;
 
+  padding-top: space.get("xlarge");
+  padding-bottom: space.get("xlarge");
+
   @include breakpoint.get("md", "down") {
     text-align: center;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 

package/src/components/Table/tests/Table.conformance.test.js

@@ -64,7 +64,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "attribute-boolean-style": "off", "valid-id": "off" },
+    rules: {
+      "attribute-boolean-style": "off",
+      "valid-id": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

package/src/components/Tooltip/tests/Tooltip.conformance.test.js

@@ -34,7 +34,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "no-inline-style": "off", "attribute-boolean-style": "off" },
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

package/src/styles/base/globals.scss

@@ -1,42 +1,6 @@
 @use "../tokens/base";
 @use "../tokens/space";
-@use "../tokens/color";
-@use "../tokens/tag-colors";
-
-// Consider to add more conditions for light and dark themes
-:root,
-:host,
-:host(.is-light),
-.is-light,
-.bg-white,
-#root.is-light,
-#root-modals.is-light,
-#root-tooltips.is-light,
-#root-dropdowns.is-light {
-  @each $name, $value in color.$colors-light {
-    --color-#{$name}: #{$value};
-  }
-  @each $name, $value in tag-colors.$tag-colors-light {
-    --#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
-}
-
-:host(.is-dark),
-.is-dark,
-.bg-black,
-#root.is-dark,
-#root-modals.is-dark,
-#root-tooltips.is-dark,
-#root-dropdowns.is-dark {
-  @each $name, $value in color.$colors-dark {
-    --color-#{$name}: #{$value};
-  }
-  @each $name, $value in tag-colors.$tag-colors-dark {
-    --#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
-}
+@use "../tokens/color-vars";
 
 :root,
 :host {

package/src/styles/base/styleguide.scss

@@ -30,6 +30,7 @@ main {
 
 .code-wrapper {
   border: 1px solid var(--color-border-strong);
+  margin-bottom: 30px;
 
   pre {
     margin-bottom: 0 !important;

package/src/styles/export/color.js

@@ -12,12 +12,12 @@ export const exports = {
   "violet": "#a885d8",
   "yellow": "#ffd200",
   "gray-300": "#eeeeee",
-  "gray-400": "#ddd",
+  "gray-400": "#dddddd",
   "gray-500": "#dddddd",
   "gray-600": "#999",
   "gray-700": "#666666",
-  "gray-800": "#595959",
-  "gray-900": "#333",
+  "gray-800": "#666666",
+  "gray-900": "#333333",
   "success": "rgba(34, 135, 34, 0.0784313725)",
   "danger": "rgba(205, 60, 20, 0.0784313725)",
   "info": "rgba(65, 112, 216, 0.0784313725)",

package/src/styles/tokens/color-vars.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "./color";
+@use "./tag-colors";
+
+// Light theme CSS variables
+:root,
+:host,
+:host(.is-light),
+.is-light,
+.bg-white,
+#root.is-light,
+#root-modals.is-light,
+#root-tooltips.is-light,
+#root-dropdowns.is-light {
+  @each $name, $value in color.$colors-light {
+    --color-#{$name}: #{$value};
+  }
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}
+
+// Dark theme CSS variables
+:host(.is-dark),
+.is-dark,
+.bg-black,
+#root.is-dark,
+#root-modals.is-dark,
+#root-tooltips.is-dark,
+#root-dropdowns.is-dark {
+  @each $name, $value in color.$colors-dark {
+    --color-#{$name}: #{$value};
+  }
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}

package/src/styles/tokens/color.scss

@@ -119,14 +119,14 @@ $pink: map.get($colors-light, fill-accent3);
 $violet: map.get($colors-light, fill-accent4);
 $yellow: map.get($colors-light, fill-accent5);
 $yellow-lighter: #fff6b6; // not in new palette, fallback
-$red: #ff4d4d; // not in new palette, fallback
+$red: map.get($colors-dark, icon-negative);
 $gray-300: map.get($colors-light, surface-subtle);
-$gray-400: #ddd; // fallback
+$gray-400: map.get($colors-light, fill-moderate);
 $gray-500: map.get($colors-light, surface-moderate);
 $gray-600: #999; // fallback
 $gray-700: map.get($colors-light, text-secondary); // fallback
-$gray-800: #595959; // fallback
-$gray-900: #333; // fallback
+$gray-800: map.get($colors-light, text-secondary);
+$gray-900: map.get($colors-dark, border-subtle);
 $success: map.get($colors-light, fill-positive);
 $danger: map.get($colors-light, fill-negative);
 $info: map.get($colors-light, fill-information);

package/src/styles/typography/mixins.scss

@@ -166,13 +166,12 @@
 
 @mixin list-inline() {
   @include list-unstyled();
+  gap: space.get("small");
+  display: flex;
+  flex-wrap: wrap;
 
   > li {
-    display: inline-block;
-
-    &:not(:last-child) {
-      margin-right: space.get("small");
-    }
+    display: inline-flex;
   }
 }
 

package/src/styles/utilities/text.scss

@@ -31,6 +31,23 @@
     text-underline-offset: 0.1em !important;
   }
 
+  .no-underline {
+    text-decoration: none !important;
+  }
+
+  .underline-hover {
+    text-decoration: none !important;
+
+    &:hover {
+      text-decoration: underline !important;
+    }
+  }
+
+  .no-accent {
+    color: inherit !important;
+    text-decoration: underline;
+  }
+
   small,
   .small {
     @include generate.css-map(typographyConfig.$body-text, "small");

package/build/lib/after-components.css

@@ -1,2 +0,0 @@
-@layer utilities{.background-primary{background-color:var(--color-background-primary)!important}.background-secondary{background-color:var(--color-background-secondary)!important}.background-contrast{background-color:var(--color-background-contrast)!important}.background-accent{background-color:var(--color-background-accent)!important}.background-accent1-blog{background-color:var(--color-background-accent1-blog)!important}.background-accent2-blog{background-color:var(--color-background-accent2-blog)!important}.surface-primary{background-color:var(--color-surface-primary)!important}.surface-secondary{background-color:var(--color-surface-secondary)!important}.surface-tertiary{background-color:var(--color-surface-tertiary)!important}.surface-subtle{background-color:var(--color-surface-subtle)!important}.surface-moderate{background-color:var(--color-surface-moderate)!important}.surface-contrast{background-color:var(--color-surface-contrast)!important}.surface-accent{background-color:var(--color-surface-accent)!important}.fill-primary{background-color:var(--color-fill-primary)!important}.fill-secondary{background-color:var(--color-fill-secondary)!important}.fill-tertiary{background-color:var(--color-fill-tertiary)!important}.fill-subtle{background-color:var(--color-fill-subtle)!important}.fill-moderate{background-color:var(--color-fill-moderate)!important}.fill-disabled{background-color:var(--color-fill-disabled)!important}.fill-contrast{background-color:var(--color-fill-contrast)!important}.fill-accent1{background-color:var(--color-fill-accent1)!important}.fill-accent2{background-color:var(--color-fill-accent2)!important}.fill-accent3{background-color:var(--color-fill-accent3)!important}.fill-accent4{background-color:var(--color-fill-accent4)!important}.fill-accent5{background-color:var(--color-fill-accent5)!important}.fill-information{background-color:var(--color-fill-information)!important}.fill-positive{background-color:var(--color-fill-positive)!important}.fill-warning{background-color:var(--color-fill-warning)!important}.fill-negative{background-color:var(--color-fill-negative)!important}.border-subtle{border-color:var(--color-border-subtle)!important}.border-strong{border-color:var(--color-border-strong)!important}.border-contrast{border-color:var(--color-border-contrast)!important}.border-accent{border-color:var(--color-border-accent)!important}.border-information{border-color:var(--color-border-information)!important}.border-positive{border-color:var(--color-border-positive)!important}.border-warning{border-color:var(--color-border-warning)!important}.border-negative{border-color:var(--color-border-negative)!important}.text-default{color:var(--color-text-default)!important}.text-secondary{color:var(--color-text-secondary)!important}.text-disabled{color:var(--color-text-disabled)!important}.text-inverse{color:var(--color-text-inverse)!important}.text-accent{color:var(--color-text-accent)!important}.icon-default{color:var(--color-icon-default)!important}.icon-inverse{color:var(--color-icon-inverse)!important}.icon-brand{color:var(--color-icon-brand)!important}.icon-accent{color:var(--color-icon-accent)!important}.icon-disabled{color:var(--color-icon-disabled)!important}.icon-information{color:var(--color-icon-information)!important}.icon-positive{color:var(--color-icon-positive)!important}.icon-warning{color:var(--color-icon-warning)!important}.icon-negative{color:var(--color-icon-negative)!important}.color-black{color:#000!important}.color-orange{color:var(--color-text-accent)!important}.color-gray{color:#595959!important}.color-white{color:#fff!important}.color-blue{color:var(--color-icon-information)!important}.color-danger{color:var(--color-icon-negative)!important}.bg-white{background-color:#fff!important;color:var(--color-text-default)}.bg-white .color-blue,.bg-white.color-blue{color:var(--color-icon-information)!important}.bg-black{background-color:#141414!important;color:var(--color-text-inverse)}.bg-black .color-gray,.bg-black.color-gray{color:#ddd!important}.bg-black .color-blue,.bg-black.color-blue{color:#4bb4e6!important}.bg-orange{background-color:var(--color-surface-secondary)!important;color:#000!important}.bg-orange-dark{background-color:var(--color-surface-tertiary)!important;color:var(--color-text-inverse)!important}.bg-gray{background-color:var(--color-surface-subtle)!important}.bg-gray-lighter{background-color:var(--color-background-secondary)!important}.bg-blue{background-color:var(--color-fill-accent1)!important}.bg-blue,.bg-green{color:#000!important}.bg-green{background-color:var(--color-fill-accent2)!important}.bg-pink{background-color:var(--color-fill-accent3)!important}.bg-pink,.bg-violet{color:#000!important}.bg-violet{background-color:var(--color-fill-accent4)!important}.bg-yellow{background-color:var(--color-fill-accent5)!important;color:#000!important}.bg-yellow-lighter{background-color:#fff6b6!important;color:#000!important}.bg-red{background-color:#ff4d4d!important;color:#000!important}.bg-accent{background-color:var(--color-background-accent)!important}.bg-accent,.bg-accent1-blog{color:var(--color-text-default)!important}.bg-accent1-blog{background-color:var(--color-background-accent1-blog)!important}.bg-accent2-blog{background-color:var(--color-background-accent2-blog)!important;color:var(--color-text-default)!important}.bg-orange-dark::selection,.bg-orange::selection,.surface-secondary::selection,.surface-tertiary::selection{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.color-gray::selection{color:var(--color-text-default)}.background-none,.bg-none{background:none!important}.bold,strong{font-weight:700!important}.normal{font-weight:400!important}.thin{font-weight:300!important}.italic,em{font-style:italic!important}.underline{text-decoration:underline!important;text-underline-offset:.1em!important}.small,small{font-size:1rem;font-weight:400;letter-spacing:-.00625rem;line-height:1.5rem}.large{font-size:1.25rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.875rem}.text-nowrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-left{text-align:left!important}.align-center{text-align:center!important}.align-right{text-align:right!important}}@layer utilities{@media screen and (min-width:480px){.align-sm-right{text-align:right!important}.align-sm-left{text-align:left!important}.align-sm-center{text-align:center!important}}@media screen and (min-width:768px){.align-md-right{text-align:right!important}.align-md-left{text-align:left!important}.align-md-center{text-align:center!important}}@media screen and (min-width:992px){.align-lg-right{text-align:right!important}.align-lg-left{text-align:left!important}.align-lg-center{text-align:center!important}}@media screen and (min-width:1240px){.align-xl-right{text-align:right!important}.align-xl-left{text-align:left!important}.align-xl-center{text-align:center!important}}@media screen and (min-width:1380px){.align-xxl-right{text-align:right!important}.align-xxl-left{text-align:left!important}.align-xxl-center{text-align:center!important}}.reset-text-decoration{text-decoration:none!important}.align-middle{vertical-align:middle!important}.align-top{vertical-align:top!important}.align-bottom{vertical-align:bottom!important}.align-baseline{vertical-align:baseline!important}.reset-font-weight{font-weight:400!important}.reset-font-size{font-size:16px!important;line-height:1.25!important}.text-fullwidth{max-width:none}.text-readable{max-width:35em}.text-narrow{max-width:22em}.border-radius--medium{border-radius:10px}.border{border:2px solid var(--color-border-contrast)}.border.is-invalid{border-color:var(--color-border-negative)!important}.border--gray{border-color:var(--color-border-subtle)}.border--gray.border-hover:hover,.border--gray.is-indicating:hover{border-color:var(--color-text-secondary)}.border--orange{border-color:var(--color-border-accent)}.mb{margin-bottom:1.25rem}.mb-xsmall{margin-bottom:5px!important}.mb-small{margin-bottom:10px!important}.mb-medium{margin-bottom:20px!important}.mb-large{margin-bottom:30px!important}.mb-xlarge{margin-bottom:60px!important}.mb-none{margin-bottom:0!important}}@layer utilities{@media screen and (min-width:480px){.mb-sm-xsmall{margin-bottom:5px!important}.mb-sm-small{margin-bottom:10px!important}.mb-sm-medium{margin-bottom:20px!important}.mb-sm-large{margin-bottom:30px!important}.mb-sm-xlarge{margin-bottom:60px!important}.mb-sm-none{margin-bottom:0!important}}@media screen and (min-width:768px){.mb-md-xsmall{margin-bottom:5px!important}.mb-md-small{margin-bottom:10px!important}.mb-md-medium{margin-bottom:20px!important}.mb-md-large{margin-bottom:30px!important}.mb-md-xlarge{margin-bottom:60px!important}.mb-md-none{margin-bottom:0!important}}@media screen and (min-width:992px){.mb-lg-xsmall{margin-bottom:5px!important}.mb-lg-small{margin-bottom:10px!important}.mb-lg-medium{margin-bottom:20px!important}.mb-lg-large{margin-bottom:30px!important}.mb-lg-xlarge{margin-bottom:60px!important}.mb-lg-none{margin-bottom:0!important}}@media screen and (min-width:1240px){.mb-xl-xsmall{margin-bottom:5px!important}.mb-xl-small{margin-bottom:10px!important}.mb-xl-medium{margin-bottom:20px!important}.mb-xl-large{margin-bottom:30px!important}.mb-xl-xlarge{margin-bottom:60px!important}.mb-xl-none{margin-bottom:0!important}}@media screen and (min-width:1380px){.mb-xxl-xsmall{margin-bottom:5px!important}.mb-xxl-small{margin-bottom:10px!important}.mb-xxl-medium{margin-bottom:20px!important}.mb-xxl-large{margin-bottom:30px!important}.mb-xxl-xlarge{margin-bottom:60px!important}.mb-xxl-none{margin-bottom:0!important}}.mt-none{margin-top:0!important}.pt-none{padding-top:0!important}.mr-none{margin-right:0!important}.pr-none{padding-right:0!important}.pb-none{padding-bottom:0!important}.ml-none{margin-left:0!important}.pl-none{padding-left:0!important}.no-mrg{margin:0!important}.no-pad{padding:0!important}.clearfix:after,.clearfix:before{content:"";display:table}.clear,.clearfix:after{clear:both}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-space-around{justify-content:space-around}.justify-content-space-between{justify-content:space-between}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.align-self-left{margin-left:0;margin-right:auto}.align-self-right{margin-left:auto;margin-right:0}.align-self-center{margin-left:auto;margin-right:auto}.align-self-top{align-self:flex-start}.align-self-bottom{align-self:flex-end}.align-self-middle{align-self:center}.align-self-stretch{align-self:stretch}.align-self-last{order:999}@media screen and (min-width:480px){.justify-content-start--sm{justify-content:flex-start}.justify-content-end--sm{justify-content:flex-end}.justify-content-center--sm{justify-content:center}.justify-content-space-around--sm{justify-content:space-around}.justify-content-space-between--sm{justify-content:space-between}.align-items-start--sm{align-items:flex-start}.align-items-end--sm{align-items:flex-end}.align-items-center--sm{align-items:center}.align-items-stretch--sm{align-items:stretch}.align-self-left--sm{margin-left:0;margin-right:auto}.align-self-right--sm{margin-left:auto;margin-right:0}.align-self-center--sm{margin-left:auto;margin-right:auto}.align-self-top--sm{align-self:flex-start}.align-self-bottom--sm{align-self:flex-end}.align-self-middle--sm{align-self:center}.align-self-stretch--sm{align-self:stretch}.align-self-last--sm{order:999}}@media screen and (min-width:768px){.justify-content-start--md{justify-content:flex-start}.justify-content-end--md{justify-content:flex-end}.justify-content-center--md{justify-content:center}.justify-content-space-around--md{justify-content:space-around}.justify-content-space-between--md{justify-content:space-between}.align-items-start--md{align-items:flex-start}.align-items-end--md{align-items:flex-end}.align-items-center--md{align-items:center}.align-items-stretch--md{align-items:stretch}.align-self-left--md{margin-left:0;margin-right:auto}.align-self-right--md{margin-left:auto;margin-right:0}.align-self-center--md{margin-left:auto;margin-right:auto}.align-self-top--md{align-self:flex-start}.align-self-bottom--md{align-self:flex-end}.align-self-middle--md{align-self:center}.align-self-stretch--md{align-self:stretch}.align-self-last--md{order:999}}@media screen and (min-width:992px){.justify-content-start--lg{justify-content:flex-start}.justify-content-end--lg{justify-content:flex-end}.justify-content-center--lg{justify-content:center}.justify-content-space-around--lg{justify-content:space-around}.justify-content-space-between--lg{justify-content:space-between}.align-items-start--lg{align-items:flex-start}.align-items-end--lg{align-items:flex-end}.align-items-center--lg{align-items:center}.align-items-stretch--lg{align-items:stretch}.align-self-left--lg{margin-left:0;margin-right:auto}.align-self-right--lg{margin-left:auto;margin-right:0}.align-self-center--lg{margin-left:auto;margin-right:auto}.align-self-top--lg{align-self:flex-start}.align-self-bottom--lg{align-self:flex-end}.align-self-middle--lg{align-self:center}.align-self-stretch--lg{align-self:stretch}.align-self-last--lg{order:999}}@media screen and (min-width:1240px){.justify-content-start--xl{justify-content:flex-start}.justify-content-end--xl{justify-content:flex-end}.justify-content-center--xl{justify-content:center}.justify-content-space-around--xl{justify-content:space-around}.justify-content-space-between--xl{justify-content:space-between}.align-items-start--xl{align-items:flex-start}.align-items-end--xl{align-items:flex-end}.align-items-center--xl{align-items:center}.align-items-stretch--xl{align-items:stretch}.align-self-left--xl{margin-left:0;margin-right:auto}.align-self-right--xl{margin-left:auto;margin-right:0}.align-self-center--xl{margin-left:auto;margin-right:auto}.align-self-top--xl{align-self:flex-start}.align-self-bottom--xl{align-self:flex-end}.align-self-middle--xl{align-self:center}.align-self-stretch--xl{align-self:stretch}.align-self-last--xl{order:999}}@media screen and (min-width:1380px){.justify-content-start--xxl{justify-content:flex-start}.justify-content-end--xxl{justify-content:flex-end}.justify-content-center--xxl{justify-content:center}.justify-content-space-around--xxl{justify-content:space-around}.justify-content-space-between--xxl{justify-content:space-between}.align-items-start--xxl{align-items:flex-start}.align-items-end--xxl{align-items:flex-end}.align-items-center--xxl{align-items:center}.align-items-stretch--xxl{align-items:stretch}.align-self-left--xxl{margin-left:0;margin-right:auto}.align-self-right--xxl{margin-left:auto;margin-right:0}.align-self-center--xxl{margin-left:auto;margin-right:auto}.align-self-top--xxl{align-self:flex-start}.align-self-bottom--xxl{align-self:flex-end}.align-self-middle--xxl{align-self:center}.align-self-stretch--xxl{align-self:stretch}.align-self-last--xxl{order:999}}.aspect-ratio-21-9{aspect-ratio:21/9;border:0;max-width:100%}.aspect-ratio-16-9{aspect-ratio:16/9;border:0;max-width:100%}.aspect-ratio-4-3{aspect-ratio:4/3;border:0;max-width:100%}.aspect-ratio-1-1{aspect-ratio:1/1;border:0;max-width:100%}.aspect-ratio-3-2{aspect-ratio:3/2;border:0;max-width:100%}.d-block{display:block}.d-inline-block{display:inline-block}.d-inline{display:inline}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.flex-column{flex-direction:column}.fullwidth{width:100%!important}@media screen and (min-width:0) and (max-width:479.98px){.fullwidth-xs-only{width:100%!important}}.fullheight{height:100%!important}.center-block{margin-left:auto!important;margin-right:auto!important}.relative{position:relative!important}.absolute{position:absolute!important}.sr-only,.visually-hidden{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hide{display:none!important}.invisible{visibility:hidden}}@layer utilities{@media screen and (min-width:480px){.show-xs-only{display:none!important}}@media screen and (min-width:0) and (max-width:479.98px){.hide-xs-only{display:none!important}}@media screen and (max-width:479.98px){.show-sm{display:none!important}}@media screen and (min-width:480px){.hide-sm{display:none!important}}@media screen and (max-width:479.98px){.show-sm-only{display:none!important}}@media screen and (min-width:768px){.show-sm-only{display:none!important}}@media screen and (min-width:480px) and (max-width:767.98px){.hide-sm-only{display:none!important}}@media screen and (max-width:767.98px){.show-md{display:none!important}}@media screen and (min-width:768px){.hide-md{display:none!important}}@media screen and (max-width:767.98px){.show-md-only{display:none!important}}@media screen and (min-width:992px){.show-md-only{display:none!important}}@media screen and (min-width:768px) and (max-width:991.98px){.hide-md-only{display:none!important}}@media screen and (max-width:991.98px){.show-lg{display:none!important}}@media screen and (min-width:992px){.hide-lg{display:none!important}}@media screen and (max-width:991.98px){.show-lg-only{display:none!important}}@media screen and (min-width:1240px){.show-lg-only{display:none!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.hide-lg-only{display:none!important}}@media screen and (max-width:1239.98px){.show-xl{display:none!important}}@media screen and (min-width:1240px){.hide-xl{display:none!important}}@media screen and (max-width:1239.98px){.show-xl-only{display:none!important}}@media screen and (min-width:1380px){.show-xl-only{display:none!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.hide-xl-only{display:none!important}}@media screen and (max-width:1379.98px){.show-xxl{display:none!important}}@media screen and (min-width:1380px){.hide-xxl{display:none!important}}@media screen and (max-width:1379.98px){.show-xxl-only{display:none!important}}}@layer utilities{.order-1{order:1!important}@media screen and (min-width:0) and (max-width:479.98px){.order-1-xs-only{order:1!important}}.order-2{order:2!important}@media screen and (min-width:0) and (max-width:479.98px){.order-2-xs-only{order:2!important}}@media screen and (min-width:480px){.order-1-sm{order:1!important}}@media screen and (min-width:480px) and (max-width:767.98px){.order-1-sm-only{order:1!important}}@media screen and (min-width:480px){.order-2-sm{order:2!important}}@media screen and (min-width:480px) and (max-width:767.98px){.order-2-sm-only{order:2!important}}@media screen and (min-width:768px){.order-1-md{order:1!important}}@media screen and (min-width:768px) and (max-width:991.98px){.order-1-md-only{order:1!important}}@media screen and (min-width:768px){.order-2-md{order:2!important}}@media screen and (min-width:768px) and (max-width:991.98px){.order-2-md-only{order:2!important}}@media screen and (min-width:992px){.order-1-lg{order:1!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.order-1-lg-only{order:1!important}}@media screen and (min-width:992px){.order-2-lg{order:2!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.order-2-lg-only{order:2!important}}@media screen and (min-width:1240px){.order-1-xl{order:1!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.order-1-xl-only{order:1!important}}@media screen and (min-width:1240px){.order-2-xl{order:2!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.order-2-xl-only{order:2!important}}@media screen and (min-width:1380px){.order-1-xxl{order:1!important}.order-2-xxl{order:2!important}}}@layer utilities{.table-scrollable,[class*=horizontal-scroll]{scroll-snap-type:x mandatory;scrollbar-color:var(--color-fill-contrast) var(--color-surface-moderate);scrollbar-width:thin}.table-scrollable>*,[class*=horizontal-scroll]>*{scroll-snap-align:start}.table-scrollable::-webkit-scrollbar,[class*=horizontal-scroll]::-webkit-scrollbar{appearance:none;background-color:var(--color-surface-moderate);border-radius:99px;height:.375rem}.table-scrollable::-webkit-scrollbar-thumb,[class*=horizontal-scroll]::-webkit-scrollbar-thumb{background-color:var(--color-fill-contrast);border-radius:99px;opacity:1}.horizontal-scroll{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}@media screen and (min-width:480px){.horizontal-scroll--sm{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--sm-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:768px){.horizontal-scroll--md{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--md-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:992px){.horizontal-scroll--lg{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--lg-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:1240px){.horizontal-scroll--xl{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--xl-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:1380px){.horizontal-scroll--xxl{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--xxl-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}}@layer utilities{.megamenu-header ul,.mm-header ul,.osk-footer-menu{margin-top:0;max-width:none}.megamenu-header ul li,.mm-header ul li,.osk-footer-menu li{margin-bottom:0;margin-top:0}}
-/*# sourceMappingURL=after-components.css.map */