@mittwald/flow-react-components 0.1.0-alpha.18 → 0.1.0-alpha.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.flow--avatar{border-radius:var(--corner-radius--round);width:var(--avatar-size);height:var(--avatar-size);overflow:hidden;flex-shrink:0}.flow--avatar>img{width:100%;height:100%;object-fit:cover}.flow--avatar--initials{width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:calc(var(--avatar-size) * .4)}.flow--avatar--size-m,.flow--avatar{--avatar-size: var(--avatar--size--m)}.flow--avatar--size-xs{--avatar-size: var(--avatar--size--xs)}.flow--avatar--size-s{--avatar-size: var(--avatar--size--s)}.flow--avatar--size-l{--avatar-size: var(--avatar--size--l)}.flow--icon{flex-shrink:0;max-width:none}.flow--icon--size-m,.flow--icon{width:var(--icon--size--m);height:var(--icon--size--m)}.flow--icon--size-s{width:var(--icon--size--s);height:var(--icon--size--s)}.flow--icon--size-l{width:var(--icon--size--l);height:var(--icon--size--l)}.flow--badge{color:var(--badge--color);font-size:var(--badge--font-size);background-color:var(--badge--info-background-color);border-radius:var(--badge--corner-radius);padding-block:var(--badge--padding-y);padding-inline:var(--badge--padding-x);height:var(--badge--height);line-height:var(--size-rem--m);display:inline-grid;grid-template-areas:"icon content";grid-template-columns:auto 1fr;column-gap:var(--badge--icon-to-text-spacing);max-width:fit-content}.flow--badge:not(:has(.flow--badge--content)){padding-inline:var(--badge--padding-x-icon-only);grid-template-areas:"icon";grid-template-columns:auto}.flow--badge:has(.flow--badge--custom-icon) .flow--badge--status-icon{display:none}.flow--badge--status-icon,.flow--badge--custom-icon{grid-area:icon}.flow--badge--content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-area:content}.flow--badge--info,.flow--badge{background-color:var(--badge--info-background-color)}.flow--badge--success{background-color:var(--badge--success-background-color)}.flow--badge--warning{background-color:var(--badge--warning-background-color)}.flow--badge--danger{background-color:var(--badge--danger-background-color)}.flow--checkbox{border-width:var(--checkbox--border-width);border-style:var(--checkbox--border-style);border-color:var(--checkbox--border-color--default);border-radius:var(--checkbox--corner-radius);padding-block:var(--checkbox--padding-y);padding-inline:var(--checkbox--padding-x);background-color:var(--checkbox--background-color--default);color:var(--checkbox--color--default);display:grid;column-gap:var(--checkbox--checkmark-to-text-spacing);grid-template-columns:auto 1fr;width:fit-content}.flow--checkbox:hover{background-color:var(--checkbox--background-color--hover)}.flow--checkbox[data-selected]{border-color:var(--checkbox--border-color--selected);background-color:var(--checkbox--background-color--selected);color:var(--checkbox--color--selected)}.flow--checkbox[data-selected] .flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--selected)}.flow--checkbox[data-disabled]{border-color:var(--checkbox--border-color--disabled);background-color:var(--checkbox--background-color--disabled);color:var(--checkbox--color--disabled)}.flow--checkbox[data-disabled] .flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--disabled)}.flow--checkbox[data-selected][data-disabled]{border-color:var(--checkbox--border-color--selected-disabled);background-color:var(--checkbox--background-color--selected-disabled);color:var(--checkbox--color--selected-disabled)}.flow--checkbox[data-selected][data-disabled] .flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--selected-disabled)}.flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--default)}.flow--layout-card{background-color:var(--content-box--background-color);box-shadow:var(--content-box--box-shadow);border-radius:var(--content-box--corner-radius);padding:var(--content-box--padding)}.flow--field-description{color:var(--field-description--color);font-size:var(--field-description--font-size)}.flow--heading{font-weight:var(--heading--font-weight);color:var(--heading--color)}h1{font-size:var(--heading--h1-font-size)}h2{font-size:var(--heading--h2-font-size)}h3{font-size:var(--heading--h3-font-size)}h4{font-size:var(--heading--h4-font-size)}h5{font-size:var(--heading--h5-font-size)}h6{font-size:var(--heading--h6-font-size)}.flow--initials{display:flex;font-weight:700;background-color:var(--background-color)}.flow--initials *:nth-child(odd){color:var(--char-1-color)}.flow--initials *:nth-child(2n){color:var(--char-2-color)}.flow--initials *:only-child{color:var(--char-2-color)}.flow--initials--variant-1,.flow--initials{--background-color: var(--initials--variant-1-background-color);--char-1-color: var(--initials--variant-1-first-initial-color);--char-2-color: var(--initials--variant-1-second-initial-color)}.flow--initials--variant-2{--background-color: var(--initials--variant-2-background-color);--char-1-color: var(--initials--variant-2-first-initial-color);--char-2-color: var(--initials--variant-2-second-initial-color)}.flow--initials--variant-3{--background-color: var(--initials--variant-3-background-color);--char-1-color: var(--initials--variant-3-first-initial-color);--char-2-color: var(--initials--variant-3-second-initial-color)}.flow--initials--variant-4{--background-color: var(--initials--variant-4-background-color);--char-1-color: var(--initials--variant-4-first-initial-color);--char-2-color: var(--initials--variant-4-second-initial-color)}.flow--inline-alert{border-radius:var(--inline-alert--corner-radius);border-width:var(--inline-alert--border-width);border-style:var(--inline-alert--border-style);border-inline-start-width:var(--inline-alert--border-x-start-width);padding:var(--inline-alert--padding);display:grid;grid-template-columns:auto 1fr;grid-column-gap:var(--inline-alert--icon-to-text-spacing);grid-row-gap:var(--inline-alert--text-to-text-spacing);background-color:var(--inline-alert--background-color);width:100%}.flow--inline-alert:not(:has(.flow--inline-alert--content)){grid-template-areas:"icon heading"}.flow--inline-alert:has(.flow--inline-alert--content){grid-template-areas:"icon heading" ". content"}.flow--inline-alert--status-icon{grid-area:icon}.flow--inline-alert--heading{grid-area:heading;font-size:var(--inline-alert--heading-font-size)}.flow--inline-alert--content{grid-area:content}.flow--inline-alert--info,.flow--inline-alert{border-color:var(--inline-alert--info-border-color)}.flow--inline-alert--info .flow--inline-alert--heading,.flow--inline-alert .flow--inline-alert--heading,.flow--inline-alert--info .flow--inline-alert--status-icon,.flow--inline-alert .flow--inline-alert--status-icon{color:var(--inline-alert--info-heading-color)}.flow--inline-alert--warning{border-color:var(--inline-alert--warning-border-color)}.flow--inline-alert--warning .flow--inline-alert--heading,.flow--inline-alert--warning .flow--inline-alert--status-icon{color:var(--inline-alert--warning-heading-color)}.flow--inline-alert--danger{border-color:var(--inline-alert--danger-border-color)}.flow--inline-alert--danger .flow--inline-alert--heading,.flow--inline-alert--danger .flow--inline-alert--status-icon{color:var(--inline-alert--danger-heading-color)}.flow--inline-alert--success{border-color:var(--inline-alert--success-border-color)}.flow--inline-alert--success .flow--inline-alert--heading,.flow--inline-alert--success .flow--inline-alert--status-icon{color:var(--inline-alert--success-heading-color)}.flow--label{color:var(--label--color);font-size:var(--label--font-size);font-weight:var(--label--font-weight)}.flow--labeled-value{display:grid;grid-template-areas:"label" "value";row-gap:var(--labeled-value--label-to-value-spacing);column-gap:var(--labeled-value--value-to-button-spacing)}.flow--labeled-value:has(.flow--labeled-value--button){grid-template-areas:"label label " "value button";grid-template-columns:auto 1fr}.flow--labeled-value--label{grid-area:label}.flow--labeled-value--content{grid-area:value}.flow--labeled-value--button{grid-area:button;align-self:start}.flow--link{font-size:var(--link--font-size);font-weight:var(--link--font-weight);transition-property:color;transition-duration:var(--transition--duration--default)}.flow--link[aria-disabled]{color:var(--link--disabled-color)}.flow--link:not([aria-disabled]){cursor:pointer}.flow--link--primary:not([aria-disabled]),.flow--link:not([aria-disabled]){color:var(--link--primary-color--default)}.flow--link--primary:not([aria-disabled]):hover,.flow--link:not([aria-disabled]):hover{color:var(--link--primary-color--hover)}.flow--link--primary:not([aria-disabled])[data-pressed],.flow--link:not([aria-disabled])[data-pressed]{color:var(--link--primary-color--pressed)}.flow--link--danger:not([aria-disabled]){color:var(--link--danger-color--default)}.flow--link--danger:not([aria-disabled]):hover{color:var(--link--danger-color--hover)}.flow--link--danger:not([aria-disabled])[data-pressed]{color:var(--link--danger-color--pressed)}.flow--navigation>ul{display:flex;flex-direction:column;row-gap:var(--navigation--item-to-item-spacing)}.flow--navigation--navigation-item a{display:flex;flex-direction:row;border:none;border-radius:var(--navigation-item--corner-radius);background-color:var(--navigation-item--background-color--default);padding:var(--navigation-item--padding-y) var(--navigation-item--padding-x);cursor:default}.flow--navigation--navigation-item a[href]{cursor:pointer}.flow--navigation--navigation-item a:focus{background-color:var(--navigation-item--background-color--hover)}.flow--navigation--navigation-item a[aria-current=page]{background-color:var(--navigation-item--background-color--current);font-weight:var(--navigation-item--font-weight--current);color:var(--navigation-item--color--current)}.flow--navigation--navigation-item a[aria-current=page] .flow--navigation--navigation-item--icon{color:var(--navigation-item--icon-color--current)}.flow--navigation--navigation-item--icon{order:0;color:var(--navigation-item--icon-color--default)}.flow--navigation--navigation-item--text{margin-inline-start:var(--navigation-item--icon-to-text-spacing);order:1}.flow--form-field{display:flex;flex-direction:column}.flow--form-field--label{order:1;margin-bottom:var(--form-control--label-to-control-spacing)}.flow--form-field--field-error,.flow--form-field--custom-field-error,.flow--form-field--field-description{order:3;margin-top:var(--form-control--control-to-info-spacing)}.flow--form-field:has(.flow--form-field--field-error) .flow--form-field--field-description{display:none}.flow--form-field:has(.flow--form-field--custom-field-error) .flow--form-field--field-error{display:none}.flow--form-field{--form-field-control--background-color: var( --form-control--background-color--default );--form-field-control--border-color: var( --form-control--background-color--default );--form-field-control--color: inherit}.flow--form-field:hover{--form-field-control--background-color: var( --form-control--background-color--hover );--form-field-control--border-color: var( --form-control--border-color--hover );--form-field-control--color: inherit}.flow--form-field[data-invalid]{--form-field-control--background-color: var( --form-control--background-color--invalid );--form-field-control--border-color: var( --form-control--border-color--invalid );--form-field-control--color: inherit}.flow--form-field[data-invalid]:focus-within,.flow--form-field:focus-within{--form-field-control--background-color: var( --form-control--background-color--focused );--form-field-control--border-color: var( --form-control--border-color--focused );--form-field-control--color: inherit}.flow--form-field[data-disabled]{--form-field-control--background-color: var( --form-control--background-color--disabled );--form-field-control--border-color: var( --form-control--border-color--disabled );--form-field-control--color: var(--form-control--color--disabled)}.flow--field-error{color:var(--field-error--color);font-size:var(--field-error--font-size)}.flow--button{position:relative;border:none;border-radius:var(--button--corner-radius);padding-block:var(--button--padding-squished-y);padding-inline:var(--button--padding-squished-x);font-size:var(--font-size--default);line-height:var(--line-height--default);font-weight:700;transition-property:color,background-color;transition-duration:var(--transition--duration--default);outline-color:var(--button--focus-outline-color);outline-offset:var(--button--focus-outline-offset);max-width:100%}.flow--button:has(.flow--button--icon){padding:var(--button--padding)}.flow--button:has(.flow--button--content){display:grid;justify-content:center;align-items:center;grid-template-areas:"content"}.flow--button--content,.flow--button--state-icon{grid-area:content}.flow--button--text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.flow--button--icon,.flow--button--icon svg{display:block}.flow--button--size-s{font-size:var(--button--font-size-small);padding-block:var(--button--padding-small-squished-y);padding-inline:var(--button--padding-small-squished-x)}.flow--button--size-s:has(.flow--button--icon){padding:var(--button--padding-small)}.flow--button--state-icon{color:var(--button--pending-icon-color);justify-self:center}.flow--button--is-succeeded .flow--button--state-icon{color:var(--button--succeeded-icon-color)}.flow--button--is-failed .flow--button--state-icon{color:var(--button--failed-icon-color)}.flow--button--is-pending .flow--button--content,.flow--button--is-failed .flow--button--content,.flow--button--is-succeeded .flow--button--content{visibility:hidden}.flow--button--is-pending.flow--button--plain .flow--button--content:not(:has(.flow--button--icon)),.flow--button--is-failed.flow--button--plain .flow--button--content:not(:has(.flow--button--icon)),.flow--button--is-succeeded.flow--button--plain .flow--button--content:not(:has(.flow--button--icon)){visibility:visible}.flow--button--primary.flow--button--solid,.flow--button{background-color:var(--button--primary-solid-background-color--default);color:var(--button--primary-solid-content-color--default)}.flow--button--primary.flow--button--solid:hover,.flow--button:hover{background-color:var(--button--primary-solid-background-color--hover);color:var(--button--primary-solid-content-color--hover)}.flow--button--primary.flow--button--solid[data-pressed],[data-pressed].flow--button{background-color:var(--button--primary-solid-background-color--pressed);color:var(--button--primary-solid-content-color--pressed)}.flow--button--primary.flow--button--solid[disabled],[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--accent.flow--button--solid,.flow--button--accent.flow--button{background-color:var(--button--accent-solid-background-color--default);color:var(--button--accent-solid-content-color--default)}.flow--button--accent.flow--button--solid:hover,.flow--button--accent.flow--button:hover{background-color:var(--button--accent-solid-background-color--hover);color:var(--button--accent-solid-content-color--hover)}.flow--button--accent.flow--button--solid[data-pressed],.flow--button--accent[data-pressed].flow--button{background-color:var(--button--accent-solid-background-color--pressed);color:var(--button--accent-solid-content-color--pressed)}.flow--button--accent.flow--button--solid[disabled],.flow--button--accent[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--danger.flow--button--solid,.flow--button--danger.flow--button{background-color:var(--button--danger-solid-background-color--default);color:var(--button--danger-solid-content-color--default)}.flow--button--danger.flow--button--solid:hover,.flow--button--danger.flow--button:hover{background-color:var(--button--danger-solid-background-color--hover);color:var(--button--danger-solid-content-color--hover)}.flow--button--danger.flow--button--solid[data-pressed],.flow--button--danger[data-pressed].flow--button{background-color:var(--button--danger-solid-background-color--pressed);color:var(--button--danger-solid-content-color--pressed)}.flow--button--danger.flow--button--solid[disabled],.flow--button--danger[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--secondary.flow--button--solid,.flow--button--secondary.flow--button{background-color:var(--button--secondary-solid-background-color--default);color:var(--button--secondary-solid-content-color--default)}.flow--button--secondary.flow--button--solid:hover,.flow--button--secondary.flow--button:hover{background-color:var(--button--secondary-solid-background-color--hover);color:var(--button--secondary-solid-content-color--hover)}.flow--button--secondary.flow--button--solid[data-pressed],.flow--button--secondary[data-pressed].flow--button{background-color:var(--button--secondary-solid-background-color--pressed);color:var(--button--secondary-solid-content-color--pressed)}.flow--button--secondary.flow--button--solid[disabled],.flow--button--secondary[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--primary.flow--button--plain,.flow--button--plain.flow--button{background-color:var(--button--primary-plain-background-color--default);color:var(--button--primary-plain-content-color--default)}.flow--button--primary.flow--button--plain:hover,.flow--button--plain.flow--button:hover{background-color:var(--button--primary-plain-background-color--hover);color:var(--button--primary-plain-content-color--hover)}.flow--button--primary.flow--button--plain[data-pressed],.flow--button--plain[data-pressed].flow--button{background-color:var(--button--primary-plain-background-color--pressed);color:var(--button--primary-plain-content-color--pressed)}.flow--button--primary.flow--button--plain[disabled],.flow--button--plain[disabled].flow--button{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--button--accent.flow--button--plain{background-color:var(--button--accent-plain-background-color--default);color:var(--button--accent-plain-content-color--default)}.flow--button--accent.flow--button--plain:hover{background-color:var(--button--accent-plain-background-color--hover);color:var(--button--accent-plain-content-color--hover)}.flow--button--accent.flow--button--plain[data-pressed]{background-color:var(--button--accent-plain-background-color--pressed);color:var(--button--accent-plain-content-color--pressed)}.flow--button--accent.flow--button--plain[disabled]{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--button--danger.flow--button--plain{background-color:var(--button--danger-plain-background-color--default);color:var(--button--danger-plain-content-color--default)}.flow--button--danger.flow--button--plain:hover{background-color:var(--button--danger-plain-background-color--hover);color:var(--button--danger-plain-content-color--hover)}.flow--button--danger.flow--button--plain[data-pressed]{background-color:var(--button--danger-plain-background-color--pressed);color:var(--button--danger-plain-content-color--pressed)}.flow--button--danger.flow--button--plain[disabled]{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--button--secondary.flow--button--plain{background-color:var(--button--secondary-plain-background-color--default);color:var(--button--secondary-plain-content-color--default)}.flow--button--secondary.flow--button--plain:hover{background-color:var(--button--secondary-plain-background-color--hover);color:var(--button--secondary-plain-content-color--hover)}.flow--button--secondary.flow--button--plain[data-pressed]{background-color:var(--button--secondary-plain-background-color--pressed);color:var(--button--secondary-plain-content-color--pressed)}.flow--button--secondary.flow--button--plain[disabled]{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--number-field--group{order:2;display:grid;grid-template-columns:1fr max-content;grid-template-areas:"input increment" "input decrement"}.flow--number-field--input{order:2;color:var(--form-field-control--color);border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--border-radius);border-color:var(--form-field-control--border-color);padding-block:var(--form-control--padding-y);padding-inline:var(--form-control--padding-x);background-color:var(--form-field-control--background-color);grid-area:input}.flow--number-field--input:focus-visible,.flow--number-field--input:focus{outline:none}.flow--number-field--decrement-button{grid-area:decrement}.flow--number-field--increment-button{grid-area:increment}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-width:var(--form-control--border-width);border-color:var(--form-field-control--border-color);border-style:solid}@media (pointer: fine){.flow--number-field--input{border-start-end-radius:0;border-end-end-radius:0}.flow--number-field--increment-button .flow--number-field--coarse-pointer-icon,.flow--number-field--decrement-button .flow--number-field--coarse-pointer-icon{display:none}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;padding-block:0}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0}.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-block-end:none;border-end-end-radius:0}}@media (pointer: coarse){.flow--number-field--group{grid-template-columns:auto 1fr auto;grid-template-areas:"decrement input increment"}.flow--number-field--input{border-radius:0}.flow--number-field--decrement-button :not(.flow--number-field--touch-icon){display:none}.flow--number-field--increment-button :not(.flow--number-field--touch-icon){display:none}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{padding-inline:var(--form-control--padding-x)}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}}.flow--radio-group{display:flex;flex-wrap:wrap;container-type:inline-size;isolation:isolate}.flow--radio-group:has(.flow--radio-group--radio--content),.flow--radio-group:has(.flow--radio-group--radio--icon){display:grid;gap:var(--radio-group--radio-to-radio-spacing)}.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--label,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--label{grid-column:1/-1;margin-bottom:calc((var(--radio-group--radio-to-radio-spacing) - var(--form-control--label-to-control-spacing)) * -1)}.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--field-error,.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--custom-field-error,.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--field-description,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--field-error,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--custom-field-error,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--field-description{grid-column:1/-1;margin-top:calc((var(--radio-group--radio-to-radio-spacing) - var(--form-control--control-to-info-spacing)) * -1)}.flow--radio-group:has(.flow--radio-group--radio--icon){grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}.flow--radio-group:has(.flow--radio-group--radio--content){grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}.flow--radio-group:has(.flow--radio-group--field-error) .flow--radio-group--field-description{display:none}.flow--radio-group:has(.flow--radio-group--custom-field-error) .flow--radio-group--field-error{display:none}.flow--radio-group--label{width:100%;margin-bottom:var(--form-control--label-to-control-spacing)}.flow--radio-group--field-error,.flow--radio-group--custom-field-error,.flow--radio-group--field-description{margin-top:var(--form-control--control-to-info-spacing);width:100%}.flow--radio-group--radio{border:var(--radio-group--border-width) var(--radio-group--border-style) var(--radio-group--border-color--default);padding:var(--radio-group--padding-y) var(--radio-group--padding-x);background-color:var(--radio-group--background-color--default);color:var(--radio-group--color--default);display:grid;row-gap:var(--radio-group--text-to-text-spacing);column-gap:var(--radio-group--icon-to-text-spacing);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default)}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)){grid-template-areas:"label checkmark";grid-template-columns:1fr auto;flex:1;margin-right:-1px}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):first-of-type{border-radius:0;border-start-start-radius:var(--radio-group--corner-radius);border-end-start-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):last-of-type{border-radius:0;border-start-end-radius:var(--radio-group--corner-radius);border-end-end-radius:var(--radio-group--corner-radius);margin:0}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon))[data-selected] .flow--radio-group--radio--checkmark{display:block}@container (max-width: 600px){.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)){flex:auto;width:100%;margin:0 0 -1px}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):first-of-type{border-radius:0;border-start-start-radius:var(--radio-group--corner-radius);border-start-end-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):last-of-type{border-radius:0;border-end-end-radius:var(--radio-group--corner-radius);border-end-start-radius:var(--radio-group--corner-radius);margin:0}}.flow--radio-group--radio:has(.flow--radio-group--radio--icon):not(:has(.flow--radio-group--radio--content)){grid-template-areas:"icon" "label";grid-template-columns:1fr;justify-items:center;border-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:has(.flow--radio-group--radio--icon):not(:has(.flow--radio-group--radio--content)) .flow--radio-group--radio--label{font-weight:var(--radio-group--label-font-weight-with-content-or-icon)}.flow--radio-group--radio:has(.flow--radio-group--radio--icon):not(:has(.flow--radio-group--radio--content)) .flow--radio-group--radio--icon{height:var(--radio-group--icon-size-without-content);width:var(--radio-group--icon-size-without-content)}.flow--radio-group--radio:has(.flow--radio-group--radio--content){grid-template-areas:"label" "content";grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-items:start;border-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:has(.flow--radio-group--radio--content) .flow--radio-group--radio--label{font-weight:var(--radio-group--label-font-weight-with-content-or-icon)}.flow--radio-group--radio:has(.flow--radio-group--radio--content):has(.flow--radio-group--radio--icon){grid-template-areas:"icon label" ". content";grid-template-columns:auto 1fr}.flow--radio-group--radio:hover{background-color:var(--radio-group--background-color--hover)}.flow--radio-group--radio[data-selected]{border-color:var(--radio-group--border-color--selected);background-color:var(--radio-group--background-color--selected);color:var(--radio-group--color--selected);z-index:1}.flow--radio-group--radio[data-disabled],[aria-disabled] .flow--radio-group--radio{border-color:var(--radio-group--border-color--disabled);background-color:var(--radio-group--background-color--disabled);color:var(--radio-group--color--disabled)}.flow--radio-group--radio[data-disabled][data-selected],[aria-disabled] .flow--radio-group--radio[date-selected]{border-color:var(--radio-group--border-color--selected-disabled);background-color:var(--radio-group--background-color--selected-disabled);color:var(--radio-group--color--selected-disabled)}.flow--radio-group--radio:not([data-selected]):not([data-disabled]) .flow--radio-group--radio--icon{color:var(--radio-group--icon-color--default)}.flow--radio-group--radio--icon{grid-area:icon}.flow--radio-group--radio--label{grid-area:label}.flow--radio-group--radio--content{grid-area:content}.flow--radio-group--radio--checkmark{grid-area:checkmark;display:none}.flow--section{margin-block:var(--section--section-to-section-spacing);display:flex;flex-direction:column;row-gap:var(--section--content-to-content-spacing)}.flow--section:first-child{margin-top:0}.flow--section:last-child{margin-bottom:0}.flow--section+.flow--section{border-top-width:var(--section--border-width);border-top-style:var(--section--border-style);border-top-color:var(--section--border-color);padding-top:var(--section--section-to-section-spacing)}.flow--switch{display:flex;align-items:center;font-size:var(--switch--font-size);font-weight:var(--switch--font-weight);column-gap:var(--switch--label-to-indicator-spacing)}.flow--switch.flow--switch--label-leading{flex-direction:row-reverse}.flow--switch[data-pressed] .flow--switch--indicator{background-color:var(--switch--indicator-color--pressed)}.flow--switch[data-disabled]{color:var(--switch--color--disabled)}.flow--switch[data-disabled] .flow--switch--indicator{background-color:var(--switch--indicator-color--disabled)}.flow--switch[data-selected] .flow--switch--indicator:before{transform:translate(100%)}.flow--switch--indicator{width:var(--switch--indicator-width);height:var(--switch--indicator-height);background-color:var(--switch--indicator-color--default);border-radius:var(--switch--indicator-corner-radius);padding:var(--switch--indicator-to-marker-spacing);flex-shrink:0;position:relative;transition-property:background-color;transition-duration:var(--transition--duration--default)}.flow--switch--indicator:before{content:"";display:block;width:var(--switch--indicator-marker-size);height:var(--switch--indicator-marker-size);background-color:var(--switch--indicator-marker-color);border-radius:var(--corner-radius--round);transition-property:transform;transition-duration:var(--transition--duration--default);transform:translate(0);position:absolute;top:var(--switch--indicator-to-marker-spacing);left:var(--switch--indicator-to-marker-spacing)}.flow--switch--success[data-selected] .flow--switch--indicator,[data-selected].flow--switch .flow--switch--indicator{background-color:var(--switch--success-indicator-color--selected)}.flow--switch--success[data-selected][data-pressed] .flow--switch--indicator,[data-selected][data-pressed].flow--switch .flow--switch--indicator{background-color:var(--switch--success-indicator-color--selected-pressed)}.flow--switch--success[data-selected][data-disabled] .flow--switch--indicator,[data-selected][data-disabled].flow--switch .flow--switch--indicator{background-color:var(--switch--success-indicator-color--selected-disabled)}.flow--switch--danger[data-selected] .flow--switch--indicator{background-color:var(--switch--danger-indicator-color--selected)}.flow--switch--danger[data-selected][data-pressed] .flow--switch--indicator{background-color:var(--switch--danger-indicator-color--selected-pressed)}.flow--switch--danger[data-selected][data-disabled] .flow--switch--indicator{background-color:var(--switch--danger-indicator-color--selected-disabled)}.flow--text-area{order:2;color:var(--form-field-control--color);border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--border-radius);border-color:var(--form-field-control--border-color);padding-block:var(--form-control--padding-y);padding-inline:var(--form-control--padding-x);background-color:var(--form-field-control--background-color)}.flow--text-area:focus-visible,.flow--text-area:focus{outline:none}.flow--text-field{order:2;color:var(--form-field-control--color);border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--border-radius);border-color:var(--form-field-control--border-color);padding-block:var(--form-control--padding-y);padding-inline:var(--form-control--padding-x);background-color:var(--form-field-control--background-color)}.flow--text-field:focus-visible,.flow--text-field:focus{outline:none}.flow--tooltip{border-radius:var(--corner-radius--default);background-color:var(--tooltip--background-color);color:var(--tooltip--color);font-size:var(--tooltip--font-size);padding-block:var(--tooltip--padding-y);padding-inline:var(--tooltip--padding-x);max-width:var(--tooltip--max-width);transform:translateZ(0);--translate-origin-length: var(--tooltip--tooltip-to-content-spacing) / 2}.flow--tooltip[data-placement=top]{margin-bottom:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateY(var(--translate-origin-length))}.flow--tooltip[data-placement=bottom]{margin-top:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateY(var(--translate-origin-length) * -1)}.flow--tooltip[data-placement=bottom] .flow--tooltip--arrow svg{transform:rotate(180deg)}.flow--tooltip[data-placement=right]{margin-left:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateX(var(--translate-origin-length) * -1)}.flow--tooltip[data-placement=right] .flow--tooltip--arrow svg{transform:rotate(90deg)}.flow--tooltip[data-placement=left]{margin-right:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateX(var(--translate-origin-length))}.flow--tooltip[data-placement=left] .flow--tooltip--arrow svg{transform:rotate(-90deg)}.flow--tooltip[data-entering]{animation:flow--tooltip--slide .2s}.flow--tooltip[data-exiting]{animation:flow--tooltip--slide .2s reverse ease-in}.flow--tooltip--arrow{width:var(--tooltip--arrow-size);height:var(--tooltip--arrow-size)}.flow--tooltip--arrow svg{display:block;fill:var(--tooltip--background-color)}@keyframes flow--tooltip--slide{0%{transform:var(--translate-origin);opacity:0}to{transform:translateY(0);opacity:1}}:root{--transition--duration--default: .2s;--size--none: 0rem;--size-px--xxl: 64px;--size-px--xl: 32px;--size-px--l: 24px;--size-px--m: 16px;--size-px--s: 8px;--size-px--xs: 4px;--size-px--xxs: 2px;--size-px--xxxs: 1px;--size-rem--xxl: 4rem;--size-rem--xl: 2rem;--size-rem--l: 1.5rem;--size-rem--m: 1rem;--size-rem--s: .5rem;--size-rem--xs: .25rem;--size-rem--xxs: .125rem;--size-rem--xxxs: .0625rem;--font-size--xxl: 2rem;--font-size--xl: 1.5rem;--font-size--l: 1.125rem;--font-size--m: 1rem;--font-size--s: .875rem;--font-size--xs: .75rem;--font-size--xxs: .625rem;--line-height--default: 1.5;--font-weight--bold: 600;--font-weight--normal: 300;--color--transparent: rgba(0, 0, 0, 0);--color--soft-contrast-violet--1100: #4743a5;--color--soft-contrast-violet--1000: #534fb8;--color--soft-contrast-violet--900: #5c50ca;--color--soft-contrast-violet--800: #715dee;--color--soft-contrast-violet--700: #8574f0;--color--soft-contrast-violet--600: #998bf3;--color--soft-contrast-violet--500: #aea2f5;--color--soft-contrast-violet--400: #c2b9f8;--color--soft-contrast-violet--300: #d6d0fa;--color--soft-contrast-violet--200: #eae7fd;--color--soft-contrast-violet--100: #f4f3fe;--color--royal-orange--1100: #763200;--color--royal-orange--1000: #8f3d00;--color--royal-orange--900: #c25200;--color--royal-orange--800: #f56800;--color--royal-orange--700: #ff8225;--color--royal-orange--600: #ff9343;--color--royal-orange--500: #ffa562;--color--royal-orange--400: #ffc89f;--color--royal-orange--300: #ffd9bd;--color--royal-orange--200: #ffebdc;--color--royal-orange--100: #fff4eb;--color--amaranth-red--1100: #6a0f22;--color--amaranth-red--1000: #83122a;--color--amaranth-red--900: #b4193a;--color--amaranth-red--800: #e1244c;--color--amaranth-red--700: #e54366;--color--amaranth-red--600: #ea637f;--color--amaranth-red--500: #ee8299;--color--amaranth-red--400: #f2a2b3;--color--amaranth-red--300: #f7c1cc;--color--amaranth-red--200: #fbe0e6;--color--amaranth-red--100: #fdf0f3;--color--espelkamp-green--1100: #00291c;--color--espelkamp-green--1000: #003b29;--color--espelkamp-green--900: #005f42;--color--espelkamp-green--800: #00825b;--color--espelkamp-green--700: #00a673;--color--espelkamp-green--600: #00de9a;--color--espelkamp-green--500: #17ffb8;--color--espelkamp-green--400: #4fffc9;--color--espelkamp-green--300: #87ffda;--color--espelkamp-green--200: #c0ffeb;--color--espelkamp-green--100: #dcfff4;--color--hosting-blue--1100: #00205c;--color--hosting-blue--1000: #002a7b;--color--hosting-blue--900: #003fb8;--color--hosting-blue--800: #0054f5;--color--hosting-blue--700: #1a68ff;--color--hosting-blue--600: #3d80ff;--color--hosting-blue--500: #6197ff;--color--hosting-blue--400: #85afff;--color--hosting-blue--300: #abc6ff;--color--hosting-blue--200: #e0ebff;--color--hosting-blue--100: #f0f5ff;--color--gray--1100: #000000;--color--gray--1000: #222222;--color--gray--900: #464646;--color--gray--800: #6d6d6d;--color--gray--700: #909090;--color--gray--600: #b1b1b1;--color--gray--500: #d5d5d5;--color--gray--400: #e6e6e6;--color--gray--300: #f8f8f8;--color--gray--200: #fdfdfd;--color--gray--100: #ffffff;--border-style--default: solid;--corner-radius--round: 50%;--tooltip--max-width: 300px;--switch--indicator-width: 2.5rem;--navigation-item--icon-to-text-spacing: .5em;--icon--size--l: 4rem;--icon--size--m: 1.5rem;--icon--size--s: 1rem;--badge--icon-to-text-spacing: .5em;--avatar--size--m: 2.5rem;--form-control--border-style: var(--border-style--default);--form-control--padding-y: var(--size-px--s);--form-control--padding-x: var(--size-px--m);--form-control--control-to-info-spacing: var(--size-rem--xs);--form-control--label-to-control-spacing: var(--size-rem--xs);--font-size--default: var(--font-size--m);--disabled-plain-background-color: var(--color--transparent);--neutral-plain-background-color--default: var(--color--transparent);--success-plain-background-color--default: var(--color--transparent);--danger-plain-background-color--default: var(--color--transparent);--primary-plain-background-color--default: var(--color--transparent);--warning--color--1100: var(--color--royal-orange--1100);--warning--color--1000: var(--color--royal-orange--1000);--warning--color--900: var(--color--royal-orange--900);--warning--color--800: var(--color--royal-orange--800);--warning--color--700: var(--color--royal-orange--700);--warning--color--600: var(--color--royal-orange--600);--warning--color--500: var(--color--royal-orange--500);--warning--color--400: var(--color--royal-orange--400);--warning--color--300: var(--color--royal-orange--300);--warning--color--200: var(--color--royal-orange--200);--warning--color--100: var(--color--royal-orange--100);--danger--color--1100: var(--color--amaranth-red--1100);--danger--color--1000: var(--color--amaranth-red--1000);--danger--color--900: var(--color--amaranth-red--900);--danger--color--800: var(--color--amaranth-red--800);--danger--color--700: var(--color--amaranth-red--700);--danger--color--600: var(--color--amaranth-red--600);--danger--color--500: var(--color--amaranth-red--500);--danger--color--400: var(--color--amaranth-red--400);--danger--color--300: var(--color--amaranth-red--300);--danger--color--200: var(--color--amaranth-red--200);--danger--color--100: var(--color--amaranth-red--100);--neutral--color--1100: var(--color--gray--1100);--neutral--color--1000: var(--color--gray--1000);--neutral--color--900: var(--color--gray--900);--neutral--color--800: var(--color--gray--800);--neutral--color--700: var(--color--gray--700);--neutral--color--600: var(--color--gray--600);--neutral--color--500: var(--color--gray--500);--neutral--color--400: var(--color--gray--400);--neutral--color--300: var(--color--gray--300);--neutral--color--200: var(--color--gray--200);--neutral--color--100: var(--color--gray--100);--success--color--1100: var(--color--espelkamp-green--1100);--success--color--1000: var(--color--espelkamp-green--1000);--success--color--900: var(--color--espelkamp-green--900);--success--color--800: var(--color--espelkamp-green--800);--success--color--700: var(--color--espelkamp-green--700);--success--color--600: var(--color--espelkamp-green--600);--success--color--500: var(--color--espelkamp-green--500);--success--color--400: var(--color--espelkamp-green--400);--success--color--300: var(--color--espelkamp-green--300);--success--color--200: var(--color--espelkamp-green--200);--success--color--100: var(--color--espelkamp-green--100);--info--color--1100: var(--color--hosting-blue--1100);--info--color--1000: var(--color--hosting-blue--1000);--info--color--900: var(--color--hosting-blue--900);--info--color--800: var(--color--hosting-blue--800);--info--color--700: var(--color--hosting-blue--700);--info--color--600: var(--color--hosting-blue--600);--info--color--500: var(--color--hosting-blue--500);--info--color--400: var(--color--hosting-blue--400);--info--color--300: var(--color--hosting-blue--300);--info--color--200: var(--color--hosting-blue--200);--info--color--100: var(--color--hosting-blue--100);--primary--color--1100: var(--color--hosting-blue--1100);--primary--color--1000: var(--color--hosting-blue--1000);--primary--color--900: var(--color--hosting-blue--900);--primary--color--800: var(--color--hosting-blue--800);--primary--color--700: var(--color--hosting-blue--700);--primary--color--600: var(--color--hosting-blue--600);--primary--color--500: var(--color--hosting-blue--500);--primary--color--400: var(--color--hosting-blue--400);--primary--color--300: var(--color--hosting-blue--300);--primary--color--200: var(--color--hosting-blue--200);--primary--color--100: var(--color--hosting-blue--100);--border-width--400: var(--size-px--s);--border-width--300: var(--size-px--xs);--border-width--200: var(--size-px--xxs);--border-width--100: var(--size-px--xxxs);--corner-radius--default: var(--size-px--xs);--tooltip--arrow-size: var(--size-px--s);--tooltip--tooltip-to-content-spacing: var(--size-px--s);--tooltip--font-size: var(--font-size--s);--tooltip--padding-y: var(--size-px--xs);--tooltip--padding-x: var(--size-px--s);--switch--indicator-marker-size: var(--size-rem--m);--switch--indicator-to-marker-spacing: var(--size-rem--xs);--switch--indicator-corner-radius: var(--size-rem--m);--switch--indicator-height: var(--size-rem--l);--switch--label-to-indicator-spacing: var(--size-rem--s);--switch--font-weight: var(--font-weight--bold);--switch--font-size: var(--font-size--s);--section--content-to-content-spacing: var(--size-rem--m);--section--section-to-section-spacing: var(--size-rem--xl);--section--border-style: var(--border-style--default);--radio-group--icon-size-without-content: var(--icon--size--l);--radio-group--label-font-weight-with-content-or-icon: var(--font-weight--bold);--radio-group--border-style: var(--border-style--default);--radio-group--padding-y: var(--size-px--s);--radio-group--padding-x: var(--size-px--m);--radio-group--icon-to-text-spacing: var(--size-rem--m);--radio-group--text-to-text-spacing: var(--size-rem--xs);--radio-group--radio-to-radio-spacing: var(--size-px--m);--navigation-item--background-color--default: var(--color--transparent);--navigation-item--padding-y: var(--size-px--s);--navigation-item--padding-x: var(--size-px--s);--navigation-item--font-weight--current: var(--font-weight--bold);--navigation--item-to-item-spacing: var(--size-px--xs);--link--font-weight: var(--font-weight--bold);--link--font-size: var(--font-size--s);--labeled-value--value-to-button-spacing: var(--size-rem--xs);--labeled-value--label-to-value-spacing: var(--size-rem--xs);--label--font-weight: var(--font-weight--bold);--label--font-size: var(--font-size--s);--inline-alert--heading-font-size: var(--font-size--m);--inline-alert--icon-to-text-spacing: var(--size-rem--s);--inline-alert--text-to-text-spacing: var(--size-rem--xs);--inline-alert--border-style: var(--border-style--default);--inline-alert--padding: var(--size-px--m);--initials--variant-4-second-initial-color: var(--color--hosting-blue--1000);--initials--variant-4-first-initial-color: var(--color--hosting-blue--800);--initials--variant-4-background-color: var(--color--hosting-blue--200);--initials--variant-3-second-initial-color: var(--color--espelkamp-green--1000);--initials--variant-3-first-initial-color: var(--color--espelkamp-green--800);--initials--variant-3-background-color: var(--color--espelkamp-green--200);--initials--variant-2-second-initial-color: var(--color--royal-orange--1000);--initials--variant-2-first-initial-color: var(--color--royal-orange--800);--initials--variant-2-background-color: var(--color--royal-orange--200);--initials--variant-1-second-initial-color: var(--color--soft-contrast-violet--1000);--initials--variant-1-first-initial-color: var(--color--soft-contrast-violet--800);--initials--variant-1-background-color: var(--color--soft-contrast-violet--200);--initials--font-weight: var(--font-weight--bold);--heading--h6-font-size: var(--font-size--m);--heading--h5-font-size: var(--font-size--m);--heading--h4-font-size: var(--font-size--m);--heading--h3-font-size: var(--font-size--l);--heading--h2-font-size: var(--font-size--xl);--heading--h1-font-size: var(--font-size--xxl);--heading--font-weight: var(--font-weight--bold);--field-error--font-size: var(--font-size--s);--field-description--font-size: var(--font-size--s);--content-box--box-shadow: rgba(0, 0, 0, .1) 0px var(--size-px--xs) var(--size-px--s);--content-box--padding: var(--size-px--l);--checkbox--border-style: var(--border-style--default);--checkbox--padding-y: var(--size-px--s);--checkbox--padding-x: var(--size-px--m);--checkbox--checkmark-to-text-spacing: var(--size-rem--m);--button--font-size-small: var(--font-size--s);--button--padding-small-squished-y: var(--size-px--xs);--button--padding-small-squished-x: var(--size-px--s);--button--padding-small: var(--size-px--xs);--button--focus-outline-offset: var(--size-px--xxs);--button--padding: var(--size-px--s);--button--padding-squished-y: var(--size-px--s);--button--padding-squished-x: var(--size-px--m);--badge--padding-x-icon-only: var(--size-rem--xs);--badge--padding-x: var(--size-rem--s);--badge--padding-y: var(--size-rem--xs);--badge--corner-radius: var(--size-rem--m);--badge--height: var(--size-rem--l);--badge--font-size: var(--font-size--s);--avatar--size--l: var(--size-rem--xxl);--avatar--size--s: var(--size-rem--xl);--avatar--size--xs: var(--size-rem--l);--form-control--color--disabled: var(--neutral--color--800);--form-control--background-color--invalid: var(--danger--color--100);--form-control--background-color--focused: var(--neutral--color--100);--form-control--background-color--hover: var(--neutral--color--500);--form-control--background-color--disabled: var(--neutral--color--500);--form-control--background-color--default: var(--neutral--color--400);--form-control--border-color--focused: var(--info--color--700);--form-control--border-color--invalid: var(--danger--color--700);--form-control--border-color--hover: var(--neutral--color--600);--form-control--border-color--disabled: var(--neutral--color--500);--form-control--border-color--default: var(--neutral--color--400);--form-control--border-width: var(--border-width--100);--form-control--corner-radius: var(--corner-radius--default);--color--default: var(--neutral--color--1000);--focus-outline-color: var(--primary--color--800);--disabled-plain-content-color: var(--neutral--color--400);--disabled-solid-content-color: var(--neutral--color--600);--disabled-solid-background-color: var(--neutral--color--400);--neutral-plain-content-color: var(--neutral--color--1000);--neutral-plain-background-color--pressed: var(--neutral--color--500);--neutral-plain-background-color--hover: var(--neutral--color--400);--neutral-solid-content-color: var(--neutral--color--1000);--neutral-solid-background-color--pressed: var(--neutral--color--600);--neutral-solid-background-color--hover: var(--neutral--color--500);--neutral-solid-background-color--default: var(--neutral--color--400);--warning-outline-border-color: var(--warning--color--800);--warning-outline-content-color: var(--warning--color--900);--warning-outline-background-color: var(--neutral--color--100);--warning-solid-content-color: var(--neutral--color--100);--warning-solid-background-color--pressed: var(--warning--color--1000);--warning-solid-background-color--hover: var(--warning--color--900);--warning-solid-background-color--default: var(--warning--color--800);--success-outline-border-color: var(--success--color--800);--success-outline-content-color: var(--success--color--900);--success-outline-background-color: var(--neutral--color--100);--success-plain-content-color--pressed: var(--success--color--1000);--success-plain-content-color--hover: var(--success--color--900);--success-plain-content-color--default: var(--success--color--800);--success-plain-background-color--pressed: var(--success--color--200);--success-plain-background-color--hover: var(--success--color--100);--success-solid-content-color: var(--neutral--color--100);--success-solid-background-color--pressed: var(--success--color--1000);--success-solid-background-color--hover: var(--success--color--900);--success-solid-background-color--default: var(--success--color--800);--info-outline-border-color: var(--info--color--800);--info-outline-content-color: var(--info--color--900);--info-outline-background-color: var(--neutral--color--100);--info-solid-content-color: var(--neutral--color--100);--info-solid-background-color--pressed: var(--info--color--1000);--info-solid-background-color--hover: var(--info--color--900);--info-solid-background-color--default: var(--info--color--800);--danger-outline-border-color: var(--danger--color--800);--danger-outline-content-color: var(--danger--color--900);--danger-outline-background-color: var(--neutral--color--100);--danger-plain-content-color--pressed: var(--danger--color--1000);--danger-plain-content-color--hover: var(--danger--color--900);--danger-plain-content-color--default: var(--danger--color--800);--danger-plain-background-color--pressed: var(--danger--color--200);--danger-plain-background-color--hover: var(--danger--color--100);--danger-solid-content-color: var(--neutral--color--100);--danger-solid-background-color--pressed: var(--danger--color--1000);--danger-solid-background-color--hover: var(--danger--color--900);--danger-solid-background-color--default: var(--danger--color--800);--primary-plain-content-color--pressed: var(--primary--color--1000);--primary-plain-content-color--hover: var(--primary--color--900);--primary-plain-content-color--default: var(--primary--color--800);--primary-plain-background-color--pressed: var(--primary--color--200);--primary-plain-background-color--hover: var(--primary--color--100);--primary-solid-content-color: var(--neutral--color--100);--primary-solid-background-color--pressed: var(--primary--color--1000);--primary-solid-background-color--hover: var(--primary--color--900);--primary-solid-background-color--default: var(--primary--color--800);--tooltip--color: var(--neutral--color--100);--tooltip--background-color: var(--neutral--color--900);--switch--danger-indicator-color--selected-disabled: var(--danger--color--300);--switch--danger-indicator-color--selected-pressed: var(--danger--color--900);--switch--danger-indicator-color--selected: var(--danger--color--800);--switch--success-indicator-color--selected-disabled: var(--success--color--200);--switch--success-indicator-color--selected-pressed: var(--success--color--900);--switch--success-indicator-color--selected: var(--success--color--800);--switch--indicator-color--disabled: var(--neutral--color--400);--switch--indicator-color--pressed: var(--neutral--color--600);--switch--indicator-color--default: var(--neutral--color--500);--switch--indicator-marker-color: var(--neutral--color--100);--switch--color--disabled: var(--neutral--color--600);--section--border-color: var(--neutral--color--500);--section--border-width: var(--border-width--100);--radio-group--icon-color--default: var(--neutral--color--800);--radio-group--color--selected-disabled: var(--neutral--color--600);--radio-group--color--disabled: var(--neutral--color--500);--radio-group--color--selected: var(--info--color--900);--radio-group--color--default: var(--neutral--color--1000);--radio-group--background-color--hover: var(--info--color--100);--radio-group--background-color--selected-disabled: var(--neutral--color--400);--radio-group--background-color--disabled: var(--neutral--color--300);--radio-group--background-color--selected: var(--info--color--200);--radio-group--background-color--default: var(--neutral--color--100);--radio-group--border-color--selected-disabled: var(--neutral--color--600);--radio-group--border-color--disabled: var(--neutral--color--500);--radio-group--border-color--selected: var(--info--color--900);--radio-group--border-color--default: var(--neutral--color--500);--radio-group--border-width: var(--border-width--100);--radio-group--corner-radius: var(--corner-radius--default);--navigation-item--disabled-color: var(--neutral--color--100);--navigation-item--disabled-background-color: var(--neutral--color--400);--navigation-item--background-color--current: var(--info--color--100);--navigation-item--background-color--hover: var(--info--color--100);--navigation-item--icon-color--current: var(--info--color--800);--navigation-item--icon-color--default: var(--neutral--color--800);--navigation-item--color--current: var(--info--color--800);--navigation-item--corner-radius: var(--corner-radius--default);--label--color: var(--neutral--color--800);--inline-alert--border-x-start-width: var(--border-width--400);--inline-alert--border-width: var(--border-width--100);--inline-alert--corner-radius: var(--corner-radius--default);--heading--color: var(--info--color--1000);--field-error--color: var(--danger--color--700);--field-description--color: var(--neutral--color--800);--content-box--corner-radius: var(--corner-radius--default);--content-box--background-color: var(--neutral--color--100);--checkbox--checkmark-color--selected-disabled: var(--neutral--color--600);--checkbox--checkmark-color--disabled: var(--neutral--color--500);--checkbox--checkmark-color--selected: var(--info--color--900);--checkbox--checkmark-color--default: var(--neutral--color--800);--checkbox--color--selected-disabled: var(--neutral--color--600);--checkbox--color--disabled: var(--neutral--color--500);--checkbox--color--selected: var(--info--color--900);--checkbox--color--default: var(--neutral--color--1000);--checkbox--background-color--hover: var(--info--color--100);--checkbox--background-color--selected-disabled: var(--neutral--color--400);--checkbox--background-color--disabled: var(--neutral--color--300);--checkbox--background-color--selected: var(--info--color--200);--checkbox--background-color--default: var(--neutral--color--100);--checkbox--border-color--selected-disabled: var(--neutral--color--600);--checkbox--border-color--disabled: var(--neutral--color--500);--checkbox--border-color--selected: var(--info--color--900);--checkbox--border-color--default: var(--neutral--color--700);--checkbox--border-width: var(--border-width--100);--checkbox--corner-radius: var(--corner-radius--default);--button--disabled-plain-background-color: var(--disabled-plain-background-color);--button--danger-plain-background-color--default: var(--danger-plain-background-color--default);--button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);--button--primary-plain-background-color--default: var(--primary-plain-background-color--default);--button--accent-plain-background-color--default: var(--success-plain-background-color--default);--button--failed-icon-color: var(--danger--color--700);--button--succeeded-icon-color: var(--success--color--700);--button--pending-icon-color: var(--neutral--color--600);--button--focus-outline-width: var(--border-width--200);--button--corner-radius: var(--corner-radius--default);--link--danger-color--pressed: var(--danger-plain-content-color--pressed);--link--danger-color--hover: var(--danger-plain-content-color--hover);--link--danger-color--default: var(--danger-plain-content-color--default);--link--primary-color--pressed: var(--primary-plain-content-color--pressed);--link--primary-color--hover: var(--primary-plain-content-color--hover);--link--primary-color--default: var(--primary-plain-content-color--default);--link--disabled-color: var(--disabled-plain-content-color);--inline-alert--success-heading-color: var(--success-outline-content-color);--inline-alert--success-border-color: var(--success-outline-border-color);--inline-alert--danger-heading-color: var(--danger-outline-content-color);--inline-alert--danger-border-color: var(--danger-outline-border-color);--inline-alert--warning-heading-color: var(--warning-outline-content-color);--inline-alert--warning-border-color: var(--warning-outline-border-color);--inline-alert--info-heading-color: var(--info-outline-content-color);--inline-alert--info-border-color: var(--info-outline-border-color);--inline-alert--background-color: var(--info-outline-background-color);--button--disabled-plain-content-color: var(--disabled-plain-content-color);--button--disabled-solid-content-color: var(--disabled-solid-content-color);--button--disabled-solid-background-color: var(--disabled-solid-background-color);--button--danger-plain-content-color--pressed: var(--danger-plain-content-color--pressed);--button--danger-plain-content-color--hover: var(--danger-plain-content-color--hover);--button--danger-plain-content-color--default: var(--danger-plain-content-color--default);--button--danger-plain-background-color--pressed: var(--danger-plain-background-color--pressed);--button--danger-plain-background-color--hover: var(--danger-plain-background-color--hover);--button--danger-solid-content-color--pressed: var(--danger-solid-content-color);--button--danger-solid-content-color--hover: var(--danger-solid-content-color);--button--danger-solid-content-color--default: var(--danger-solid-content-color);--button--danger-solid-background-color--pressed: var(--danger-solid-background-color--pressed);--button--danger-solid-background-color--hover: var(--danger-solid-background-color--hover);--button--danger-solid-background-color--default: var(--danger-solid-background-color--default);--button--secondary-plain-content-color--pressed: var(--neutral-plain-content-color);--button--secondary-plain-content-color--hover: var(--neutral-plain-content-color);--button--secondary-plain-content-color--default: var(--neutral-plain-content-color);--button--secondary-plain-background-color--pressed: var(--neutral-plain-background-color--pressed);--button--secondary-plain-background-color--hover: var(--neutral-plain-background-color--hover);--button--secondary-solid-content-color--pressed: var(--neutral-solid-content-color);--button--secondary-solid-content-color--hover: var(--neutral-solid-content-color);--button--secondary-solid-content-color--default: var(--neutral-solid-content-color);--button--secondary-solid-background-color--pressed: var(--neutral-solid-background-color--pressed);--button--secondary-solid-background-color--hover: var(--neutral-solid-background-color--hover);--button--secondary-solid-background-color--default: var(--neutral-solid-background-color--default);--button--primary-plain-content-color--pressed: var(--primary-plain-content-color--pressed);--button--primary-plain-content-color--hover: var(--primary-plain-content-color--hover);--button--primary-plain-content-color--default: var(--primary-plain-content-color--default);--button--primary-plain-background-color--pressed: var(--primary-plain-background-color--pressed);--button--primary-plain-background-color--hover: var(--primary-plain-background-color--hover);--button--primary-solid-content-color--pressed: var(--primary-solid-content-color);--button--primary-solid-content-color--hover: var(--primary-solid-content-color);--button--primary-solid-content-color--default: var(--primary-solid-content-color);--button--primary-solid-background-color--pressed: var(--primary-solid-background-color--pressed);--button--primary-solid-background-color--hover: var(--primary-solid-background-color--hover);--button--primary-solid-background-color--default: var(--primary-solid-background-color--default);--button--accent-plain-content-color--pressed: var(--success-plain-content-color--pressed);--button--accent-plain-content-color--hover: var(--success-plain-content-color--hover);--button--accent-plain-content-color--default: var(--success-plain-content-color--default);--button--accent-plain-background-color--pressed: var(--success-plain-background-color--pressed);--button--accent-plain-background-color--hover: var(--success-plain-background-color--hover);--button--accent-solid-content-color--pressed: var(--success-solid-content-color);--button--accent-solid-content-color--hover: var(--success-solid-content-color);--button--accent-solid-content-color--default: var(--success-solid-content-color);--button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);--button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);--button--accent-solid-background-color--default: var(--success-solid-background-color--default);--button--focus-outline-color: var(--focus-outline-color);--badge--danger-background-color: var(--danger-solid-background-color--default);--badge--warning-background-color: var(--warning-solid-background-color--default);--badge--success-background-color: var(--success-solid-background-color--default);--badge--info-background-color: var(--info-solid-background-color--default);--badge--color: var(--info-solid-content-color)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,svg,canvas{display:block;max-width:100%}input,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul{padding:0;list-style-type:none}a{text-decoration:none;color:inherit}.flow{font-family:sans-serif;line-height:var(--line-height--default);font-size:var(--size-rem--m);font-weight:var(--font-weight--normal);color:var(--color--default)}
|
|
1
|
+
.flow--avatar{border-radius:var(--corner-radius--round);width:var(--avatar-size);height:var(--avatar-size);overflow:hidden;flex-shrink:0}.flow--avatar>img{width:100%;height:100%;object-fit:cover}.flow--avatar--initials{width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:calc(var(--avatar-size) * .4)}.flow--avatar--size-m,.flow--avatar{--avatar-size: var(--avatar--size--m)}.flow--avatar--size-xs{--avatar-size: var(--avatar--size--xs)}.flow--avatar--size-s{--avatar-size: var(--avatar--size--s)}.flow--avatar--size-l{--avatar-size: var(--avatar--size--l)}.flow--icon{flex-shrink:0;max-width:none}.flow--icon--size-m,.flow--icon{width:var(--icon--size--m);height:var(--icon--size--m)}.flow--icon--size-s{width:var(--icon--size--s);height:var(--icon--size--s)}.flow--icon--size-l{width:var(--icon--size--l);height:var(--icon--size--l)}.flow--badge{color:var(--badge--color);font-size:var(--badge--font-size);background-color:var(--badge--info-background-color);border-radius:var(--badge--corner-radius);padding-block:var(--badge--padding-y);padding-inline:var(--badge--padding-x);height:var(--badge--height);line-height:var(--size-rem--m);display:inline-grid;grid-template-areas:"icon content";grid-template-columns:auto 1fr;column-gap:var(--badge--icon-to-text-spacing);max-width:fit-content}.flow--badge:not(:has(.flow--badge--content)){padding-inline:var(--badge--padding-x-icon-only);grid-template-areas:"icon";grid-template-columns:auto}.flow--badge:has(.flow--badge--custom-icon) .flow--badge--status-icon{display:none}.flow--badge--status-icon,.flow--badge--custom-icon{grid-area:icon}.flow--badge--content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-area:content}.flow--badge--info,.flow--badge{background-color:var(--badge--info-background-color)}.flow--badge--success{background-color:var(--badge--success-background-color)}.flow--badge--warning{background-color:var(--badge--warning-background-color)}.flow--badge--danger{background-color:var(--badge--danger-background-color)}.flow--checkbox{border-width:var(--checkbox--border-width);border-style:var(--checkbox--border-style);border-color:var(--checkbox--border-color--default);border-radius:var(--checkbox--corner-radius);padding-block:var(--checkbox--padding-y);padding-inline:var(--checkbox--padding-x);background-color:var(--checkbox--background-color--default);color:var(--checkbox--color--default);display:grid;column-gap:var(--checkbox--checkmark-to-text-spacing);grid-template-columns:auto 1fr;width:fit-content}.flow--checkbox:hover{background-color:var(--checkbox--background-color--hover)}.flow--checkbox[data-selected]{border-color:var(--checkbox--border-color--selected);background-color:var(--checkbox--background-color--selected);color:var(--checkbox--color--selected)}.flow--checkbox[data-selected] .flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--selected)}.flow--checkbox[data-disabled]{border-color:var(--checkbox--border-color--disabled);background-color:var(--checkbox--background-color--disabled);color:var(--checkbox--color--disabled)}.flow--checkbox[data-disabled] .flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--disabled)}.flow--checkbox[data-selected][data-disabled]{border-color:var(--checkbox--border-color--selected-disabled);background-color:var(--checkbox--background-color--selected-disabled);color:var(--checkbox--color--selected-disabled)}.flow--checkbox[data-selected][data-disabled] .flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--selected-disabled)}.flow--checkbox--checkmark{color:var(--checkbox--checkmark-color--default)}.flow--layout-card{background-color:var(--content-box--background-color);box-shadow:var(--content-box--box-shadow);border-radius:var(--content-box--corner-radius);padding:var(--content-box--padding)}.flow--field-description{color:var(--field-description--color);font-size:var(--field-description--font-size)}.flow--heading{font-weight:var(--heading--font-weight);color:var(--heading--color)}h1{font-size:var(--heading--h1-font-size)}h2{font-size:var(--heading--h2-font-size)}h3{font-size:var(--heading--h3-font-size)}h4{font-size:var(--heading--h4-font-size)}h5{font-size:var(--heading--h5-font-size)}h6{font-size:var(--heading--h6-font-size)}.flow--initials{display:flex;font-weight:700;background-color:var(--background-color)}.flow--initials *:nth-child(odd){color:var(--char-1-color)}.flow--initials *:nth-child(2n){color:var(--char-2-color)}.flow--initials *:only-child{color:var(--char-2-color)}.flow--initials--variant-1,.flow--initials{--background-color: var(--initials--variant-1-background-color);--char-1-color: var(--initials--variant-1-first-initial-color);--char-2-color: var(--initials--variant-1-second-initial-color)}.flow--initials--variant-2{--background-color: var(--initials--variant-2-background-color);--char-1-color: var(--initials--variant-2-first-initial-color);--char-2-color: var(--initials--variant-2-second-initial-color)}.flow--initials--variant-3{--background-color: var(--initials--variant-3-background-color);--char-1-color: var(--initials--variant-3-first-initial-color);--char-2-color: var(--initials--variant-3-second-initial-color)}.flow--initials--variant-4{--background-color: var(--initials--variant-4-background-color);--char-1-color: var(--initials--variant-4-first-initial-color);--char-2-color: var(--initials--variant-4-second-initial-color)}.flow--inline-alert{border-radius:var(--inline-alert--corner-radius);border-width:var(--inline-alert--border-width);border-style:var(--inline-alert--border-style);border-inline-start-width:var(--inline-alert--border-x-start-width);padding:var(--inline-alert--padding);display:grid;grid-template-columns:auto 1fr;grid-column-gap:var(--inline-alert--icon-to-text-spacing);grid-row-gap:var(--inline-alert--text-to-text-spacing);background-color:var(--inline-alert--background-color);width:100%}.flow--inline-alert:not(:has(.flow--inline-alert--content)){grid-template-areas:"icon heading"}.flow--inline-alert:has(.flow--inline-alert--content){grid-template-areas:"icon heading" ". content"}.flow--inline-alert--status-icon{grid-area:icon}.flow--inline-alert--heading{grid-area:heading;font-size:var(--inline-alert--heading-font-size)}.flow--inline-alert--content{grid-area:content}.flow--inline-alert--info,.flow--inline-alert{border-color:var(--inline-alert--info-border-color)}.flow--inline-alert--info .flow--inline-alert--heading,.flow--inline-alert .flow--inline-alert--heading,.flow--inline-alert--info .flow--inline-alert--status-icon,.flow--inline-alert .flow--inline-alert--status-icon{color:var(--inline-alert--info-heading-color)}.flow--inline-alert--warning{border-color:var(--inline-alert--warning-border-color)}.flow--inline-alert--warning .flow--inline-alert--heading,.flow--inline-alert--warning .flow--inline-alert--status-icon{color:var(--inline-alert--warning-heading-color)}.flow--inline-alert--danger{border-color:var(--inline-alert--danger-border-color)}.flow--inline-alert--danger .flow--inline-alert--heading,.flow--inline-alert--danger .flow--inline-alert--status-icon{color:var(--inline-alert--danger-heading-color)}.flow--inline-alert--success{border-color:var(--inline-alert--success-border-color)}.flow--inline-alert--success .flow--inline-alert--heading,.flow--inline-alert--success .flow--inline-alert--status-icon{color:var(--inline-alert--success-heading-color)}.flow--label{color:var(--label--color);font-size:var(--label--font-size);font-weight:var(--label--font-weight)}.flow--labeled-value{display:grid;grid-template-areas:"label" "value";row-gap:var(--labeled-value--label-to-value-spacing);column-gap:var(--labeled-value--value-to-button-spacing)}.flow--labeled-value:has(.flow--labeled-value--button){grid-template-areas:"label label " "value button";grid-template-columns:auto 1fr}.flow--labeled-value--label{grid-area:label}.flow--labeled-value--content{grid-area:value}.flow--labeled-value--button{grid-area:button;align-self:start;justify-self:start}.flow--link{font-size:var(--link--font-size);font-weight:var(--link--font-weight);transition-property:color;transition-duration:var(--transition--duration--default)}.flow--link[aria-disabled]{color:var(--link--disabled-color)}.flow--link:not([aria-disabled]){cursor:pointer}.flow--link--primary:not([aria-disabled]),.flow--link:not([aria-disabled]){color:var(--link--primary-color--default)}.flow--link--primary:not([aria-disabled]):hover,.flow--link:not([aria-disabled]):hover{color:var(--link--primary-color--hover)}.flow--link--primary:not([aria-disabled])[data-pressed],.flow--link:not([aria-disabled])[data-pressed]{color:var(--link--primary-color--pressed)}.flow--link--danger:not([aria-disabled]){color:var(--link--danger-color--default)}.flow--link--danger:not([aria-disabled]):hover{color:var(--link--danger-color--hover)}.flow--link--danger:not([aria-disabled])[data-pressed]{color:var(--link--danger-color--pressed)}.flow--navigation>ul{display:flex;flex-direction:column;row-gap:var(--navigation--item-to-item-spacing)}.flow--navigation--navigation-item a{display:flex;flex-direction:row;border:none;border-radius:var(--navigation-item--corner-radius);background-color:var(--navigation-item--background-color--default);padding:var(--navigation-item--padding-y) var(--navigation-item--padding-x);cursor:default}.flow--navigation--navigation-item a[href]{cursor:pointer}.flow--navigation--navigation-item a:focus{background-color:var(--navigation-item--background-color--hover)}.flow--navigation--navigation-item a[aria-current=page]{background-color:var(--navigation-item--background-color--current);font-weight:var(--navigation-item--font-weight--current);color:var(--navigation-item--color--current)}.flow--navigation--navigation-item a[aria-current=page] .flow--navigation--navigation-item--icon{color:var(--navigation-item--icon-color--current)}.flow--navigation--navigation-item--icon{order:0;color:var(--navigation-item--icon-color--default)}.flow--navigation--navigation-item--text{margin-inline-start:var(--navigation-item--icon-to-text-spacing);order:1}.flow--form-field{display:flex;flex-direction:column}.flow--form-field--label{order:1;margin-bottom:var(--form-control--label-to-control-spacing)}.flow--form-field--field-error,.flow--form-field--custom-field-error,.flow--form-field--field-description{order:3;margin-top:var(--form-control--control-to-info-spacing)}.flow--form-field:has(.flow--form-field--field-error) .flow--form-field--field-description{display:none}.flow--form-field:has(.flow--form-field--custom-field-error) .flow--form-field--field-error{display:none}.flow--form-field{--form-field-control--background-color: var( --form-control--background-color--default );--form-field-control--border-color: var( --form-control--background-color--default );--form-field-control--color: inherit}.flow--form-field:hover{--form-field-control--background-color: var( --form-control--background-color--hover );--form-field-control--border-color: var( --form-control--border-color--hover );--form-field-control--color: inherit}.flow--form-field[data-invalid]{--form-field-control--background-color: var( --form-control--background-color--invalid );--form-field-control--border-color: var( --form-control--border-color--invalid );--form-field-control--color: inherit}.flow--form-field[data-invalid]:focus-within,.flow--form-field:focus-within{--form-field-control--background-color: var( --form-control--background-color--focused );--form-field-control--border-color: var( --form-control--border-color--focused );--form-field-control--color: inherit}.flow--form-field[data-disabled]{--form-field-control--background-color: var( --form-control--background-color--disabled );--form-field-control--border-color: var( --form-control--border-color--disabled );--form-field-control--color: var(--form-control--color--disabled)}.flow--field-error{color:var(--field-error--color);font-size:var(--field-error--font-size)}.flow--button{position:relative;border:none;border-radius:var(--button--corner-radius);padding-block:var(--button--padding-squished-y);padding-inline:var(--button--padding-squished-x);font-size:var(--font-size--default);line-height:var(--line-height--default);font-weight:700;transition-property:color,background-color;transition-duration:var(--transition--duration--default);outline-color:var(--button--focus-outline-color);outline-offset:var(--button--focus-outline-offset);max-width:100%}.flow--button:has(.flow--button--icon){padding:var(--button--padding)}.flow--button:has(.flow--button--content){display:grid;justify-content:center;align-items:center;grid-template-areas:"content"}.flow--button--content,.flow--button--state-icon{grid-area:content}.flow--button--text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.flow--button--icon,.flow--button--icon svg{display:block}.flow--button--size-s{font-size:var(--button--font-size-small);padding-block:var(--button--padding-small-squished-y);padding-inline:var(--button--padding-small-squished-x)}.flow--button--size-s:has(.flow--button--icon){padding:var(--button--padding-small)}.flow--button--state-icon{color:var(--button--pending-icon-color);justify-self:center}.flow--button--is-succeeded .flow--button--state-icon{color:var(--button--succeeded-icon-color)}.flow--button--is-failed .flow--button--state-icon{color:var(--button--failed-icon-color)}.flow--button--is-pending .flow--button--content,.flow--button--is-failed .flow--button--content,.flow--button--is-succeeded .flow--button--content{visibility:hidden}.flow--button--is-pending.flow--button--plain .flow--button--content:not(:has(.flow--button--icon)),.flow--button--is-failed.flow--button--plain .flow--button--content:not(:has(.flow--button--icon)),.flow--button--is-succeeded.flow--button--plain .flow--button--content:not(:has(.flow--button--icon)){visibility:visible}.flow--button--primary.flow--button--solid,.flow--button{background-color:var(--button--primary-solid-background-color--default);color:var(--button--primary-solid-content-color--default)}.flow--button--primary.flow--button--solid:hover,.flow--button:hover{background-color:var(--button--primary-solid-background-color--hover);color:var(--button--primary-solid-content-color--hover)}.flow--button--primary.flow--button--solid[data-pressed],[data-pressed].flow--button{background-color:var(--button--primary-solid-background-color--pressed);color:var(--button--primary-solid-content-color--pressed)}.flow--button--primary.flow--button--solid[disabled],[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--accent.flow--button--solid,.flow--button--accent.flow--button{background-color:var(--button--accent-solid-background-color--default);color:var(--button--accent-solid-content-color--default)}.flow--button--accent.flow--button--solid:hover,.flow--button--accent.flow--button:hover{background-color:var(--button--accent-solid-background-color--hover);color:var(--button--accent-solid-content-color--hover)}.flow--button--accent.flow--button--solid[data-pressed],.flow--button--accent[data-pressed].flow--button{background-color:var(--button--accent-solid-background-color--pressed);color:var(--button--accent-solid-content-color--pressed)}.flow--button--accent.flow--button--solid[disabled],.flow--button--accent[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--danger.flow--button--solid,.flow--button--danger.flow--button{background-color:var(--button--danger-solid-background-color--default);color:var(--button--danger-solid-content-color--default)}.flow--button--danger.flow--button--solid:hover,.flow--button--danger.flow--button:hover{background-color:var(--button--danger-solid-background-color--hover);color:var(--button--danger-solid-content-color--hover)}.flow--button--danger.flow--button--solid[data-pressed],.flow--button--danger[data-pressed].flow--button{background-color:var(--button--danger-solid-background-color--pressed);color:var(--button--danger-solid-content-color--pressed)}.flow--button--danger.flow--button--solid[disabled],.flow--button--danger[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--secondary.flow--button--solid,.flow--button--secondary.flow--button{background-color:var(--button--secondary-solid-background-color--default);color:var(--button--secondary-solid-content-color--default)}.flow--button--secondary.flow--button--solid:hover,.flow--button--secondary.flow--button:hover{background-color:var(--button--secondary-solid-background-color--hover);color:var(--button--secondary-solid-content-color--hover)}.flow--button--secondary.flow--button--solid[data-pressed],.flow--button--secondary[data-pressed].flow--button{background-color:var(--button--secondary-solid-background-color--pressed);color:var(--button--secondary-solid-content-color--pressed)}.flow--button--secondary.flow--button--solid[disabled],.flow--button--secondary[disabled].flow--button{background-color:var(--button--disabled-solid-background-color);color:var(--button--disabled-solid-content-color)}.flow--button--primary.flow--button--plain,.flow--button--plain.flow--button{background-color:var(--button--primary-plain-background-color--default);color:var(--button--primary-plain-content-color--default)}.flow--button--primary.flow--button--plain:hover,.flow--button--plain.flow--button:hover{background-color:var(--button--primary-plain-background-color--hover);color:var(--button--primary-plain-content-color--hover)}.flow--button--primary.flow--button--plain[data-pressed],.flow--button--plain[data-pressed].flow--button{background-color:var(--button--primary-plain-background-color--pressed);color:var(--button--primary-plain-content-color--pressed)}.flow--button--primary.flow--button--plain[disabled],.flow--button--plain[disabled].flow--button{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--button--accent.flow--button--plain{background-color:var(--button--accent-plain-background-color--default);color:var(--button--accent-plain-content-color--default)}.flow--button--accent.flow--button--plain:hover{background-color:var(--button--accent-plain-background-color--hover);color:var(--button--accent-plain-content-color--hover)}.flow--button--accent.flow--button--plain[data-pressed]{background-color:var(--button--accent-plain-background-color--pressed);color:var(--button--accent-plain-content-color--pressed)}.flow--button--accent.flow--button--plain[disabled]{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--button--danger.flow--button--plain{background-color:var(--button--danger-plain-background-color--default);color:var(--button--danger-plain-content-color--default)}.flow--button--danger.flow--button--plain:hover{background-color:var(--button--danger-plain-background-color--hover);color:var(--button--danger-plain-content-color--hover)}.flow--button--danger.flow--button--plain[data-pressed]{background-color:var(--button--danger-plain-background-color--pressed);color:var(--button--danger-plain-content-color--pressed)}.flow--button--danger.flow--button--plain[disabled]{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--button--secondary.flow--button--plain{background-color:var(--button--secondary-plain-background-color--default);color:var(--button--secondary-plain-content-color--default)}.flow--button--secondary.flow--button--plain:hover{background-color:var(--button--secondary-plain-background-color--hover);color:var(--button--secondary-plain-content-color--hover)}.flow--button--secondary.flow--button--plain[data-pressed]{background-color:var(--button--secondary-plain-background-color--pressed);color:var(--button--secondary-plain-content-color--pressed)}.flow--button--secondary.flow--button--plain[disabled]{background-color:var(--button--disabled-plain-background-color);color:var(--button--disabled-plain-content-color)}.flow--number-field--group{order:2;display:grid;grid-template-columns:1fr max-content;grid-template-areas:"input increment" "input decrement"}.flow--number-field--input{order:2;color:var(--form-field-control--color);border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--border-radius);border-color:var(--form-field-control--border-color);padding-block:var(--form-control--padding-y);padding-inline:var(--form-control--padding-x);background-color:var(--form-field-control--background-color);grid-area:input}.flow--number-field--input:focus-visible,.flow--number-field--input:focus{outline:none}.flow--number-field--decrement-button{grid-area:decrement}.flow--number-field--increment-button{grid-area:increment}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-width:var(--form-control--border-width);border-color:var(--form-field-control--border-color);border-style:solid}@media (pointer: fine){.flow--number-field--input{border-start-end-radius:0;border-end-end-radius:0}.flow--number-field--increment-button .flow--number-field--coarse-pointer-icon,.flow--number-field--decrement-button .flow--number-field--coarse-pointer-icon{display:none}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;padding-block:0}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0}.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-block-end:none;border-end-end-radius:0}}@media (pointer: coarse){.flow--number-field--group{grid-template-columns:auto 1fr auto;grid-template-areas:"decrement input increment"}.flow--number-field--input{border-radius:0}.flow--number-field--decrement-button :not(.flow--number-field--touch-icon){display:none}.flow--number-field--increment-button :not(.flow--number-field--touch-icon){display:none}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{padding-inline:var(--form-control--padding-x)}.flow--number-field--group.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.flow--number-field--group.flow--number-field--group .flow--number-field--increment-button{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}}.flow--radio-group{display:flex;flex-wrap:wrap;container-type:inline-size;isolation:isolate}.flow--radio-group:has(.flow--radio-group--radio--content),.flow--radio-group:has(.flow--radio-group--radio--icon){display:grid;gap:var(--radio-group--radio-to-radio-spacing)}.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--label,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--label{grid-column:1/-1;margin-bottom:calc((var(--radio-group--radio-to-radio-spacing) - var(--form-control--label-to-control-spacing)) * -1)}.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--field-error,.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--custom-field-error,.flow--radio-group:has(.flow--radio-group--radio--content) .flow--radio-group--field-description,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--field-error,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--custom-field-error,.flow--radio-group:has(.flow--radio-group--radio--icon) .flow--radio-group--field-description{grid-column:1/-1;margin-top:calc((var(--radio-group--radio-to-radio-spacing) - var(--form-control--control-to-info-spacing)) * -1)}.flow--radio-group:has(.flow--radio-group--radio--icon){grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}.flow--radio-group:has(.flow--radio-group--radio--content){grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}.flow--radio-group:has(.flow--radio-group--field-error) .flow--radio-group--field-description{display:none}.flow--radio-group:has(.flow--radio-group--custom-field-error) .flow--radio-group--field-error{display:none}.flow--radio-group--label{width:100%;margin-bottom:var(--form-control--label-to-control-spacing)}.flow--radio-group--field-error,.flow--radio-group--custom-field-error,.flow--radio-group--field-description{margin-top:var(--form-control--control-to-info-spacing);width:100%}.flow--radio-group--radio{border:var(--radio-group--border-width) var(--radio-group--border-style) var(--radio-group--border-color--default);padding:var(--radio-group--padding-y) var(--radio-group--padding-x);background-color:var(--radio-group--background-color--default);color:var(--radio-group--color--default);display:grid;row-gap:var(--radio-group--text-to-text-spacing);column-gap:var(--radio-group--icon-to-text-spacing);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default)}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)){grid-template-areas:"label checkmark";grid-template-columns:1fr auto;flex:1;margin-right:-1px}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):first-of-type{border-radius:0;border-start-start-radius:var(--radio-group--corner-radius);border-end-start-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):last-of-type{border-radius:0;border-start-end-radius:var(--radio-group--corner-radius);border-end-end-radius:var(--radio-group--corner-radius);margin:0}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon))[data-selected] .flow--radio-group--radio--checkmark{display:block}@container (max-width: 600px){.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)){flex:auto;width:100%;margin:0 0 -1px}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):first-of-type{border-radius:0;border-start-start-radius:var(--radio-group--corner-radius);border-start-end-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:not(:has(.flow--radio-group--radio--content)):not(:has(.flow--radio-group--radio--icon)):last-of-type{border-radius:0;border-end-end-radius:var(--radio-group--corner-radius);border-end-start-radius:var(--radio-group--corner-radius);margin:0}}.flow--radio-group--radio:has(.flow--radio-group--radio--icon):not(:has(.flow--radio-group--radio--content)){grid-template-areas:"icon" "label";grid-template-columns:1fr;justify-items:center;border-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:has(.flow--radio-group--radio--icon):not(:has(.flow--radio-group--radio--content)) .flow--radio-group--radio--label{font-weight:var(--radio-group--label-font-weight-with-content-or-icon)}.flow--radio-group--radio:has(.flow--radio-group--radio--icon):not(:has(.flow--radio-group--radio--content)) .flow--radio-group--radio--icon{height:var(--radio-group--icon-size-without-content);width:var(--radio-group--icon-size-without-content)}.flow--radio-group--radio:has(.flow--radio-group--radio--content){grid-template-areas:"label" "content";grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-items:start;border-radius:var(--radio-group--corner-radius)}.flow--radio-group--radio:has(.flow--radio-group--radio--content) .flow--radio-group--radio--label{font-weight:var(--radio-group--label-font-weight-with-content-or-icon)}.flow--radio-group--radio:has(.flow--radio-group--radio--content):has(.flow--radio-group--radio--icon){grid-template-areas:"icon label" ". content";grid-template-columns:auto 1fr}.flow--radio-group--radio:hover{background-color:var(--radio-group--background-color--hover)}.flow--radio-group--radio[data-selected]{border-color:var(--radio-group--border-color--selected);background-color:var(--radio-group--background-color--selected);color:var(--radio-group--color--selected);z-index:1}.flow--radio-group--radio[data-disabled],[aria-disabled] .flow--radio-group--radio{border-color:var(--radio-group--border-color--disabled);background-color:var(--radio-group--background-color--disabled);color:var(--radio-group--color--disabled)}.flow--radio-group--radio[data-disabled][data-selected],[aria-disabled] .flow--radio-group--radio[date-selected]{border-color:var(--radio-group--border-color--selected-disabled);background-color:var(--radio-group--background-color--selected-disabled);color:var(--radio-group--color--selected-disabled)}.flow--radio-group--radio:not([data-selected]):not([data-disabled]) .flow--radio-group--radio--icon{color:var(--radio-group--icon-color--default)}.flow--radio-group--radio--icon{grid-area:icon}.flow--radio-group--radio--label{grid-area:label}.flow--radio-group--radio--content{grid-area:content}.flow--radio-group--radio--checkmark{grid-area:checkmark;display:none}.flow--section{margin-block:var(--section--section-to-section-spacing);display:flex;flex-direction:column;row-gap:var(--section--content-to-content-spacing)}.flow--section:first-child{margin-top:0}.flow--section:last-child{margin-bottom:0}.flow--section+.flow--section{border-top-width:var(--section--border-width);border-top-style:var(--section--border-style);border-top-color:var(--section--border-color);padding-top:var(--section--section-to-section-spacing)}.flow--switch{display:flex;align-items:center;font-size:var(--switch--font-size);font-weight:var(--switch--font-weight);column-gap:var(--switch--label-to-indicator-spacing)}.flow--switch.flow--switch--label-leading{flex-direction:row-reverse}.flow--switch[data-pressed] .flow--switch--indicator{background-color:var(--switch--indicator-color--pressed)}.flow--switch[data-disabled]{color:var(--switch--color--disabled)}.flow--switch[data-disabled] .flow--switch--indicator{background-color:var(--switch--indicator-color--disabled)}.flow--switch[data-selected] .flow--switch--indicator:before{transform:translate(100%)}.flow--switch--indicator{width:var(--switch--indicator-width);height:var(--switch--indicator-height);background-color:var(--switch--indicator-color--default);border-radius:var(--switch--indicator-corner-radius);padding:var(--switch--indicator-to-marker-spacing);flex-shrink:0;position:relative;transition-property:background-color;transition-duration:var(--transition--duration--default)}.flow--switch--indicator:before{content:"";display:block;width:var(--switch--indicator-marker-size);height:var(--switch--indicator-marker-size);background-color:var(--switch--indicator-marker-color);border-radius:var(--corner-radius--round);transition-property:transform;transition-duration:var(--transition--duration--default);transform:translate(0);position:absolute;top:var(--switch--indicator-to-marker-spacing);left:var(--switch--indicator-to-marker-spacing)}.flow--switch--success[data-selected] .flow--switch--indicator,[data-selected].flow--switch .flow--switch--indicator{background-color:var(--switch--success-indicator-color--selected)}.flow--switch--success[data-selected][data-pressed] .flow--switch--indicator,[data-selected][data-pressed].flow--switch .flow--switch--indicator{background-color:var(--switch--success-indicator-color--selected-pressed)}.flow--switch--success[data-selected][data-disabled] .flow--switch--indicator,[data-selected][data-disabled].flow--switch .flow--switch--indicator{background-color:var(--switch--success-indicator-color--selected-disabled)}.flow--switch--danger[data-selected] .flow--switch--indicator{background-color:var(--switch--danger-indicator-color--selected)}.flow--switch--danger[data-selected][data-pressed] .flow--switch--indicator{background-color:var(--switch--danger-indicator-color--selected-pressed)}.flow--switch--danger[data-selected][data-disabled] .flow--switch--indicator{background-color:var(--switch--danger-indicator-color--selected-disabled)}.flow--text-area{order:2;color:var(--form-field-control--color);border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--border-radius);border-color:var(--form-field-control--border-color);padding-block:var(--form-control--padding-y);padding-inline:var(--form-control--padding-x);background-color:var(--form-field-control--background-color)}.flow--text-area:focus-visible,.flow--text-area:focus{outline:none}.flow--text-field{order:2;color:var(--form-field-control--color);border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--border-radius);border-color:var(--form-field-control--border-color);padding-block:var(--form-control--padding-y);padding-inline:var(--form-control--padding-x);background-color:var(--form-field-control--background-color)}.flow--text-field:focus-visible,.flow--text-field:focus{outline:none}.flow--tooltip{border-radius:var(--corner-radius--default);background-color:var(--tooltip--background-color);color:var(--tooltip--color);font-size:var(--tooltip--font-size);padding-block:var(--tooltip--padding-y);padding-inline:var(--tooltip--padding-x);max-width:var(--tooltip--max-width);transform:translateZ(0);--translate-origin-length: var(--tooltip--tooltip-to-content-spacing) / 2}.flow--tooltip[data-placement=top]{margin-bottom:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateY(var(--translate-origin-length))}.flow--tooltip[data-placement=bottom]{margin-top:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateY(var(--translate-origin-length) * -1)}.flow--tooltip[data-placement=bottom] .flow--tooltip--arrow svg{transform:rotate(180deg)}.flow--tooltip[data-placement=right]{margin-left:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateX(var(--translate-origin-length) * -1)}.flow--tooltip[data-placement=right] .flow--tooltip--arrow svg{transform:rotate(90deg)}.flow--tooltip[data-placement=left]{margin-right:var(--tooltip--tooltip-to-content-spacing);--translate-origin: translateX(var(--translate-origin-length))}.flow--tooltip[data-placement=left] .flow--tooltip--arrow svg{transform:rotate(-90deg)}.flow--tooltip[data-entering]{animation:flow--tooltip--slide .2s}.flow--tooltip[data-exiting]{animation:flow--tooltip--slide .2s reverse ease-in}.flow--tooltip--arrow{width:var(--tooltip--arrow-size);height:var(--tooltip--arrow-size)}.flow--tooltip--arrow svg{display:block;fill:var(--tooltip--background-color)}@keyframes flow--tooltip--slide{0%{transform:var(--translate-origin);opacity:0}to{transform:translateY(0);opacity:1}}:root{--transition--duration--default: .2s;--size--none: 0rem;--size-px--xxl: 64px;--size-px--xl: 32px;--size-px--l: 24px;--size-px--m: 16px;--size-px--s: 8px;--size-px--xs: 4px;--size-px--xxs: 2px;--size-px--xxxs: 1px;--size-rem--xxl: 4rem;--size-rem--xl: 2rem;--size-rem--l: 1.5rem;--size-rem--m: 1rem;--size-rem--s: .5rem;--size-rem--xs: .25rem;--size-rem--xxs: .125rem;--size-rem--xxxs: .0625rem;--font-size--xxl: 2rem;--font-size--xl: 1.5rem;--font-size--l: 1.125rem;--font-size--m: 1rem;--font-size--s: .875rem;--font-size--xs: .75rem;--font-size--xxs: .625rem;--line-height--default: 1.5;--font-weight--bold: 600;--font-weight--normal: 300;--color--transparent: rgba(0, 0, 0, 0);--color--soft-contrast-violet--1100: #4743a5;--color--soft-contrast-violet--1000: #534fb8;--color--soft-contrast-violet--900: #5c50ca;--color--soft-contrast-violet--800: #715dee;--color--soft-contrast-violet--700: #8574f0;--color--soft-contrast-violet--600: #998bf3;--color--soft-contrast-violet--500: #aea2f5;--color--soft-contrast-violet--400: #c2b9f8;--color--soft-contrast-violet--300: #d6d0fa;--color--soft-contrast-violet--200: #eae7fd;--color--soft-contrast-violet--100: #f4f3fe;--color--royal-orange--1100: #763200;--color--royal-orange--1000: #8f3d00;--color--royal-orange--900: #c25200;--color--royal-orange--800: #f56800;--color--royal-orange--700: #ff8225;--color--royal-orange--600: #ff9343;--color--royal-orange--500: #ffa562;--color--royal-orange--400: #ffc89f;--color--royal-orange--300: #ffd9bd;--color--royal-orange--200: #ffebdc;--color--royal-orange--100: #fff4eb;--color--amaranth-red--1100: #6a0f22;--color--amaranth-red--1000: #83122a;--color--amaranth-red--900: #b4193a;--color--amaranth-red--800: #e1244c;--color--amaranth-red--700: #e54366;--color--amaranth-red--600: #ea637f;--color--amaranth-red--500: #ee8299;--color--amaranth-red--400: #f2a2b3;--color--amaranth-red--300: #f7c1cc;--color--amaranth-red--200: #fbe0e6;--color--amaranth-red--100: #fdf0f3;--color--espelkamp-green--1100: #00291c;--color--espelkamp-green--1000: #003b29;--color--espelkamp-green--900: #005f42;--color--espelkamp-green--800: #00825b;--color--espelkamp-green--700: #00a673;--color--espelkamp-green--600: #00de9a;--color--espelkamp-green--500: #17ffb8;--color--espelkamp-green--400: #4fffc9;--color--espelkamp-green--300: #87ffda;--color--espelkamp-green--200: #c0ffeb;--color--espelkamp-green--100: #dcfff4;--color--hosting-blue--1100: #00205c;--color--hosting-blue--1000: #002a7b;--color--hosting-blue--900: #003fb8;--color--hosting-blue--800: #0054f5;--color--hosting-blue--700: #1a68ff;--color--hosting-blue--600: #3d80ff;--color--hosting-blue--500: #6197ff;--color--hosting-blue--400: #85afff;--color--hosting-blue--300: #abc6ff;--color--hosting-blue--200: #e0ebff;--color--hosting-blue--100: #f0f5ff;--color--gray--1100: #000000;--color--gray--1000: #222222;--color--gray--900: #464646;--color--gray--800: #6d6d6d;--color--gray--700: #909090;--color--gray--600: #b1b1b1;--color--gray--500: #d5d5d5;--color--gray--400: #e6e6e6;--color--gray--300: #f8f8f8;--color--gray--200: #fdfdfd;--color--gray--100: #ffffff;--border-style--default: solid;--corner-radius--round: 50%;--tooltip--max-width: 300px;--switch--indicator-width: 2.5rem;--navigation-item--icon-to-text-spacing: .5em;--icon--size--l: 4rem;--icon--size--m: 1.5rem;--icon--size--s: 1rem;--badge--icon-to-text-spacing: .5em;--avatar--size--m: 2.5rem;--form-control--border-style: var(--border-style--default);--form-control--padding-y: var(--size-px--s);--form-control--padding-x: var(--size-px--m);--form-control--control-to-info-spacing: var(--size-rem--xs);--form-control--label-to-control-spacing: var(--size-rem--xs);--font-size--default: var(--font-size--m);--disabled-plain-background-color: var(--color--transparent);--neutral-plain-background-color--default: var(--color--transparent);--success-plain-background-color--default: var(--color--transparent);--danger-plain-background-color--default: var(--color--transparent);--primary-plain-background-color--default: var(--color--transparent);--warning--color--1100: var(--color--royal-orange--1100);--warning--color--1000: var(--color--royal-orange--1000);--warning--color--900: var(--color--royal-orange--900);--warning--color--800: var(--color--royal-orange--800);--warning--color--700: var(--color--royal-orange--700);--warning--color--600: var(--color--royal-orange--600);--warning--color--500: var(--color--royal-orange--500);--warning--color--400: var(--color--royal-orange--400);--warning--color--300: var(--color--royal-orange--300);--warning--color--200: var(--color--royal-orange--200);--warning--color--100: var(--color--royal-orange--100);--danger--color--1100: var(--color--amaranth-red--1100);--danger--color--1000: var(--color--amaranth-red--1000);--danger--color--900: var(--color--amaranth-red--900);--danger--color--800: var(--color--amaranth-red--800);--danger--color--700: var(--color--amaranth-red--700);--danger--color--600: var(--color--amaranth-red--600);--danger--color--500: var(--color--amaranth-red--500);--danger--color--400: var(--color--amaranth-red--400);--danger--color--300: var(--color--amaranth-red--300);--danger--color--200: var(--color--amaranth-red--200);--danger--color--100: var(--color--amaranth-red--100);--neutral--color--1100: var(--color--gray--1100);--neutral--color--1000: var(--color--gray--1000);--neutral--color--900: var(--color--gray--900);--neutral--color--800: var(--color--gray--800);--neutral--color--700: var(--color--gray--700);--neutral--color--600: var(--color--gray--600);--neutral--color--500: var(--color--gray--500);--neutral--color--400: var(--color--gray--400);--neutral--color--300: var(--color--gray--300);--neutral--color--200: var(--color--gray--200);--neutral--color--100: var(--color--gray--100);--success--color--1100: var(--color--espelkamp-green--1100);--success--color--1000: var(--color--espelkamp-green--1000);--success--color--900: var(--color--espelkamp-green--900);--success--color--800: var(--color--espelkamp-green--800);--success--color--700: var(--color--espelkamp-green--700);--success--color--600: var(--color--espelkamp-green--600);--success--color--500: var(--color--espelkamp-green--500);--success--color--400: var(--color--espelkamp-green--400);--success--color--300: var(--color--espelkamp-green--300);--success--color--200: var(--color--espelkamp-green--200);--success--color--100: var(--color--espelkamp-green--100);--info--color--1100: var(--color--hosting-blue--1100);--info--color--1000: var(--color--hosting-blue--1000);--info--color--900: var(--color--hosting-blue--900);--info--color--800: var(--color--hosting-blue--800);--info--color--700: var(--color--hosting-blue--700);--info--color--600: var(--color--hosting-blue--600);--info--color--500: var(--color--hosting-blue--500);--info--color--400: var(--color--hosting-blue--400);--info--color--300: var(--color--hosting-blue--300);--info--color--200: var(--color--hosting-blue--200);--info--color--100: var(--color--hosting-blue--100);--primary--color--1100: var(--color--hosting-blue--1100);--primary--color--1000: var(--color--hosting-blue--1000);--primary--color--900: var(--color--hosting-blue--900);--primary--color--800: var(--color--hosting-blue--800);--primary--color--700: var(--color--hosting-blue--700);--primary--color--600: var(--color--hosting-blue--600);--primary--color--500: var(--color--hosting-blue--500);--primary--color--400: var(--color--hosting-blue--400);--primary--color--300: var(--color--hosting-blue--300);--primary--color--200: var(--color--hosting-blue--200);--primary--color--100: var(--color--hosting-blue--100);--border-width--400: var(--size-px--s);--border-width--300: var(--size-px--xs);--border-width--200: var(--size-px--xxs);--border-width--100: var(--size-px--xxxs);--corner-radius--default: var(--size-px--xs);--tooltip--arrow-size: var(--size-px--s);--tooltip--tooltip-to-content-spacing: var(--size-px--s);--tooltip--font-size: var(--font-size--s);--tooltip--padding-y: var(--size-px--xs);--tooltip--padding-x: var(--size-px--s);--switch--indicator-marker-size: var(--size-rem--m);--switch--indicator-to-marker-spacing: var(--size-rem--xs);--switch--indicator-corner-radius: var(--size-rem--m);--switch--indicator-height: var(--size-rem--l);--switch--label-to-indicator-spacing: var(--size-rem--s);--switch--font-weight: var(--font-weight--bold);--switch--font-size: var(--font-size--s);--section--content-to-content-spacing: var(--size-rem--m);--section--section-to-section-spacing: var(--size-rem--xl);--section--border-style: var(--border-style--default);--radio-group--icon-size-without-content: var(--icon--size--l);--radio-group--label-font-weight-with-content-or-icon: var(--font-weight--bold);--radio-group--border-style: var(--border-style--default);--radio-group--padding-y: var(--size-px--s);--radio-group--padding-x: var(--size-px--m);--radio-group--icon-to-text-spacing: var(--size-rem--m);--radio-group--text-to-text-spacing: var(--size-rem--xs);--radio-group--radio-to-radio-spacing: var(--size-px--m);--navigation-item--background-color--default: var(--color--transparent);--navigation-item--padding-y: var(--size-px--s);--navigation-item--padding-x: var(--size-px--s);--navigation-item--font-weight--current: var(--font-weight--bold);--navigation--item-to-item-spacing: var(--size-px--xs);--link--font-weight: var(--font-weight--bold);--link--font-size: var(--font-size--s);--labeled-value--value-to-button-spacing: var(--size-rem--xs);--labeled-value--label-to-value-spacing: var(--size-rem--xs);--label--font-weight: var(--font-weight--bold);--label--font-size: var(--font-size--s);--inline-alert--heading-font-size: var(--font-size--m);--inline-alert--icon-to-text-spacing: var(--size-rem--s);--inline-alert--text-to-text-spacing: var(--size-rem--xs);--inline-alert--border-style: var(--border-style--default);--inline-alert--padding: var(--size-px--m);--initials--variant-4-second-initial-color: var(--color--hosting-blue--1000);--initials--variant-4-first-initial-color: var(--color--hosting-blue--800);--initials--variant-4-background-color: var(--color--hosting-blue--200);--initials--variant-3-second-initial-color: var(--color--espelkamp-green--1000);--initials--variant-3-first-initial-color: var(--color--espelkamp-green--800);--initials--variant-3-background-color: var(--color--espelkamp-green--200);--initials--variant-2-second-initial-color: var(--color--royal-orange--1000);--initials--variant-2-first-initial-color: var(--color--royal-orange--800);--initials--variant-2-background-color: var(--color--royal-orange--200);--initials--variant-1-second-initial-color: var(--color--soft-contrast-violet--1000);--initials--variant-1-first-initial-color: var(--color--soft-contrast-violet--800);--initials--variant-1-background-color: var(--color--soft-contrast-violet--200);--initials--font-weight: var(--font-weight--bold);--heading--h6-font-size: var(--font-size--m);--heading--h5-font-size: var(--font-size--m);--heading--h4-font-size: var(--font-size--m);--heading--h3-font-size: var(--font-size--l);--heading--h2-font-size: var(--font-size--xl);--heading--h1-font-size: var(--font-size--xxl);--heading--font-weight: var(--font-weight--bold);--field-error--font-size: var(--font-size--s);--field-description--font-size: var(--font-size--s);--content-box--box-shadow: rgba(0, 0, 0, .1) 0px var(--size-px--xs) var(--size-px--s);--content-box--padding: var(--size-px--l);--checkbox--border-style: var(--border-style--default);--checkbox--padding-y: var(--size-px--s);--checkbox--padding-x: var(--size-px--m);--checkbox--checkmark-to-text-spacing: var(--size-rem--m);--button--font-size-small: var(--font-size--s);--button--padding-small-squished-y: var(--size-px--xs);--button--padding-small-squished-x: var(--size-px--s);--button--padding-small: var(--size-px--xs);--button--focus-outline-offset: var(--size-px--xxs);--button--padding: var(--size-px--s);--button--padding-squished-y: var(--size-px--s);--button--padding-squished-x: var(--size-px--m);--badge--padding-x-icon-only: var(--size-rem--xs);--badge--padding-x: var(--size-rem--s);--badge--padding-y: var(--size-rem--xs);--badge--corner-radius: var(--size-rem--m);--badge--height: var(--size-rem--l);--badge--font-size: var(--font-size--s);--avatar--size--l: var(--size-rem--xxl);--avatar--size--s: var(--size-rem--xl);--avatar--size--xs: var(--size-rem--l);--form-control--color--disabled: var(--neutral--color--800);--form-control--background-color--invalid: var(--danger--color--100);--form-control--background-color--focused: var(--neutral--color--100);--form-control--background-color--hover: var(--neutral--color--500);--form-control--background-color--disabled: var(--neutral--color--500);--form-control--background-color--default: var(--neutral--color--400);--form-control--border-color--focused: var(--info--color--700);--form-control--border-color--invalid: var(--danger--color--700);--form-control--border-color--hover: var(--neutral--color--600);--form-control--border-color--disabled: var(--neutral--color--500);--form-control--border-color--default: var(--neutral--color--400);--form-control--border-width: var(--border-width--100);--form-control--corner-radius: var(--corner-radius--default);--color--default: var(--neutral--color--1000);--focus-outline-color: var(--primary--color--800);--disabled-plain-content-color: var(--neutral--color--400);--disabled-solid-content-color: var(--neutral--color--600);--disabled-solid-background-color: var(--neutral--color--400);--neutral-plain-content-color: var(--neutral--color--1000);--neutral-plain-background-color--pressed: var(--neutral--color--500);--neutral-plain-background-color--hover: var(--neutral--color--400);--neutral-solid-content-color: var(--neutral--color--1000);--neutral-solid-background-color--pressed: var(--neutral--color--600);--neutral-solid-background-color--hover: var(--neutral--color--500);--neutral-solid-background-color--default: var(--neutral--color--400);--warning-outline-border-color: var(--warning--color--800);--warning-outline-content-color: var(--warning--color--900);--warning-outline-background-color: var(--neutral--color--100);--warning-solid-content-color: var(--neutral--color--100);--warning-solid-background-color--pressed: var(--warning--color--1000);--warning-solid-background-color--hover: var(--warning--color--900);--warning-solid-background-color--default: var(--warning--color--800);--success-outline-border-color: var(--success--color--800);--success-outline-content-color: var(--success--color--900);--success-outline-background-color: var(--neutral--color--100);--success-plain-content-color--pressed: var(--success--color--1000);--success-plain-content-color--hover: var(--success--color--900);--success-plain-content-color--default: var(--success--color--800);--success-plain-background-color--pressed: var(--success--color--200);--success-plain-background-color--hover: var(--success--color--100);--success-solid-content-color: var(--neutral--color--100);--success-solid-background-color--pressed: var(--success--color--1000);--success-solid-background-color--hover: var(--success--color--900);--success-solid-background-color--default: var(--success--color--800);--info-outline-border-color: var(--info--color--800);--info-outline-content-color: var(--info--color--900);--info-outline-background-color: var(--neutral--color--100);--info-solid-content-color: var(--neutral--color--100);--info-solid-background-color--pressed: var(--info--color--1000);--info-solid-background-color--hover: var(--info--color--900);--info-solid-background-color--default: var(--info--color--800);--danger-outline-border-color: var(--danger--color--800);--danger-outline-content-color: var(--danger--color--900);--danger-outline-background-color: var(--neutral--color--100);--danger-plain-content-color--pressed: var(--danger--color--1000);--danger-plain-content-color--hover: var(--danger--color--900);--danger-plain-content-color--default: var(--danger--color--800);--danger-plain-background-color--pressed: var(--danger--color--200);--danger-plain-background-color--hover: var(--danger--color--100);--danger-solid-content-color: var(--neutral--color--100);--danger-solid-background-color--pressed: var(--danger--color--1000);--danger-solid-background-color--hover: var(--danger--color--900);--danger-solid-background-color--default: var(--danger--color--800);--primary-plain-content-color--pressed: var(--primary--color--1000);--primary-plain-content-color--hover: var(--primary--color--900);--primary-plain-content-color--default: var(--primary--color--800);--primary-plain-background-color--pressed: var(--primary--color--200);--primary-plain-background-color--hover: var(--primary--color--100);--primary-solid-content-color: var(--neutral--color--100);--primary-solid-background-color--pressed: var(--primary--color--1000);--primary-solid-background-color--hover: var(--primary--color--900);--primary-solid-background-color--default: var(--primary--color--800);--tooltip--color: var(--neutral--color--100);--tooltip--background-color: var(--neutral--color--900);--switch--danger-indicator-color--selected-disabled: var(--danger--color--300);--switch--danger-indicator-color--selected-pressed: var(--danger--color--900);--switch--danger-indicator-color--selected: var(--danger--color--800);--switch--success-indicator-color--selected-disabled: var(--success--color--200);--switch--success-indicator-color--selected-pressed: var(--success--color--900);--switch--success-indicator-color--selected: var(--success--color--800);--switch--indicator-color--disabled: var(--neutral--color--400);--switch--indicator-color--pressed: var(--neutral--color--600);--switch--indicator-color--default: var(--neutral--color--500);--switch--indicator-marker-color: var(--neutral--color--100);--switch--color--disabled: var(--neutral--color--600);--section--border-color: var(--neutral--color--500);--section--border-width: var(--border-width--100);--radio-group--icon-color--default: var(--neutral--color--800);--radio-group--color--selected-disabled: var(--neutral--color--600);--radio-group--color--disabled: var(--neutral--color--500);--radio-group--color--selected: var(--info--color--900);--radio-group--color--default: var(--neutral--color--1000);--radio-group--background-color--hover: var(--info--color--100);--radio-group--background-color--selected-disabled: var(--neutral--color--400);--radio-group--background-color--disabled: var(--neutral--color--300);--radio-group--background-color--selected: var(--info--color--200);--radio-group--background-color--default: var(--neutral--color--100);--radio-group--border-color--selected-disabled: var(--neutral--color--600);--radio-group--border-color--disabled: var(--neutral--color--500);--radio-group--border-color--selected: var(--info--color--900);--radio-group--border-color--default: var(--neutral--color--500);--radio-group--border-width: var(--border-width--100);--radio-group--corner-radius: var(--corner-radius--default);--navigation-item--disabled-color: var(--neutral--color--100);--navigation-item--disabled-background-color: var(--neutral--color--400);--navigation-item--background-color--current: var(--info--color--100);--navigation-item--background-color--hover: var(--info--color--100);--navigation-item--icon-color--current: var(--info--color--800);--navigation-item--icon-color--default: var(--neutral--color--800);--navigation-item--color--current: var(--info--color--800);--navigation-item--corner-radius: var(--corner-radius--default);--label--color: var(--neutral--color--800);--inline-alert--border-x-start-width: var(--border-width--400);--inline-alert--border-width: var(--border-width--100);--inline-alert--corner-radius: var(--corner-radius--default);--heading--color: var(--info--color--1000);--field-error--color: var(--danger--color--700);--field-description--color: var(--neutral--color--800);--content-box--corner-radius: var(--corner-radius--default);--content-box--background-color: var(--neutral--color--100);--checkbox--checkmark-color--selected-disabled: var(--neutral--color--600);--checkbox--checkmark-color--disabled: var(--neutral--color--500);--checkbox--checkmark-color--selected: var(--info--color--900);--checkbox--checkmark-color--default: var(--neutral--color--800);--checkbox--color--selected-disabled: var(--neutral--color--600);--checkbox--color--disabled: var(--neutral--color--500);--checkbox--color--selected: var(--info--color--900);--checkbox--color--default: var(--neutral--color--1000);--checkbox--background-color--hover: var(--info--color--100);--checkbox--background-color--selected-disabled: var(--neutral--color--400);--checkbox--background-color--disabled: var(--neutral--color--300);--checkbox--background-color--selected: var(--info--color--200);--checkbox--background-color--default: var(--neutral--color--100);--checkbox--border-color--selected-disabled: var(--neutral--color--600);--checkbox--border-color--disabled: var(--neutral--color--500);--checkbox--border-color--selected: var(--info--color--900);--checkbox--border-color--default: var(--neutral--color--700);--checkbox--border-width: var(--border-width--100);--checkbox--corner-radius: var(--corner-radius--default);--button--disabled-plain-background-color: var(--disabled-plain-background-color);--button--danger-plain-background-color--default: var(--danger-plain-background-color--default);--button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);--button--primary-plain-background-color--default: var(--primary-plain-background-color--default);--button--accent-plain-background-color--default: var(--success-plain-background-color--default);--button--failed-icon-color: var(--danger--color--700);--button--succeeded-icon-color: var(--success--color--700);--button--pending-icon-color: var(--neutral--color--600);--button--focus-outline-width: var(--border-width--200);--button--corner-radius: var(--corner-radius--default);--link--danger-color--pressed: var(--danger-plain-content-color--pressed);--link--danger-color--hover: var(--danger-plain-content-color--hover);--link--danger-color--default: var(--danger-plain-content-color--default);--link--primary-color--pressed: var(--primary-plain-content-color--pressed);--link--primary-color--hover: var(--primary-plain-content-color--hover);--link--primary-color--default: var(--primary-plain-content-color--default);--link--disabled-color: var(--disabled-plain-content-color);--inline-alert--success-heading-color: var(--success-outline-content-color);--inline-alert--success-border-color: var(--success-outline-border-color);--inline-alert--danger-heading-color: var(--danger-outline-content-color);--inline-alert--danger-border-color: var(--danger-outline-border-color);--inline-alert--warning-heading-color: var(--warning-outline-content-color);--inline-alert--warning-border-color: var(--warning-outline-border-color);--inline-alert--info-heading-color: var(--info-outline-content-color);--inline-alert--info-border-color: var(--info-outline-border-color);--inline-alert--background-color: var(--info-outline-background-color);--button--disabled-plain-content-color: var(--disabled-plain-content-color);--button--disabled-solid-content-color: var(--disabled-solid-content-color);--button--disabled-solid-background-color: var(--disabled-solid-background-color);--button--danger-plain-content-color--pressed: var(--danger-plain-content-color--pressed);--button--danger-plain-content-color--hover: var(--danger-plain-content-color--hover);--button--danger-plain-content-color--default: var(--danger-plain-content-color--default);--button--danger-plain-background-color--pressed: var(--danger-plain-background-color--pressed);--button--danger-plain-background-color--hover: var(--danger-plain-background-color--hover);--button--danger-solid-content-color--pressed: var(--danger-solid-content-color);--button--danger-solid-content-color--hover: var(--danger-solid-content-color);--button--danger-solid-content-color--default: var(--danger-solid-content-color);--button--danger-solid-background-color--pressed: var(--danger-solid-background-color--pressed);--button--danger-solid-background-color--hover: var(--danger-solid-background-color--hover);--button--danger-solid-background-color--default: var(--danger-solid-background-color--default);--button--secondary-plain-content-color--pressed: var(--neutral-plain-content-color);--button--secondary-plain-content-color--hover: var(--neutral-plain-content-color);--button--secondary-plain-content-color--default: var(--neutral-plain-content-color);--button--secondary-plain-background-color--pressed: var(--neutral-plain-background-color--pressed);--button--secondary-plain-background-color--hover: var(--neutral-plain-background-color--hover);--button--secondary-solid-content-color--pressed: var(--neutral-solid-content-color);--button--secondary-solid-content-color--hover: var(--neutral-solid-content-color);--button--secondary-solid-content-color--default: var(--neutral-solid-content-color);--button--secondary-solid-background-color--pressed: var(--neutral-solid-background-color--pressed);--button--secondary-solid-background-color--hover: var(--neutral-solid-background-color--hover);--button--secondary-solid-background-color--default: var(--neutral-solid-background-color--default);--button--primary-plain-content-color--pressed: var(--primary-plain-content-color--pressed);--button--primary-plain-content-color--hover: var(--primary-plain-content-color--hover);--button--primary-plain-content-color--default: var(--primary-plain-content-color--default);--button--primary-plain-background-color--pressed: var(--primary-plain-background-color--pressed);--button--primary-plain-background-color--hover: var(--primary-plain-background-color--hover);--button--primary-solid-content-color--pressed: var(--primary-solid-content-color);--button--primary-solid-content-color--hover: var(--primary-solid-content-color);--button--primary-solid-content-color--default: var(--primary-solid-content-color);--button--primary-solid-background-color--pressed: var(--primary-solid-background-color--pressed);--button--primary-solid-background-color--hover: var(--primary-solid-background-color--hover);--button--primary-solid-background-color--default: var(--primary-solid-background-color--default);--button--accent-plain-content-color--pressed: var(--success-plain-content-color--pressed);--button--accent-plain-content-color--hover: var(--success-plain-content-color--hover);--button--accent-plain-content-color--default: var(--success-plain-content-color--default);--button--accent-plain-background-color--pressed: var(--success-plain-background-color--pressed);--button--accent-plain-background-color--hover: var(--success-plain-background-color--hover);--button--accent-solid-content-color--pressed: var(--success-solid-content-color);--button--accent-solid-content-color--hover: var(--success-solid-content-color);--button--accent-solid-content-color--default: var(--success-solid-content-color);--button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);--button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);--button--accent-solid-background-color--default: var(--success-solid-background-color--default);--button--focus-outline-color: var(--focus-outline-color);--badge--danger-background-color: var(--danger-solid-background-color--default);--badge--warning-background-color: var(--warning-solid-background-color--default);--badge--success-background-color: var(--success-solid-background-color--default);--badge--info-background-color: var(--info-solid-background-color--default);--badge--color: var(--info-solid-content-color)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,svg,canvas{display:block;max-width:100%}input,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul{padding:0;list-style-type:none}a{text-decoration:none;color:inherit}.flow{font-family:sans-serif;line-height:var(--line-height--default);font-size:var(--size-rem--m);font-weight:var(--font-weight--normal);color:var(--color--default)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"react": "18.2.0",
|
|
126
126
|
"react-dom": "18.2.0"
|
|
127
127
|
},
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "3ad433bfd72366bc7a439336f181793259b134f7"
|
|
129
129
|
}
|