@swisspost/design-system-styles 9.14.0 → 9.15.0

package/components/stepper.css

@@ -1 +1 @@
-.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow-y:hidden;overflow-x:auto;grid-template-columns:1.25rem;grid-auto-columns:minmax(2.5rem, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:fit-content;line-height:1.2;word-break:break-word}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{content:counter(step-index);display:flex;align-items:center;counter-increment:step-index;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%;height:2.5rem}.stepper-link{white-space:nowrap;width:100%;overflow:hidden}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}
+.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow-y:hidden;overflow-x:auto;grid-template-columns:1.25rem;grid-auto-columns:minmax(2.5rem, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item.stepper-item-current~*,:first-child)::before,.stepper-item:not(.stepper-item-current,.stepper-item.stepper-item-current~*)::after{background-color:#fc0;z-index:1}.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]::after{background-color:#999;z-index:auto}.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item::before,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item::after{background-color:#999;z-index:auto}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:fit-content;line-height:1.2;word-break:break-word}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]:not(.stepper-item-current~*)>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{content:counter(step-index);display:flex;align-items:center;counter-increment:step-index;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not(.stepper-item-current:not([aria-current=step]),.stepper-item.stepper-item-current~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item.stepper-item-current~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-item[aria-current]>.stepper-link::before{color:rgba(0,0,0,0);background-color:var(--post-gray-80)}.stepper-link::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not(.stepper-item-current:not([aria-current=step]),.stepper-item.stepper-item-current~*)>.stepper-link::after{content:""}.stepper-item[aria-current]>.stepper-link::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 1.067 2.933 24.134l-1.6 6.533 6.533-1.6L30.933 6zM29.067 6l-1.733 1.733-3.067-3.067L26 2.933zM26.4 8.667 8.133 26.934l-3.067-3.067L23.333 5.6zM3.067 28.933l1.067-4L7.201 28z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;mask-size:16px;mask-repeat:no-repeat;mask-position:center;color:#fff}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .stepper-item[aria-current]>.stepper-link::after{color:#000}.stepper-item.stepper-item-current~.stepper-item::before,.stepper-item.stepper-item-current~.stepper-item::after,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item::before,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item::after{background-color:#999;z-index:auto}.stepper-item.stepper-item-current~.stepper-item>.stepper-link::before,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-item.stepper-item-current~.stepper-item>.stepper-link::after,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item>.stepper-link::after{content:none}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item.stepper-item-current>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-item[aria-current]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:rgba(0,0,0,0);background-color:var(--post-gray-80)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .stepper-item[aria-current]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Canvas}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item.stepper-item-current>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-item[aria-current]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:rgba(0,0,0,0);background-color:var(--post-gray-80)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .stepper-item[aria-current]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Canvas}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item.stepper-item-current>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href]):hover::before,.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-item[aria-current]>.stepper-link:is(a[href]):hover::before{color:rgba(0,0,0,0);background-color:var(--post-gray-80)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .stepper-item[aria-current]>.stepper-link:is(a[href]):hover::before{border-color:Canvas}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]:not(.stepper-item-current~*){display:contents}.stepper-item[aria-current=step]:not(.stepper-item-current~*)>.stepper-link{display:contents}.stepper-item[aria-current=step]:not(.stepper-item-current~*)>.stepper-link::before,.stepper-item[aria-current=step]:not(.stepper-item-current~*)>.stepper-link::after{z-index:2}.stepper-item[aria-current=step]:not(.stepper-item-current~*)>.stepper-link::before{content:"";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' d='M26 1.067 2.933 24.134l-1.6 6.533 6.533-1.6L30.933 6zM29.067 6l-1.733 1.733-3.067-3.067L26 2.933zM26.4 8.667 8.133 26.934l-3.067-3.067L23.333 5.6zM3.067 28.933l1.067-4L7.201 28z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:16px}.stepper-item[aria-current=step]:not(.stepper-item-current~*)>.stepper-link::after{content:none}.stepper-item[aria-current=step]:not(.stepper-item-current~*)::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(.stepper-item-current~*):not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(.stepper-item-current~*):not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%;height:2.5rem}.stepper-link{white-space:nowrap;width:100%;overflow:hidden}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{forced-color-adjust:none}.stepper-item:not(.stepper-item.stepper-item-current~.stepper-item,:first-child)::before,.stepper-item:not(.stepper-item-current:not(:last-child),.stepper-item.stepper-item-current~*)::after{background-color:Highlight}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .stepper-item[aria-current=step]>.stepper-link::after{color:#fff}.stepper-link::before{forced-color-adjust:none}.stepper-item.stepper-item-current>.stepper-link::before{background-color:AccentColor;color:AccentColorText}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .stepper-item.stepper-item-current>.stepper-link::before{border-color:Canvas}.stepper-item.stepper-item-current~.stepper-item>.stepper-link::before,.stepper-item:not(.stepper-item-current)>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:GrayText}.stepper-link::after{color:Canvas}.stepper-item.stepper-item-current>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item.stepper-item-current>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item.stepper-item-current>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas;background-color:GrayText}.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item.stepper-item-current~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not(.stepper-item-current)>.stepper-link:is(a[href]):hover::after{color:HighlightText}}

package/components/stepper.scss

@@ -3,6 +3,8 @@
 @use './../mixins/icons' as icons-mx;
 @use './../mixins/size' as size-mx;
 @use './../mixins/utilities';
+@use './../functions/icons' as icon-fn;
+@use './../mixins/color' as color-mx;
 
 @use './../variables/color';
 @use './../variables/commons';
@@ -75,12 +77,25 @@
   }
 
   // current and completed steps are preceded by a yellow segment (except for the first step)
