.inputContainer[data-stb-input-atom=current]{--text-color: var(--p-color-text-primary);--background-color: var(--p-color-surface-static);--border-color: var(--p-color-stroke-0);--suffix-color: var(--p-color-text-secondary);--icon-color: var(--p-color-text-primary);--input-max-height: 3rem;--border-normal: var(--p-border-rem-xsmall);--border-fat: .0938rem;--border-thickness: var(--border-normal);align-items:center;align-self:flex-start;background-color:var(--background-color);border:var(--border-thickness) solid var(--border-color);border-radius:var(--p-corner-radius-rem-small);box-sizing:border-box;color:var(--text-color);cursor:text;display:flex;display:inline-flex;max-height:var(--input-max-height);max-width:18rem;min-height:var(--input-max-height);outline:var(--input-outline);outline-offset:var(--p-outline-offset);position:relative;&.textarea{height:auto;max-height:100%}&.inputCompact{--input-max-height: 2.5rem}.inputElement{background-color:var(--background-color);border:none;border-radius:var(--p-corner-radius-rem-small);box-sizing:border-box;color:var(--text-color);height:100%;outline:none;padding:var(--p-spacing-rem-08) var(--p-spacing-rem-12);width:100%;&::placeholder{color:var(--p-color-text-placeholder);font-family:Storebrand Text,sans-serif;font-size:1rem;font-weight:400;line-height:1.375rem;@media (min-width: 600px){font-size:1.125rem;line-height:1.625rem}}&.textarea{height:auto;padding:var(--p-spacing-rem-08);resize:none}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none}&[type=number]{-moz-appearance:textfield}}.inputAdditions{align-items:center;display:flex;gap:1.25rem;padding-right:var(--p-spacing-rem-12);z-index:var(--p-z-index-input)}.iconButton{color:var(--icon-color);display:flex;i{font-size:1.5rem}}.icon{color:var(--icon-color);display:flex;i{font-size:1.5rem}@media (max-width: 600px){padding-right:.125rem}}.inputSuffix{color:var(--suffix-color)}&[data-fluid=true]{max-width:100%;width:100%;>select{width:100%}}@media (hover: hover) and (pointer: fine){&:hover{--border-color: var(--p-color-background-selected-pressed)}}&:active,&:focus-within{--border-color: var(--p-color-stroke-selected);--background-color: var(--p-color-background);--border-thickness: var(--border-fat);outline:none}&:focus-visible{--input-outline: var(--p-outline);--border-color: var(--p-color-stroke-0)}&[data-message-type=success]{--border-color: var(--p-color-stroke-success);--border-thickness: var(--border-fat);--background-color: var(--p-color-surface-success)}&[data-message-type=warning]{--border-color: var(--p-color-stroke-warning);--border-thickness: var(--border-fat);--background-color: var(--p-color-surface-warning)}&[data-message-type=error]{--border-color: var(--p-color-stroke-error);--border-thickness: var(--border-fat);--background-color: var(--p-color-surface-error)}&[data-read-only=true]{--border-color: var(--p-color-stroke-0);--background-color: var(--p-color-background-hover)}&[aria-disabled=true]{--background-color: var(--p-color-surface-static);--border-color: var(--p-color-stroke-disabled);--suffix-color: var(--p-color-text-disabled);--text-color: var(--p-color-text-disabled);--icon-color: var(--p-color-text-disabled);&:active{--border-color: var(--p-color-stroke-disabled)}cursor:default;.inputElement,.inputAdditions .inputSuffix{pointer-events:none}}}.button[data-stb-button=current],.button[data-stb-button-circle=current]{--button-background-color: var(--p-color-button-action-fill);--button-color: var(--p-color-text-on-color);--button-color-active: var(--p-color-text-on-color);--button-border-color: var(--p-color-button-action-fill);--button-outline: none;--button-height: var(--p-spacing-rem-40);--button-font-size: 1rem;--button-line-height: 1.375rem;--button-icon-size: var(--button-line-height);--button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);align-items:center;background-color:var(--button-background-color);border:var(--p-border-rem-xsmall) solid var(--button-border-color);border-radius:var(--p-corner-radius-rem-extreme);box-sizing:border-box;color:var(--button-color);cursor:pointer;display:inline-flex;font-size:var(--button-font-size);height:var(--button-height);justify-content:center;line-height:var(--button-line-height);outline:var(--button-outline);outline-offset:var(--p-outline-offset);padding:var(--button-padding);position:relative;text-decoration:none;transition-duration:var(--p-transition-duration);transition-property:border,background-color,color;.buttonContentContainer{align-items:center;display:flex;gap:var(--p-spacing-rem-04);justify-content:center;white-space:nowrap;.buttonContent{padding:0 var(--p-spacing-rem-04)}}& i{font-size:calc(var(--button-icon-size) - 2px);height:var(--button-icon-size);line-height:var(--button-icon-size);text-align:center;width:var(--button-icon-size)}.buttonSpinner{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}&:focus-visible{--button-outline: var(--p-outline)}&[data-loading=true]{.buttonContentContainer{visibility:hidden}}&[data-size=large]{--button-height: var(--p-spacing-rem-48);@media (min-width: 600px){--button-font-size: 1.125rem;--button-line-height: 1.625rem}}&[data-size=medium]{--button-height: var(--p-spacing-rem-40);--button-font-size: .875rem;--button-line-height: 1.25rem;--button-padding: .625rem var(--p-spacing-rem-16);@media (min-width: 600px){--button-font-size: 1rem;--button-line-height: 1.375rem}}&[data-size=small]{--button-height: var(--p-spacing-rem-32);--button-font-size: .75rem;--button-line-height: 1rem;--button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);@media (min-width: 600px){--button-font-size: .875rem;--button-line-height: 1.125rem}}&[data-variant=primary]{&[disabled]{--button-color: var(--p-color-text-disabled);--button-background-color: var(--p-color-button-disabled);--button-border-color: var(--p-color-button-disabled)}@media (hover: hover) and (pointer: fine){&:hover{--button-background-color: var(--p-color-button-action-fill-hover);--button-border-color: var(--p-color-button-action-fill-hover)}}&:active{--button-background-color: var(--p-color-button-action-fill-active);--button-border-color: var(--p-color-button-action-fill-active)}}&[data-variant=secondary]{--button-color: var(--p-color-text-primary);--button-background-color: transparent;--button-border-color: var(--p-color-stroke-strong);&[disabled]{--button-color: var(--p-color-text-disabled);--button-border-color: var(--p-color-stroke-disabled)}&[data-loading=true]{--button-background-color: transparent}@media (hover: hover) and (pointer: fine){&:hover{--button-background-color: var(--p-color-background-hover);--button-color: var(--p-color-text-primary-hover);--button-border-color: var(--p-color-stroke-strong-hover)}}&:active{--button-background-color: var(--p-color-background-pressed);--button-color: var(--p-color-text-primary-active);--button-border-color: var(--p-color-stroke-strong-pressed)}}&[data-variant=subtle]{--button-color: var(--p-color-text-primary);--button-background-color: transparent;--button-border-color: var(--p-color-stroke-subtle-0);&[disabled]{--button-color: var(--p-color-text-disabled);--button-border-color: var(--p-color-stroke-disabled)}&[data-loading=true]{--button-background-color: transparent}@media (hover: hover) and (pointer: fine){&:hover{--button-background-color: var(--p-color-background-hover);--button-color: var(--p-color-text-primary-hover);--button-border-color: var(--p-color-stroke-strong-hover)}}&:active{--button-background-color: var(--p-color-background-pressed);--button-color: var(--p-color-text-primary-active);--button-border-color: var(--p-color-stroke-strong-pressed)}}&[data-variant=tertiary]{--button-color: var(--p-color-text-interactive);--button-background-color: transparent;--button-border-color: transparent;&[disabled]{--button-color: var(--p-color-text-disabled)}@media (hover: hover) and (pointer: fine){&:hover{--button-background-color: var(--p-color-background-hover);--button-color: var(--p-color-text-interactive-hover)}}&:active{--button-background-color: var(--p-color-background-pressed);--button-color: var(--p-color-text-interactive-active)}&:focus-visible{--button-border-color: transparent}}&[data-variant=brand]{--button-background-color: var(--p-color-button-brand-fill);--button-color: var(--p-color-text-on-color);--button-border-color: var(--p-color-button-brand-fill);@media (hover: hover) and (pointer: fine){&:hover{--button-background-color: var(--p-color-button-brand-fill-hover);--button-border-color: var(--p-color-button-brand-fill-hover)}}&:active{--button-background-color: var(--p-color-button-brand-fill-active);--button-border-color: var(--p-color-button-brand-fill-active)}&[disabled]{--button-color: var(--p-color-text-disabled);--button-background-color: var(--p-color-button-disabled);--button-border-color: var(--p-color-button-disabled)}}&[disabled]{pointer-events:none}}.buttonCircle[data-stb-button-circle=current]{--button-size: var(--button-height);height:var(--button-size);padding:0;width:var(--button-size)}.buttonIcon[data-stb-button-icon=current]{--button-icon-background-color: transparent;--button-icon-color: var(--p-color-icon-primary);--button-icon-outline: none;--button-icon-size: clamp(1.375rem, 3vw, 1.375rem);align-items:center;background-color:var(--button-icon-background-color);border:none;border-radius:.125rem;box-sizing:border-box;color:var(--button-icon-color);cursor:pointer;display:inline-flex;justify-content:center;max-height:var(--button-icon-size);max-width:var(--button-icon-size);min-height:var(--button-icon-size);min-width:var(--button-icon-size);outline:var(--button-icon-outline);outline-offset:var(--p-outline-offset);padding:0;position:relative;text-decoration:none;transition-duration:var(--p-transition-duration);transition-property:border,background-color,color;white-space:nowrap;width:var(--button-icon-size);>i{font-size:var(--button-icon-size);height:var(--button-icon-size);line-height:var(--button-icon-size);width:var(--button-icon-size)}&:focus-visible{--button-icon-outline: var(--p-outline)}@media (hover: hover) and (pointer: fine){&:hover{--button-icon-color: var(--p-color-icon-primary-hover)}}&:active{--button-icon-color: var(--p-color-icon-primary-active)}&[data-size=xlarge]{--button-icon-size: clamp(1.625rem, 3vw, 1.625rem);@media (min-width: 600px){--button-icon-size: clamp(1.75rem, 3vw, 1.75rem)}}&[data-size=large]{--button-icon-size: clamp(1.375rem, 3vw, 1.375rem);@media (min-width: 600px){--button-icon-size: clamp(1.625rem, 3vw, 1.625rem)}}&[data-size=medium]{--button-icon-size: clamp(1.25rem, 3vw, 1.25rem);@media (min-width: 600px){--button-icon-size: clamp(1.375rem, 3vw, 1.375rem)}}&[data-size=small]{--button-icon-size: clamp(1rem, 3vw, 1rem);@media (min-width: 600px){--button-icon-size: clamp(1.125rem, 3vw, 1.125rem)}}&[disabled]{--button-icon-color: var(--p-color-icon-disabled);pointer-events:none}}.spinnerContainer[data-stb-spinner=current]{--spinner-container-size: var(--p-spacing-rem-96);--spinner-radius: 44;--spinner-perimeter: calc(2 * pi * var(--spinner-radius));--spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);--spinner-perimeter-fraction: calc(.001 * var(--spinner-perimeter) * 1px);--spinner-track-color: var(--p-color-static-grey-background);--spinner-ticker-color: var(--p-color-static-red-foreground);--text-color: var(--p-color-text-primary);align-items:center;color:var(--text-color);display:flex;flex-direction:column;gap:var(--p-spacing-08);width:var(--spinner-container-size);& svg{height:100%;width:100%}p{font-size:1rem;white-space:nowrap}&.xxsmall{--spinner-radius: 8;--spinner-container-size: var(--p-spacing-rem-16)}&.xsmall{--spinner-radius: 10;--spinner-container-size: 1.375rem}&.small{--spinner-radius: 11;--spinner-container-size: var(--p-spacing-rem-24)}&.medium{--spinner-radius: 24;--spinner-container-size: var(--p-spacing-rem-48);p{font-size:.875rem}}&.onRed{--spinner-track-color: var(--p-color-static-grey-background);--spinner-ticker-color: var(--p-color-static-grey-foreground);--text-color: var(--p-color-text-primary)}.spinner{animation:loading-indicator-spinner-rotate 5s linear infinite}.spinnerTrack{stroke:var(--spinner-track-color)}.spinnerInMotion{animation:loading-indicator-spinner-spin infinite 6s ease-in-out;stroke:var(--spinner-ticker-color);stroke-dasharray:var(--spinner-perimeter);transform-origin:var(--spinner-radius) var(--spinner-radius) 0}}@keyframes loading-indicator-spinner-spin{0%{stroke-dasharray:var(--spinner-perimeter-full),var(--spinner-perimeter-fraction);transform:rotate(0)}50%{stroke-dasharray:var(--spinner-perimeter-fraction),var(--spinner-perimeter-full);transform:rotate(720deg)}to{stroke-dasharray:var(--spinner-perimeter-full),var(--spinner-perimeter-fraction);transform:rotate(1080deg)}}@keyframes loading-indicator-spinner-rotate{0%{transform:rotate(0)}50%{transform:rotate(720deg)}to{transform:rotate(1080deg)}}.systemIconBase[data-stb-system-icon=current]{flex-shrink:0;font-family:Storebrand Symbols;font-size:1rem;height:1rem;line-height:1rem;width:1rem;&[data-legacy=true]{font-family:System-Icons!important}&:before{content:attr(data-icon-name);white-space:nowrap}@media (min-width: 600px){font-size:1.5rem;height:1.5rem;line-height:1.5rem;width:1.5rem}}.iconBase[data-stb-icon=current]{display:inline-flex;& svg{height:100%;width:100%}& img{height:100%;width:100%}}.illustrationBase[data-stb-illustration=current]{display:inline-flex;&.autoHeight{img{height:auto;width:auto}}& img{max-width:100%;vertical-align:middle}}