@swisspost/design-system-styles 10.0.0-next.75 → 10.0.0

package/components/tabs/_tab-title.scss

@@ -1,167 +1,440 @@
-@use './../../mixins/color' as color-mx;
 @use './../../mixins/utilities' as utilities-mx;
 @use './../../variables/color';
-@use './../../variables/spacing';
 @use './../../variables/components/nav';
-
 @use './../../functions/tokens';
-@use './../../tokens/utilities';
+@use './../../tokens/components' as components;
+@use './../../tokens/helpers';
+
+tokens.$default-map: components.$post-tabs;
 
-tokens.$default-map: utilities.$post-spacing;
+$tabs-outline-offset: calc(
+  tokens.get('focus-outline-offset2', helpers.$post-focus) + -1 *
+    (tokens.get('post-tabs-border-width'))
+);
 
-.tab-title,
-.nav-item a {
-  display: inline-block;
+$adjusted-border-radius: calc(
+  tokens.get('focus-border-radius', helpers.$post-focus) - $tabs-outline-offset
+);
+
+// Common for all variants
+post-tab-item.tab-title,
+post-tab-item.nav-item a {
   position: relative;
   box-sizing: border-box;
-  padding: nav.$nav-link-padding;
-  transition: background-color 100ms;
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-  opacity: 0.7;
-  color: color.$black;
-  text-decoration: none;
   background-color: transparent;
   cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: tokens.get('post-tabs-tab-font-weight');
 
-  &:hover {
-    opacity: 1;
-    background-color: color.$black-alpha-60;
-    color: color.$white;
+  post-icon {
+    @include utilities-mx.high-contrast-mode() {
+      forced-color-adjust: auto;
+      color: inherit;
+    }
   }
 
-  // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
-  &:focus-visible {
-    outline: transparent;
-    opacity: 1;
-    background-color: color.$black-alpha-60;
-    color: color.$white;
-    box-shadow: none;
+  @include utilities-mx.focus-style() {
+    outline-offset: $tabs-outline-offset !important;
+  }
+}
+
+// Content Tabs Variant
+post-tab-item.tab-title {
+  transition:
+    background-color 100ms,
+    color 100ms;
+  border-radius: $adjusted-border-radius;
+  color: tokens.get('post-tabs-content-tab-enabled-fg');
 
+  // Indicator line as pseudo-element so border-radius on focus doesn't affect it
+  &::after {
+    content: '';
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline: 0;
+    height: tokens.get('post-tabs-border-width');
+    background-color: transparent;
+    transition: background-color 100ms;
+  }
+
+  // selected
+  &[aria-selected='true'] {
     &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: nav.$nav-tabs-focus-box-shadow-width;
-      right: nav.$nav-tabs-focus-box-shadow-width - 1px;
-      bottom: 0;
-      left: nav.$nav-tabs-focus-box-shadow-width - 1px;
-      box-shadow: nav.$nav-tabs-focus-box-shadow;
+      background-color: tokens.get('post-tabs-content-tab-selected-border-color');
     }
+    color: tokens.get('post-tabs-content-tab-selected-fg');
   }
 
-  @include color-mx.on-dark-background() {
-    &:hover,
-    &:focus-visible {
-      background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+  // hovered
+  &:hover:not([disabled]) {
+    &::after {
+      background-color: tokens.get('post-tabs-content-tab-hovered-border-color');
     }
+    color: tokens.get('post-tabs-content-tab-hovered-fg');
   }
 
+  // disabled
+  &[disabled] {
+    color: tokens.get('post-tabs-content-tab-disabled-fg');
+    pointer-events: none;
+  }
+
+  // HCM
   @include utilities-mx.high-contrast-mode() {
-    opacity: 1;
-    border-left-color: Canvas;
-    border-right-color: Canvas;
-    color: LinkText;
+    transition: none;
 
-    &:hover,
-    &:focus,
-    &:focus-within,
-    &:focus-visible {
-      outline: tokens.get('utility-gap-2') solid Highlight;
-      outline-offset: calc(tokens.get('utility-gap-4') * -1);
+    &::after {
+      background-color: Canvas;
     }
-  }
-}
 
-.nav-item {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  cursor: default;
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    box-shadow: none;
+    &[disabled] {
+      color: GrayText;
+    }
 
-    &::after {
-      display: none;
+    &:hover:not([disabled]),
+    &[aria-selected='true'] {
+      &::after {
+        background-color: Highlight;
+      }
+      color: Highlight !important;
     }
   }
+}
 
+// Page Tabs Variant
+post-tab-item.nav-item {
   a {
-    color: inherit;
+    // enabled
     text-decoration: none;
-    display: block;
     width: 100%;
     height: 100%;
-    box-sizing: border-box;
-    position: relative;
-    outline: none;
-    cursor: pointer;
-    border-radius: 0;
+    transition:
+      background-color 100ms,
+      border-color 100ms,
+      color 100ms,
+      padding-block 200ms,
+      height 200ms;
+
+    border-block-start: tokens.get('post-tabs-border-width') solid transparent;
+    border-inline-start: tokens.get('post-tabs-border-width') solid transparent;
+    border-inline-end: tokens.get('post-tabs-border-width') solid transparent;
+    background-color: tokens.get('post-tabs-page-tab-enabled-bg');
+    border-color: tokens.get('post-tabs-page-tab-enabled-border-color');
+    color: tokens.get('post-tabs-page-tab-enabled-fg');
 
-    &:focus {
-      outline: none;
+    // Dark background needs the inverted focus ring color
+    &:not([aria-current='page']) {
+      @include utilities-mx.focus-style-custom {
+        outline-color: tokens.get('focus-outline-color-inverted', helpers.$post-focus) !important;
+        outline-offset: $tabs-outline-offset !important;
+      }
     }
 
-    &:active {
-      opacity: 1;
-      background-color: color.$black-alpha-60;
-      color: color.$white;
+    // hovered
+    &:hover {
+      background-color: tokens.get('post-tabs-page-tab-hovered-bg');
+      border-color: tokens.get('post-tabs-page-tab-hovered-border-color');
+      color: tokens.get('post-tabs-page-tab-hovered-fg');
     }
 
-    &:focus-visible {
-      outline: none !important;
+    // selected
+    &[aria-current='page'] {
+      background-color: tokens.get('post-tabs-page-tab-selected-bg');
+      color: tokens.get('post-tabs-page-tab-selected-fg');
+      border-color: tokens.get('post-tabs-page-tab-selected-border-color');
+
+      @include utilities-mx.focus-style-custom {
+        outline-color: tokens.get('post-tabs-page-tab-selected-fg') !important;
+        outline-offset: $tabs-outline-offset !important;
+      }
+
+      // selected — hovered
+      &:hover {
+        color: tokens.get('post-tabs-page-tab-selected-hovered-fg');
+        background-color: tokens.get('post-tabs-page-tab-selected-bg');
+        border-color: tokens.get('post-tabs-page-tab-selected-hovered-border-color');
+      }
     }
+
+    // HCM
+    @include utilities-mx.high-contrast-mode() {
+      color: LinkText;
+      border-color: LinkText;
+      forced-color-adjust: none;
+      transition:
+        padding-block 200ms,
+        height 200ms; // No color transition in HCM
+
+      &:hover {
+        border-color: Highlight;
+        background-color: white;
+        color: HighlightText !important;
+      }
+
+      &[aria-current='page'] {
+        background-color: Highlight;
+        border-color: Highlight;
+        color: HighlightText !important;
+
+        &:hover {
+          border-color: Highlight;
+          color: HighlightText !important;
+        }
+      }
+    }
+  }
+
+  // disabled
+  &[disabled] a:not([aria-current='page']) {
+    background-color: tokens.get('post-tabs-page-tab-disabled-bg');
+    border-color: tokens.get('post-tabs-page-tab-disabled-border-color');
+    color: tokens.get('post-tabs-page-tab-disabled-fg');
+    border-style: tokens.get('post-tabs-tab-disabled-border-style');
+    pointer-events: none;
+    border-block-end: none;
+
+    // Disabled tabs are still keyboard-focusable, so keep focus ring visible.
+    @include utilities-mx.focus-style-custom {
+      outline-color: tokens.get('post-tabs-page-tab-selected-fg') !important;
+      outline-offset: $tabs-outline-offset !important;
+    }
+
+    @include utilities-mx.high-contrast-mode() {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}
+
+// Active state — all variants
+post-tab-item.tab-title[aria-selected='true'],
+post-tab-item.nav-item a[aria-current='page'] {
+  z-index: 1;
+}
+
+// Large variant (default)
+post-tabs:not([size='small']) post-tab-item {
+  post-icon {
+    margin-block: tokens.get('post-tabs-large-tab-icon-padding-block');
+  }
+
+  &.tab-title {
+    padding-inline: tokens.get('post-tabs-large-tab-padding-inline');
+    gap: tokens.get('post-tabs-large-tab-gap-inline');
+    height: tokens.get('post-tabs-content-large-tab-height');
+    padding-block: tokens.get('post-tabs-content-large-tab-padding-block');
   }
 
-  @include color-mx.on-dark-background() {
+  // large page
+  &.nav-item {
     a {
+      // enabled
+      padding-inline: tokens.get('post-tabs-large-tab-padding-inline');
+      gap: tokens.get('post-tabs-large-tab-gap-inline');
+      border-radius: tokens.get('post-tabs-page-large-tab-border-radius')
+        tokens.get('post-tabs-page-large-tab-border-radius') 0 0;
+      padding-block: tokens.get('post-tabs-page-large-tab-enabled-padding-block');
+      height: tokens.get('post-tabs-page-large-tab-enabled-height');
+
+      post-icon {
+        width: tokens.get('post-tabs-large-icon-size');
+        height: tokens.get('post-tabs-large-icon-size');
+      }
+
+      // selected
+      &[aria-current='page'] {
+        padding-block: tokens.get('post-tabs-page-large-tab-selected-padding-block');
+        height: tokens.get('post-tabs-page-large-tab-selected-height');
+      }
+
+      // hovered
       &:hover {
-        background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+        height: tokens.get('post-tabs-page-large-tab-hovered-height');
+        padding-block: tokens.get('post-tabs-page-large-tab-hovered-padding-block');
       }
 
-      &:focus-visible {
-        background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+      // focused
+      &:focus,
+      &:focus-visible,
+      &:focus-within {
+        padding-block: tokens.get('post-tabs-page-large-tab-focused-padding-block');
+        height: tokens.get('post-tabs-page-large-tab-focused-height');
       }
     }
+
+    // disabled
+    &[disabled] a:not([aria-current='page']) {
+      padding-block: tokens.get('post-tabs-page-large-tab-disabled-padding-block');
+      height: tokens.get('post-tabs-page-large-tab-disabled-height');
+    }
   }
 }
 
-.tab-title.active,
-.nav-item.active a {
-  z-index: 1;
-  border-right-color: nav.$nav-tabs-border-color;
-  border-left-color: nav.$nav-tabs-border-color;
-  opacity: 1;
-  background-color: color.$white;
-  color: color.$black;
-  font-weight: 700;
+// Small variant
+post-tabs[size='small'] post-tab-item {
+  font-size: tokens.get('post-tabs-small-font-size');
+
+  post-icon {
+    margin-block: tokens.get('post-tabs-small-tab-icon-padding-block');
+    width: tokens.get('post-tabs-small-icon-size');
+    height: tokens.get('post-tabs-small-icon-size');
+  }
+
+  // content tabs
+  &.tab-title {
+    padding-inline: tokens.get('post-tabs-small-tab-padding-inline');
+    gap: tokens.get('post-tabs-small-tab-gap-inline');
+    height: tokens.get('post-tabs-content-small-tab-height');
+    padding-block: tokens.get('post-tabs-content-small-tab-padding-block');
+  }
+
+  // page variant
+  &.nav-item {
+    a {
+      // enabled
+      padding-inline: tokens.get('post-tabs-small-tab-padding-inline');
+      gap: tokens.get('post-tabs-small-tab-gap-inline');
+      height: tokens.get('post-tabs-page-small-tab-enabled-height');
+      border-radius: tokens.get('post-tabs-page-small-tab-border-radius')
+        tokens.get('post-tabs-page-small-tab-border-radius') 0 0;
+      padding-block: tokens.get('post-tabs-page-small-tab-enabled-padding-block');
+
+      // selected
+      &[aria-current='page'] {
+        padding-block: tokens.get('post-tabs-page-small-tab-selected-padding-block');
+        height: tokens.get('post-tabs-page-small-tab-selected-height');
+      }
+
+      // hovered
+      &:hover {
+        padding-block: tokens.get('post-tabs-page-small-tab-hovered-padding-block');
+        height: tokens.get('post-tabs-page-small-tab-hovered-height');
+      }
+
+      // focused
+      &:focus,
+      &:focus-visible,
+      &:focus-within {
+        padding-block: tokens.get('post-tabs-page-small-tab-focused-padding-block');
+        height: tokens.get('post-tabs-page-small-tab-focused-height');
+      }
+    }
+
+    // disabled
+    &[disabled] a:not([aria-current='page']) {
+      padding-block: tokens.get('post-tabs-page-small-tab-disabled-padding-block');
+      height: tokens.get('post-tabs-page-small-tab-disabled-height');
+    }
+  }
 }
 
-// Create a line that does not suffer from border corner mitering
-.tab-title.active::before,
-.nav-item.active a::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  right: -1px;
-  left: -1px;
-  height: tokens.get('utility-gap-4');
-  background-color: nav.$nav-tabs-link-active-border-color;
+// SSR
+
+// Show by default the first panel for SSR if no explicit prop is set
+post-tabs[active-tab] {
+  // Content Tabs: Style active post-tab-item for SSR if there is a [active-tab] set
+  post-tab-item.tab-title.ssr {
+    &::after {
+      background-color: color-mix(
+        in srgb,
+        tokens.get('post-tabs-content-tab-selected-border-color') calc(var(--active, 0) * 100%),
+        transparent
+      );
+    }
+
+    z-index: calc(var(--active, 0) * 1);
+
+    @include utilities-mx.high-contrast-mode() {
+      forced-color-adjust: none;
+      transition: none;
+      &::after {
+        background-color: color-mix(in srgb, Highlight calc(var(--active, 0) * 100%), Canvas);
+      }
+      color: color-mix(in srgb, Highlight calc(var(--active, 0) * 100%), ButtonText);
+    }
+  }
+
+  // Page Tabs: Style active post-tab-item for SSR if there is a [active-tab] set
+  post-tab-item.nav-item.ssr a {
+    background-color: color-mix(
+      in srgb,
+      tokens.get('post-tabs-page-tab-selected-bg') calc(var(--active, 0) * 100%),
+      tokens.get('post-tabs-page-tab-enabled-bg')
+    );
+    color: color-mix(
+      in srgb,
+      tokens.get('post-tabs-page-tab-selected-fg') calc(var(--active, 0) * 100%),
+      tokens.get('post-tabs-page-tab-enabled-fg')
+    );
+    padding-block: calc(
+      tokens.get('post-tabs-page-large-tab-selected-padding-block') + var(--active, 0) *
+        (
+          tokens.get('post-tabs-page-large-tab-enabled-padding-block') - tokens.get(
+              'post-tabs-page-large-tab-selected-padding-block'
+            )
+        )
+    );
+    z-index: calc(var(--active, 0) * 1);
+
+    @include utilities-mx.high-contrast-mode() {
+      &[style*='--active: 1'] {
+        background-color: Highlight;
+        border-color: Highlight;
+        color: HighlightText;
+      }
+    }
+  }
+
+  &[size='small'] post-tab-item.nav-item.ssr a {
+    padding-block: calc(
+      tokens.get('post-tabs-page-small-tab-selected-padding-block') + var(--active, 0) *
+        (
+          tokens.get('post-tabs-page-small-tab-enabled-padding-block') - tokens.get(
+              'post-tabs-page-small-tab-selected-padding-block'
+            )
+        )
+    );
+  }
 }
 
-@include utilities-mx.high-contrast-mode() {
-  .tab-title.active,
-  .nav-item.active a {
-    border-left-color: ButtonText;
-    border-right-color: ButtonText;
-    color: Highlight;
+// Style the first item for SSR when no [active-tab] is set
+post-tabs:not([active-tab]) {
+  &:has(post-tab-item.tab-title.ssr, post-tab-item.nav-item.ssr) post-tab-panel:first-of-type {
+    display: block !important;
+  }
+
+  // Content Tabs: first item is active
+  post-tab-item.tab-title.ssr:first-of-type {
+    &::after {
+      background-color: tokens.get('post-tabs-content-tab-selected-border-color');
+    }
+    z-index: 1;
+
+    @include utilities-mx.high-contrast-mode() {
+      &::after {
+        background-color: Highlight;
+      }
+      color: Highlight;
+    }
+  }
 
-    &::before {
+  // Page Tabs: first item is active
+  post-tab-item.nav-item.ssr:first-of-type a {
+    background-color: tokens.get('post-tabs-page-tab-selected-bg');
+    color: tokens.get('post-tabs-page-tab-selected-fg');
+    padding-block: tokens.get('post-tabs-page-large-tab-selected-padding-block');
+    z-index: 1;
+
+    @include utilities-mx.high-contrast-mode() {
       background-color: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
     }
   }
+
+  &[size='small'] post-tab-item.nav-item.ssr:first-of-type a {
+    padding-block: tokens.get('post-tabs-page-small-tab-selected-padding-block');
+  }
 }

package/components/tabs/index.css

@@ -1 +1 @@
-.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.tab-title,.nav-item a{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0);cursor:pointer}.tab-title:hover,.nav-item a:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title:focus-visible,.nav-item a:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title:focus-visible::after,.nav-item a:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:focus-visible,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title,.nav-item a{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title:hover,.tab-title:focus,.tab-title:focus-within,.tab-title:focus-visible,.nav-item a:hover,.nav-item a:focus,.nav-item a:focus-within,.nav-item a:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}}.nav-item{display:inline-block;position:relative;box-sizing:border-box;cursor:default}.nav-item:focus,.nav-item:focus-visible{outline:none;box-shadow:none}.nav-item:focus::after,.nav-item:focus-visible::after{display:none}.nav-item a{color:inherit;text-decoration:none;display:block;width:100%;height:100%;box-sizing:border-box;position:relative;outline:none;cursor:pointer;border-radius:0}.nav-item a:focus{outline:none}.nav-item a:active{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.nav-item a:focus-visible{outline:none !important}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}.tab-title.active,.nav-item.active a{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title.active::before,.nav-item.active a::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title.active,.nav-item.active a{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title.active::before,.nav-item.active a::before{background-color:Highlight}}
+post-tab-item.tab-title,post-tab-item.nav-item a{position:relative;box-sizing:border-box;background-color:rgba(0,0,0,0);cursor:pointer;display:flex;justify-content:center;align-items:center;font-weight:var(--post-device-font-weight-bold)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tab-item.tab-title post-icon,post-tab-item.nav-item a post-icon{forced-color-adjust:auto;color:inherit}}post-tab-item.tab-title,post-tab-item.nav-item a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-tab-item.tab-title:is(:focus-visible,:has(:focus-visible),.pretend-focus),post-tab-item.nav-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tab-item.tab-title:is(:focus-visible,:has(:focus-visible),.pretend-focus),post-tab-item.nav-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-tab-item.tab-title:is(:focus-visible,:focus-within,.pretend-focus),post-tab-item.nav-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tab-item.tab-title:is(:focus-visible,:focus-within,.pretend-focus),post-tab-item.nav-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-tab-item.tab-title{transition:background-color 100ms,color 100ms;border-radius:calc(var(--post-device-border-radius-focus) - (var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))));color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-tab-item.tab-title::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:var(--post-device-border-width-default);background-color:rgba(0,0,0,0);transition:background-color 100ms}post-tab-item.tab-title[aria-selected=true]{color:var(--post-scheme-color-interactive-primary-selected-fg1)}post-tab-item.tab-title[aria-selected=true]::after{background-color:var(--post-scheme-color-interactive-primary-selected-stroke1)}post-tab-item.tab-title:hover:not([disabled]){color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-tab-item.tab-title:hover:not([disabled])::after{background-color:var(--post-scheme-color-interactive-primary-hover-stroke)}post-tab-item.tab-title[disabled]{color:var(--post-scheme-color-interactive-primary-disabled-fg1);pointer-events:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tab-item.tab-title{transition:none}post-tab-item.tab-title::after{background-color:Canvas}post-tab-item.tab-title[disabled]{color:GrayText}post-tab-item.tab-title:hover:not([disabled]),post-tab-item.tab-title[aria-selected=true]{color:Highlight !important}post-tab-item.tab-title:hover:not([disabled])::after,post-tab-item.tab-title[aria-selected=true]::after{background-color:Highlight}}post-tab-item.nav-item a{text-decoration:none;width:100%;height:100%;transition:background-color 100ms,border-color 100ms,color 100ms,padding-block 200ms,height 200ms;border-block-start:var(--post-device-border-width-default) solid rgba(0,0,0,0);border-inline-start:var(--post-device-border-width-default) solid rgba(0,0,0,0);border-inline-end:var(--post-device-border-width-default) solid rgba(0,0,0,0);background-color:var(--post-palette-color-nested-tabs-page-tab-enabled-bg);border-color:var(--post-palette-color-nested-tabs-page-tab-enabled-stroke);color:var(--post-palette-color-nested-tabs-page-tab-enabled-fg)}post-tab-item.nav-item a:not([aria-current=page]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:var(--post-scheme-color-interactive-focus-stroke-inverted) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}@supports not selector(:has(:focus-visible)){post-tab-item.nav-item a:not([aria-current=page]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:var(--post-scheme-color-interactive-focus-stroke-inverted) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}}post-tab-item.nav-item a:hover{background-color:var(--post-palette-color-nested-tabs-page-tab-hovered-bg);border-color:var(--post-palette-color-nested-tabs-page-tab-hovered-stroke);color:var(--post-palette-color-nested-tabs-page-tab-hovered-fg)}post-tab-item.nav-item a[aria-current=page]{background-color:var(--post-palette-color-nested-tabs-page-tab-selected-bg);color:var(--post-scheme-color-interactive-tabs-selected-fg);border-color:var(--post-palette-color-nested-tabs-page-tab-selected-stroke)}post-tab-item.nav-item a[aria-current=page]:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:var(--post-scheme-color-interactive-tabs-selected-fg) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}@supports not selector(:has(:focus-visible)){post-tab-item.nav-item a[aria-current=page]:is(:focus-visible,:focus-within,.pretend-focus){outline-color:var(--post-scheme-color-interactive-tabs-selected-fg) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}}post-tab-item.nav-item a[aria-current=page]:hover{color:var(--post-scheme-color-interactive-tabs-selected-hovered-fg);background-color:var(--post-palette-color-nested-tabs-page-tab-selected-bg);border-color:var(--post-scheme-color-interactive-tabs-selected-hovered-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tab-item.nav-item a{color:LinkText;border-color:LinkText;forced-color-adjust:none;transition:padding-block 200ms,height 200ms}post-tab-item.nav-item a:hover{border-color:Highlight;background-color:#fff;color:HighlightText !important}post-tab-item.nav-item a[aria-current=page]{background-color:Highlight;border-color:Highlight;color:HighlightText !important}post-tab-item.nav-item a[aria-current=page]:hover{border-color:Highlight;color:HighlightText !important}}post-tab-item.nav-item[disabled] a:not([aria-current=page]){background-color:var(--post-palette-color-nested-tabs-page-tab-disabled-bg);border-color:var(--post-scheme-color-interactive-tabs-disabled-stroke);color:var(--post-scheme-color-interactive-tabs-disabled-fg);border-style:var(--post-core-border-style-dash);pointer-events:none;border-block-end:none}post-tab-item.nav-item[disabled] a:not([aria-current=page]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:var(--post-scheme-color-interactive-tabs-selected-fg) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}@supports not selector(:has(:focus-visible)){post-tab-item.nav-item[disabled] a:not([aria-current=page]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:var(--post-scheme-color-interactive-tabs-selected-fg) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*(var(--post-device-border-width-default))) !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tab-item.nav-item[disabled] a:not([aria-current=page]){color:GrayText;border-color:GrayText}}post-tab-item.tab-title[aria-selected=true],post-tab-item.nav-item a[aria-current=page]{z-index:1}post-tabs:not([size=small]) post-tab-item post-icon{margin-block:var(--post-device-spacing-padding-38)}post-tabs:not([size=small]) post-tab-item.tab-title{padding-inline:var(--post-device-spacing-padding-37);gap:var(--post-device-spacing-gap-15);height:var(--post-device-sizing-interactive-tab-content-large-height);padding-block:var(--post-device-spacing-padding-39)}post-tabs:not([size=small]) post-tab-item.nav-item a{padding-inline:var(--post-device-spacing-padding-37);gap:var(--post-device-spacing-gap-15);border-radius:var(--post-device-border-radius-7) var(--post-device-border-radius-7) 0 0;padding-block:var(--post-device-spacing-padding-block-33);height:var(--post-device-sizing-interactive-tab-page-large-height-1)}post-tabs:not([size=small]) post-tab-item.nav-item a post-icon{width:var(--post-device-sizing-interactive-icon-size5);height:var(--post-device-sizing-interactive-icon-size5)}post-tabs:not([size=small]) post-tab-item.nav-item a[aria-current=page]{padding-block:var(--post-device-spacing-padding-block-31);height:var(--post-device-sizing-interactive-tab-page-large-height-2)}post-tabs:not([size=small]) post-tab-item.nav-item a:hover{height:var(--post-device-sizing-interactive-tab-page-large-height-2);padding-block:var(--post-device-spacing-padding-block-31)}post-tabs:not([size=small]) post-tab-item.nav-item a:focus,post-tabs:not([size=small]) post-tab-item.nav-item a:focus-visible,post-tabs:not([size=small]) post-tab-item.nav-item a:focus-within{padding-block:var(--post-device-spacing-padding-block-31);height:var(--post-device-sizing-interactive-tab-page-large-height-2)}post-tabs:not([size=small]) post-tab-item.nav-item[disabled] a:not([aria-current=page]){padding-block:var(--post-device-spacing-padding-block-33);height:var(--post-device-sizing-interactive-tab-page-large-height-1)}post-tabs[size=small] post-tab-item{font-size:var(--post-device-font-size-7)}post-tabs[size=small] post-tab-item post-icon{margin-block:var(--post-device-spacing-padding-41);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-tabs[size=small] post-tab-item.tab-title{padding-inline:var(--post-device-spacing-padding-5);gap:var(--post-device-spacing-gap-inline-8);height:var(--post-device-sizing-interactive-tab-content-small-height);padding-block:var(--post-device-spacing-padding-40)}post-tabs[size=small] post-tab-item.nav-item a{padding-inline:var(--post-device-spacing-padding-5);gap:var(--post-device-spacing-gap-inline-8);height:var(--post-device-sizing-interactive-tab-page-small-height-1);border-radius:var(--post-device-border-radius-2) var(--post-device-border-radius-2) 0 0;padding-block:var(--post-device-spacing-padding-block-34)}post-tabs[size=small] post-tab-item.nav-item a[aria-current=page]{padding-block:var(--post-device-spacing-padding-block-32);height:var(--post-device-sizing-interactive-tab-page-small-height-2)}post-tabs[size=small] post-tab-item.nav-item a:hover{padding-block:var(--post-device-spacing-padding-block-32);height:var(--post-device-sizing-interactive-tab-page-small-height-2)}post-tabs[size=small] post-tab-item.nav-item a:focus,post-tabs[size=small] post-tab-item.nav-item a:focus-visible,post-tabs[size=small] post-tab-item.nav-item a:focus-within{padding-block:var(--post-device-spacing-padding-block-32);height:var(--post-device-sizing-interactive-tab-page-small-height-2)}post-tabs[size=small] post-tab-item.nav-item[disabled] a:not([aria-current=page]){padding-block:var(--post-device-spacing-padding-block-34);height:var(--post-device-sizing-interactive-tab-page-small-height-1)}post-tabs[active-tab] post-tab-item.tab-title.ssr{z-index:calc(var(--active, 0)*1)}post-tabs[active-tab] post-tab-item.tab-title.ssr::after{background-color:color-mix(in srgb, var(--post-scheme-color-interactive-primary-selected-stroke1) calc(var(--active, 0) * 100%), transparent)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tabs[active-tab] post-tab-item.tab-title.ssr{forced-color-adjust:none;transition:none;color:color-mix(in srgb, Highlight calc(var(--active, 0) * 100%), ButtonText)}post-tabs[active-tab] post-tab-item.tab-title.ssr::after{background-color:color-mix(in srgb, Highlight calc(var(--active, 0) * 100%), Canvas)}}post-tabs[active-tab] post-tab-item.nav-item.ssr a{background-color:color-mix(in srgb, var(--post-palette-color-nested-tabs-page-tab-selected-bg) calc(var(--active, 0) * 100%), var(--post-palette-color-nested-tabs-page-tab-enabled-bg));color:color-mix(in srgb, var(--post-scheme-color-interactive-tabs-selected-fg) calc(var(--active, 0) * 100%), var(--post-palette-color-nested-tabs-page-tab-enabled-fg));padding-block:calc(var(--post-device-spacing-padding-block-31) + var(--active, 0)*(var(--post-device-spacing-padding-block-33) - var(--post-device-spacing-padding-block-31)));z-index:calc(var(--active, 0)*1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tabs[active-tab] post-tab-item.nav-item.ssr a[style*="--active: 1"]{background-color:Highlight;border-color:Highlight;color:HighlightText}}post-tabs[active-tab][size=small] post-tab-item.nav-item.ssr a{padding-block:calc(var(--post-device-spacing-padding-block-32) + var(--active, 0)*(var(--post-device-spacing-padding-block-34) - var(--post-device-spacing-padding-block-32)))}post-tabs:not([active-tab]):has(post-tab-item.tab-title.ssr,post-tab-item.nav-item.ssr) post-tab-panel:first-of-type{display:block !important}post-tabs:not([active-tab]) post-tab-item.tab-title.ssr:first-of-type{z-index:1}post-tabs:not([active-tab]) post-tab-item.tab-title.ssr:first-of-type::after{background-color:var(--post-scheme-color-interactive-primary-selected-stroke1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tabs:not([active-tab]) post-tab-item.tab-title.ssr:first-of-type{color:Highlight}post-tabs:not([active-tab]) post-tab-item.tab-title.ssr:first-of-type::after{background-color:Highlight}}post-tabs:not([active-tab]) post-tab-item.nav-item.ssr:first-of-type a{background-color:var(--post-palette-color-nested-tabs-page-tab-selected-bg);color:var(--post-scheme-color-interactive-tabs-selected-fg);padding-block:var(--post-device-spacing-padding-block-31);z-index:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-tabs:not([active-tab]) post-tab-item.nav-item.ssr:first-of-type a{background-color:Highlight;border-color:Highlight;color:HighlightText}}post-tabs:not([active-tab])[size=small] post-tab-item.nav-item.ssr:first-of-type a{padding-block:var(--post-device-spacing-padding-block-32)}

package/components/tabs/index.scss

@@ -1,2 +1 @@
-@use 'tabs-wrapper';
 @use 'tab-title';

package/components/text-highlight.css

@@ -1 +1 @@
-.text-highlighted{background-color:var(--post-scheme-color-signal-information-light);color:var(--post-scheme-color-interactive-primary-enabled-fg1);padding:var(--post-device-spacing-padding-5);margin-block-start:var(--post-core-dimension-24);margin-block-end:var(--post-core-dimension-24);border-radius:var(--post-device-border-radius-1)}
+.text-highlighted{background-color:var(--post-scheme-color-signal-information-light);color:var(--post-scheme-color-interactive-primary-enabled-fg5);padding:var(--post-device-spacing-padding-5);margin-block-start:var(--post-core-dimension-24);margin-block-end:var(--post-core-dimension-24);border-radius:var(--post-device-border-radius-1)}

package/components/toast.css

@@ -1 +1 @@
-.toast-container .toast button.toast-close-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.toast-container .toast button.toast-close-button:not(:disabled):hover{text-decoration:none}.toast-container .toast button.toast-close-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.toast-container .toast button.toast-close-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(a){color:LinkText;border:unset}.toast-container .toast button.toast-close-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.toast-container .toast button.toast-close-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.toast-container .toast button.toast-close-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.toast-container .toast button.toast-close-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast{min-height:calc(var(--post-device-sizing-notification-icon-3) + 2*var(--post-device-spacing-padding-3));box-sizing:border-box;box-shadow:var(--post-device-elevation-300);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-3) var(--post-device-spacing-padding-11);padding-inline-start:calc(var(--post-device-spacing-padding-11) + var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-2));font-weight:var(--post-core-font-weight-400);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-current-fg);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast::before{background-image:var(--post-signal-icon-info);background-size:contain;background-repeat:no-repeat;background-position:center}.toast::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-3);width:var(--post-device-sizing-notification-icon-3);left:var(--post-device-spacing-padding-11);top:var(--post-device-spacing-padding-3)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast{filter:none !important;border:2px solid CanvasText}}.toast{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.toast a{font-weight:var(--post-core-font-weight-400)}.toast hr{margin-block:var(--post-core-dimension-4) var(--post-core-dimension-12) !important}.toast>*{margin:0}.toast .toast-title{font-weight:var(--post-core-font-weight-700)}.toast-dismissible{pointer-events:auto;position:relative}.toast-dismissible:not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-11) + var(--post-device-spacing-gap-inline-2) + var(--post-core-dimension-24))}.toast-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-info::before{background-image:var(--post-signal-icon-info);background-size:contain;background-repeat:no-repeat;background-position:center}.toast-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-success::before{background-image:var(--post-signal-icon-success);background-size:contain;background-repeat:no-repeat;background-position:center}.toast-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-warning::before{background-image:var(--post-signal-icon-warning);background-size:contain;background-repeat:no-repeat;background-position:center}.toast-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-error::before{background-image:var(--post-signal-icon-error);background-size:contain;background-repeat:no-repeat;background-position:center}.toast-container{position:fixed;z-index:1080;display:flex;flex-direction:column;gap:1.5rem}.toast-container .toast{width:25rem;background-image:unset}.toast-container .toast button.toast-close-button{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom;padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button:hover,.toast-container .toast button.toast-close-button:focus{opacity:1}.toast-container .toast button.toast-close-button:not(:disabled):hover,.toast-container .toast button.toast-close-button.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg);border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.toast-container .toast button.toast-close-button span{display:none}.toast-container .toast button.toast-close-button::before{content:"";display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);mask-image:var(--post-icon-closex);background-color:currentColor}:root,:host{--post-icon-closex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2xvc2V4Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjY2IDIuMzVjLjI5LjI5LjI5Ljc3IDAgMS4wNkw5LjA3IDhsNC41OSA0LjU5Yy4yOS4yOS4yOS43NyAwIDEuMDZzLS43Ny4yOS0xLjA2IDBMOC4wMSA5LjA2bC00LjU5IDQuNTljLS4yOS4yOS0uNzcuMjktMS4wNiAwcy0uMjktLjc3IDAtMS4wNkw2Ljk1IDhsLTQuNi00LjU5Yy0uMjktLjI5LS4yOS0uNzcgMC0xLjA2cy43Ny0uMjkgMS4wNiAwTDggNi45NGw0LjU5LTQuNTljLjI5LS4yOS43Ny0uMjkgMS4wNiAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuNDcgMy41MmMuMzQuMzQuMzQuOSAwIDEuMjRsLTcuMjUgNy4yNSA3LjI1IDcuMjVjLjM0LjM0LjM0LjkgMCAxLjI0cy0uOS4zNC0xLjI0IDBsLTcuMjUtNy4yNS03LjI1IDcuMjVjLS4zNC4zNC0uOS4zNC0xLjI0IDBzLS4zNC0uOSAwLTEuMjRsNy4yNS03LjI1LTcuMjMtNy4yNmMtLjM0LS4zNC0uMzQtLjkgMC0xLjI0cy45LS4zNCAxLjI0IDBMMTIgMTAuNzZsNy4yNS03LjI1Yy4zNC0uMzQuOS0uMzQgMS4yNCAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMjcuMjggNC42OGMuMzkuMzkuMzkgMS4wMiAwIDEuNDFsLTkuOSA5LjkgOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxIDEuNDFsLTkuOS05LjktOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxLTEuNDFsOS45LTkuOS05LjktOS44OWEuOTk2Ljk5NiAwIDEgMSAxLjQxLTEuNDFsOS45IDkuOSA5LjktOS45YS45OTYuOTk2IDAgMCAxIDEuNDEgMFoiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTM0LjE0IDUuODZjLjQ0LjQ0LjQ0IDEuMTUgMCAxLjU5TDIxLjU5IDIwbDEyLjU1IDEyLjU1Yy40NC40NC40NCAxLjE1IDAgMS41OXMtMS4xNS40NC0xLjU5IDBMMjAgMjEuNTkgNy40NSAzNC4xNGMtLjQ0LjQ0LTEuMTUuNDQtMS41OSAwcy0uNDQtMS4xNSAwLTEuNTlMMTguNDEgMjAgNS44NiA3LjQ1Yy0uNDQtLjQ0LS40NC0xLjE1IDAtMS41OXMxLjE1LS40NCAxLjU5IDBMMjAgMTguNDEgMzIuNTUgNS44NmMuNDQtLjQ0IDEuMTUtLjQ0IDEuNTkgMCIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDAuODkgNy4xYy40OS40OS40OSAxLjI4IDAgMS43N0wyNS43NiAyNGwxNS4xMyAxNS4xM2MuNDkuNDkuNDkgMS4yOCAwIDEuNzdzLTEuMjguNDktMS43NyAwTDIzLjk5IDI1Ljc3IDguODYgNDAuOWMtLjQ5LjQ5LTEuMjguNDktMS43NyAwcy0uNDktMS4yOCAwLTEuNzdMMjIuMjIgMjQgNy4wOSA4Ljg2Yy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTUuMTMgMTUuMTNMMzkuMTIgNy4wOWExLjI1IDEuMjUgMCAwIDEgMS43NyAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNNTQuNjMgOS4zN2MuOTguOTguOTggMi41NiAwIDMuNTRMMzUuNTQgMzJsMTkuMDkgMTkuMDljLjk4Ljk4Ljk4IDIuNTYgMCAzLjU0cy0yLjU2Ljk4LTMuNTQgMEwzMiAzNS41NCAxMi45MSA1NC42M2MtLjk4Ljk4LTIuNTYuOTgtMy41NCAwcy0uOTgtMi41NiAwLTMuNTRMMjguNDYgMzIgOS4zNyAxMi45MWMtLjk4LS45OC0uOTgtMi41NiAwLTMuNTRzMi41Ni0uOTggMy41NCAwTDMyIDI4LjQ2IDUxLjA5IDkuMzdjLjk4LS45OCAyLjU2LS45OCAzLjU0IDAiLz48L3N5bWJvbD48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMTYsIG5vbmUpIiBocmVmPSIjczE2Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczI0LCBub25lKSIgaHJlZj0iI3MyNCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMzMiwgbm9uZSkiIGhyZWY9IiNzMzIiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDAsIG5vbmUpIiBocmVmPSIjczQwIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQ4LCBub25lKSIgaHJlZj0iI3M0OCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM2NCwgbm9uZSkiIGhyZWY9IiNzNjQiLz48L3N5bWJvbD48L2RlZnM+PHN0eWxlPkBtZWRpYSAobWF4LXdpZHRoOiAyMy45OHB4KSB7Z3stLXMxNjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAyNHB4KSBhbmQgKG1heC13aWR0aDogMzEuOThweCkge2d7LS1zMjQ6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMzJweCkgYW5kIChtYXgtd2lkdGg6IDM5Ljk4cHgpIHtney0tczMyOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQwcHgpIGFuZCAobWF4LXdpZHRoOiA0Ny45OHB4KSB7Z3stLXM0MDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0OHB4KSBhbmQgKG1heC13aWR0aDogNjMuOThweCkge2d7LS1zNDg6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNjRweCkge2d7LS1zNjQ6YmxvY2s7fX08L3N0eWxlPjxnPjx1c2UgaHJlZj0iI2ktY2xvc2V4Ii8+PC9nPjwvc3ZnPg==")}@media screen and (max-width: 779.98px){.toast-container .toast{max-width:25rem}}@media screen and (max-width: 779.98px){.toast-container{right:1.5rem;left:1.5rem}.toast-container .toast{width:100%}}.toast-top-center,.toast-top-full-width,.toast-top-left,.toast-top-right{top:1.5rem}.toast-bottom-center,.toast-bottom-full-width,.toast-bottom-right,.toast-bottom-left{bottom:1.5rem}.toast-top-left,.toast-bottom-left,.toast-top-full-width,.toast-bottom-full-width,.toast-center-left{left:1.5rem}.toast-top-right,.toast-bottom-right,.toast-top-full-width,.toast-bottom-full-width,.toast-center-right{right:1.5rem}.toast-top-center,.toast-bottom-center{left:50%;transform:translateX(-50%)}.toast-center-left,.toast-center-right{top:50%;transform:translateY(-50%)}.toast-center-center{top:50%;left:50%;transform:translate(-50%, -50%)}.toast-top-full-width .toast,.toast-bottom-full-width .toast{width:100% !important}
+.toast-container .toast button.toast-close-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.toast-container .toast button.toast-close-button:not(:disabled):hover{text-decoration:none}.toast-container .toast button.toast-close-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.toast-container .toast button.toast-close-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-container .toast button.toast-close-button:is(a){color:LinkText;border:unset}.toast-container .toast button.toast-close-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.toast-container .toast button.toast-close-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.toast-container .toast button.toast-close-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.toast-container .toast button.toast-close-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast{min-height:calc(var(--post-device-sizing-notification-icon-3) + 2*var(--post-device-spacing-padding-3));box-sizing:border-box;box-shadow:var(--post-device-elevation-300);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-3) var(--post-device-spacing-padding-11);padding-inline-start:calc(var(--post-device-spacing-padding-11) + var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-2));font-weight:var(--post-core-font-weight-400);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-current-fg);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast::before{background-image:var(--post-signal-icon-info);background-size:contain;background-repeat:no-repeat;background-position:center}.toast::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-3);width:var(--post-device-sizing-notification-icon-3);left:var(--post-device-spacing-padding-11);top:var(--post-device-spacing-padding-3)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast{filter:none !important;border:2px solid CanvasText}}.toast{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.toast a{font-weight:var(--post-core-font-weight-400)}.toast hr{margin-block:var(--post-core-dimension-4) var(--post-core-dimension-12) !important}.toast>*{margin:0}.toast .toast-title{font-weight:var(--post-core-font-weight-700)}.toast-dismissible{pointer-events:auto;position:relative}.toast-dismissible:not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-11) + var(--post-device-spacing-gap-inline-2) + var(--post-core-dimension-24))}.toast-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-info-fg)}.toast-info::before{background-image:var(--post-signal-icon-info)}.toast-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-success-fg)}.toast-success::before{background-image:var(--post-signal-icon-success)}.toast-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-warning-fg)}.toast-warning::before{background-image:var(--post-signal-icon-warning)}.toast-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);--post-current-fg: var(--post-scheme-color-interactive-notification-error-fg)}.toast-error::before{background-image:var(--post-signal-icon-error)}.toast-container{position:fixed;z-index:1080;display:flex;flex-direction:column;gap:1.5rem}.toast-container .toast{width:25rem;background-image:unset}.toast-container .toast button.toast-close-button{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom;padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.toast-container .toast button.toast-close-button.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.toast-container .toast button.toast-close-button:hover,.toast-container .toast button.toast-close-button:focus{opacity:1}.toast-container .toast button.toast-close-button:not(:disabled):hover,.toast-container .toast button.toast-close-button.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg);border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.toast-container .toast button.toast-close-button span{display:none}.toast-container .toast button.toast-close-button::before{content:"";display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);mask-image:var(--post-icon-closex);background-color:currentColor}:root,:host{--post-icon-closex: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2xvc2V4Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjY2IDIuMzVjLjI5LjI5LjI5Ljc3IDAgMS4wNkw5LjA3IDhsNC41OSA0LjU5Yy4yOS4yOS4yOS43NyAwIDEuMDZzLS43Ny4yOS0xLjA2IDBMOC4wMSA5LjA2bC00LjU5IDQuNTljLS4yOS4yOS0uNzcuMjktMS4wNiAwcy0uMjktLjc3IDAtMS4wNkw2Ljk1IDhsLTQuNi00LjU5Yy0uMjktLjI5LS4yOS0uNzcgMC0xLjA2cy43Ny0uMjkgMS4wNiAwTDggNi45NGw0LjU5LTQuNTljLjI5LS4yOS43Ny0uMjkgMS4wNiAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuNDcgMy41MmMuMzQuMzQuMzQuOSAwIDEuMjRsLTcuMjUgNy4yNSA3LjI1IDcuMjVjLjM0LjM0LjM0LjkgMCAxLjI0cy0uOS4zNC0xLjI0IDBsLTcuMjUtNy4yNS03LjI1IDcuMjVjLS4zNC4zNC0uOS4zNC0xLjI0IDBzLS4zNC0uOSAwLTEuMjRsNy4yNS03LjI1LTcuMjMtNy4yNmMtLjM0LS4zNC0uMzQtLjkgMC0xLjI0cy45LS4zNCAxLjI0IDBMMTIgMTAuNzZsNy4yNS03LjI1Yy4zNC0uMzQuOS0uMzQgMS4yNCAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMjcuMjggNC42OGMuMzkuMzkuMzkgMS4wMiAwIDEuNDFsLTkuOSA5LjkgOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxIDEuNDFsLTkuOS05LjktOS45IDkuOWEuOTk2Ljk5NiAwIDEgMS0xLjQxLTEuNDFsOS45LTkuOS05LjktOS44OWEuOTk2Ljk5NiAwIDEgMSAxLjQxLTEuNDFsOS45IDkuOSA5LjktOS45YS45OTYuOTk2IDAgMCAxIDEuNDEgMFoiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTM0LjE0IDUuODZjLjQ0LjQ0LjQ0IDEuMTUgMCAxLjU5TDIxLjU5IDIwbDEyLjU1IDEyLjU1Yy40NC40NC40NCAxLjE1IDAgMS41OXMtMS4xNS40NC0xLjU5IDBMMjAgMjEuNTkgNy40NSAzNC4xNGMtLjQ0LjQ0LTEuMTUuNDQtMS41OSAwcy0uNDQtMS4xNSAwLTEuNTlMMTguNDEgMjAgNS44NiA3LjQ1Yy0uNDQtLjQ0LS40NC0xLjE1IDAtMS41OXMxLjE1LS40NCAxLjU5IDBMMjAgMTguNDEgMzIuNTUgNS44NmMuNDQtLjQ0IDEuMTUtLjQ0IDEuNTkgMCIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDAuODkgNy4xYy40OS40OS40OSAxLjI4IDAgMS43N0wyNS43NiAyNGwxNS4xMyAxNS4xM2MuNDkuNDkuNDkgMS4yOCAwIDEuNzdzLTEuMjguNDktMS43NyAwTDIzLjk5IDI1Ljc3IDguODYgNDAuOWMtLjQ5LjQ5LTEuMjguNDktMS43NyAwcy0uNDktMS4yOCAwLTEuNzdMMjIuMjIgMjQgNy4wOSA4Ljg2Yy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTUuMTMgMTUuMTNMMzkuMTIgNy4wOWExLjI1IDEuMjUgMCAwIDEgMS43NyAwWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNNTQuNjMgOS4zN2MuOTguOTguOTggMi41NiAwIDMuNTRMMzUuNTQgMzJsMTkuMDkgMTkuMDljLjk4Ljk4Ljk4IDIuNTYgMCAzLjU0cy0yLjU2Ljk4LTMuNTQgMEwzMiAzNS41NCAxMi45MSA1NC42M2MtLjk4Ljk4LTIuNTYuOTgtMy41NCAwcy0uOTgtMi41NiAwLTMuNTRMMjguNDYgMzIgOS4zNyAxMi45MWMtLjk4LS45OC0uOTgtMi41NiAwLTMuNTRzMi41Ni0uOTggMy41NCAwTDMyIDI4LjQ2IDUxLjA5IDkuMzdjLjk4LS45OCAyLjU2LS45OCAzLjU0IDAiLz48L3N5bWJvbD48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMTYsIG5vbmUpIiBocmVmPSIjczE2Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczI0LCBub25lKSIgaHJlZj0iI3MyNCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMzMiwgbm9uZSkiIGhyZWY9IiNzMzIiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDAsIG5vbmUpIiBocmVmPSIjczQwIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQ4LCBub25lKSIgaHJlZj0iI3M0OCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM2NCwgbm9uZSkiIGhyZWY9IiNzNjQiLz48L3N5bWJvbD48L2RlZnM+PHN0eWxlPkBtZWRpYSAobWF4LXdpZHRoOiAyMy45OHB4KSB7Z3stLXMxNjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAyNHB4KSBhbmQgKG1heC13aWR0aDogMzEuOThweCkge2d7LS1zMjQ6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMzJweCkgYW5kIChtYXgtd2lkdGg6IDM5Ljk4cHgpIHtney0tczMyOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQwcHgpIGFuZCAobWF4LXdpZHRoOiA0Ny45OHB4KSB7Z3stLXM0MDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0OHB4KSBhbmQgKG1heC13aWR0aDogNjMuOThweCkge2d7LS1zNDg6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNjRweCkge2d7LS1zNjQ6YmxvY2s7fX08L3N0eWxlPjxnPjx1c2UgaHJlZj0iI2ktY2xvc2V4Ii8+PC9nPjwvc3ZnPg==")}@media screen and (max-width: 779.98px){.toast-container .toast{max-width:25rem}}@media screen and (max-width: 779.98px){.toast-container{right:1.5rem;left:1.5rem}.toast-container .toast{width:100%}}.toast-top-center,.toast-top-full-width,.toast-top-left,.toast-top-right{top:1.5rem}.toast-bottom-center,.toast-bottom-full-width,.toast-bottom-right,.toast-bottom-left{bottom:1.5rem}.toast-top-left,.toast-bottom-left,.toast-top-full-width,.toast-bottom-full-width,.toast-center-left{left:1.5rem}.toast-top-right,.toast-bottom-right,.toast-top-full-width,.toast-bottom-full-width,.toast-center-right{right:1.5rem}.toast-top-center,.toast-bottom-center{left:50%;transform:translateX(-50%)}.toast-center-left,.toast-center-right{top:50%;transform:translateY(-50%)}.toast-center-center{top:50%;left:50%;transform:translate(-50%, -50%)}.toast-top-full-width .toast,.toast-bottom-full-width .toast{width:100% !important}