-  &:not(&[aria-current='step'] ~ *, :first-child)::before,
+  &:not(&.stepper-item-current ~ *, :first-child)::before,
   // steps that are not the current step or preceded by a current step are followed by a yellow segment
-    &:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *)::after {
+    &:not(.stepper-item-current, .stepper-item.stepper-item-current ~ *)::after {
     background-color: stepper.$stepper-bar-fill-color;
     z-index: 1;
   }
+
+  .stepper:not(:has(.stepper-item-current)) &[aria-current='step']::after {
+    background-color: stepper.$stepper-bar-color;
+    z-index: auto;
+  }
+
+  .stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current='step'] ~ & {
+    &::before,
+    &::after {
+      background-color: stepper.$stepper-bar-color;
+      z-index: auto;
+    }
+  }
 }
 
 .stepper-link {
@@ -114,7 +129,7 @@
     text-align: end;
   }
 
-  .stepper-item[aria-current='step'] > & {
+  .stepper-item[aria-current='step']:not(.stepper-item-current ~ *) > & {
     color: stepper.$stepper-link-current-color;
     font-weight: stepper.$stepper-link-current-font-weight;
   }
@@ -148,14 +163,23 @@
     margin-inline-start: auto;
   }
 
-  .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & {
+  .stepper-item:not(
+      .stepper-item-current:not([aria-current='step']),
+      .stepper-item.stepper-item-current ~ *
+    )
+    > & {
     color: transparent;
   }
 
-  .stepper-item[aria-current='step'] ~ .stepper-item > & {
+  .stepper-item.stepper-item-current ~ .stepper-item > & {
     color: stepper.$stepper-indicator-future-color;
     background-color: stepper.$stepper-indicator-future-bg;
   }
+
+  .stepper-item[aria-current] > & {
+    color: transparent;
+    background-color: stepper.$stepper-link-current-color;
+  }
 }
 
 // check icon
@@ -189,9 +213,43 @@
   }
 
   // show only for completed steps
-  .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & {
+  .stepper-item:not(
+      .stepper-item-current:not([aria-current='step']),
+      .stepper-item.stepper-item-current ~ *
+    )
+    > & {
     content: '';
   }
+
+  .stepper-item[aria-current] > & {
+    @include icons-mx.icon(3193);
+    mask-size: 16px;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    color: stepper.$stepper-indicator-future-color;
+
+    @include color-mx.on-dark-background {
+      color: stepper.$stepper-indicator-color;
+    }
+  }
+}
+
+.stepper-item.stepper-item-current ~ .stepper-item,
+.stepper:not(:has(.stepper-item-current)) .stepper-item[aria-current='step'] ~ .stepper-item {
+  &::before,
+  &::after {
+    background-color: stepper.$stepper-bar-color;
+    z-index: auto;
+  }
+
+  > .stepper-link::before {
+    color: stepper.$stepper-indicator-future-color;
+    background-color: stepper.$stepper-indicator-future-bg;
+  }
+
+  > .stepper-link::after {
+    content: none;
+  }
 }
 
 // hover/focus state
@@ -203,17 +261,30 @@
   @include utilities.focus-hover-style-custom() {
     color: stepper.$stepper-link-color;
 
-    .stepper-item[aria-current='step'] > & {
+    .stepper-item.stepper-item-current > & {
       color: stepper.$stepper-link-current-color;
     }
 
     // step indicator
     &::before,
-    .stepper-item[aria-current='step'] ~ .stepper-item > &::before {
+    .stepper-item.stepper-item-current ~ .stepper-item > &::before,
+    .stepper:not(:has(.stepper-item-current))
+      .stepper-item[aria-current='step']
+      ~ .stepper-item
+      > &::before {
       color: stepper.$stepper-indicator-hover-color;
       background-color: stepper.$stepper-indicator-hover-bg;
     }
 
+    .stepper-item[aria-current] > &::before {
+      color: transparent;
+      background-color: stepper.$stepper-link-current-color;
+
+      @include color-mx.on-dark-background {
+        border-color: Canvas;
+      }
+    }
+
     // check icon
     &::after {
       color: stepper.$stepper-indicator-hover-color;
@@ -228,12 +299,29 @@
     padding-inline: 0;
   }
 
-  .stepper-item[aria-current='step'] {
+  .stepper-item[aria-current='step']:not(.stepper-item-current ~ *) {
     // using "display: contents" on the stepper-item and stepper-link so that label, indicator and progress bar can be directly placed in the grid
     display: contents;
 
     > .stepper-link {
       display: contents;
+
+      &::before,
+      &::after {
+        z-index: 2;
+      }
+
+      &::before {
+        content: '';
+        background-image: url('#{icon-fn.get-colored-svg-url(3193, color.$white)}');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 16px;
+      }
+
+      &::after {
+        content: none;
+      }
     }
 
     // progress bar
@@ -298,33 +386,42 @@
   .stepper-item {
     &::before,
     &::after {
-      background-color: CanvasText;
+      forced-color-adjust: none;
     }
 
-    &:not(&[aria-current='step'] ~ &, :first-child)::before,
-    &:not([aria-current='step']:not(:last-child), &[aria-current='step'] ~ *)::after {
+    &:not(&.stepper-item-current ~ &, :first-child)::before,
+    &:not(.stepper-item-current:not(:last-child), .stepper-item.stepper-item-current ~ *)::after {
       background-color: Highlight;
     }
   }
 
+  .stepper-item[aria-current='step'] > .stepper-link::after {
+    @include color-mx.on-dark-background {
+      color: color.$white;
+    }
+  }
+
   .stepper-link {
     &::before {
       forced-color-adjust: none;
     }
 
-    .stepper-item[aria-current='step'] > & {
+    .stepper-item.stepper-item-current > & {
       &::before {
-        background-color: Canvas;
-        color: CanvasText;
+        background-color: AccentColor;
+        color: AccentColorText;
+        @include color-mx.on-dark-background {
+          border-color: Canvas;
+        }
       }
     }
 
-    .stepper-item[aria-current='step'] ~ .stepper-item > &,
-    .stepper-item:not([aria-current='step']) > & {
+    .stepper-item.stepper-item-current ~ .stepper-item > &,
+    .stepper-item:not(.stepper-item-current) > & {
       &::before {
         color: Canvas;
         border-color: Canvas;
-        background-color: CanvasText;
+        background-color: GrayText;
       }
     }
 
@@ -334,17 +431,19 @@
   }
 
   .stepper-link:is(a[href]) {
-    .stepper-item[aria-current='step'] > & {
+    .stepper-item.stepper-item-current > & {
       @include utilities.focus-hover-style-custom() {
         &::before {
-          border-color: Highlight;
+          background-color: Highlight;
+          color: HighlightText;
         }
       }
     }
 
-    .stepper-item[aria-current='step'] ~ .stepper-item > & {
+    .stepper-item.stepper-item-current ~ .stepper-item > & {
       &::before {
         color: Canvas;
+        background-color: GrayText;
       }
 
       @include utilities.focus-hover-style-custom() {
@@ -355,7 +454,7 @@
       }
     }
 
-    .stepper-item:not([aria-current='step']) > & {
+    .stepper-item:not(.stepper-item-current) > & {
       &::before {
         background-color: LinkText;
       }