.button{--border-radius:var(--sds-size-radius-200);align-items:center;box-shadow:inset 0 0 0 var(--sds-size-stroke-border) var(--button-border-color);border-radius:var(--border-radius);background:var(--button-background-color);color:var(--button-color);cursor:pointer;display:inline-flex;font:var(--button-font);gap:var(--sds-size-space-200);justify-content:center;line-height:1;padding:var(--button-padding-y) var(--button-padding-x);position:relative;white-space:nowrap;>.icon{--icon-color:var(--button-color)}}.button-size-small{--button-font:var(--sds-font-body-small);--button-padding-x:var(--sds-size-space-200);--button-padding-y:var(--sds-size-space-200);>.icon{--icon-diameter:var(--sds-typography-scale-02)}}.button-size-medium{--button-font:var(--sds-font-body-base);--button-padding-x:var(--sds-size-space-300);--button-padding-y:var(--sds-size-space-300);>.icon{--icon-diameter:var(--sds-typography-scale-03)}}.button[data-focus-visible]{outline:none;--offset:calc(var(--sds-size-stroke-border) * 2);&:before{content:"";border-radius:calc(var(--border-radius) + var(--offset));bottom:calc(-1 * var(--offset));box-shadow:0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);left:calc(-1 * var(--offset));position:absolute;right:calc(-1 * var(--offset));top:calc(-1 * var(--offset))}}.button-variant-primary{--button-background-color:var(--sds-color-background-brand-default);--button-border-color:var(--sds-color-border-brand-default);--button-color:var(--sds-color-text-brand-on-brand);&[data-hovered]:not([data-disabled]){--button-background-color:var(--sds-color-background-brand-hover);--button-border-color:var(--sds-color-border-brand-default)}}.button-variant-neutral{--button-background-color:var(--sds-color-background-default-secondary);--button-border-color:var(--sds-color-border-default-default);--button-color:var(--sds-color-text-default-default);&[data-hovered]:not([data-disabled]){--button-background-color:var(
      --sds-color-background-default-secondary-hover
    )}}.button-variant-subtle{--button-background-color:transparent;--button-border-color:transparent;--button-color:var(--sds-color-text-brand-default);&[data-hovered]:not([data-disabled]){--button-background-color:var(
      --sds-color-background-default-default-hover
    )}}.button-variant-danger-primary{--button-background-color:var(--sds-color-background-danger-default);--button-border-color:var(--sds-color-border-danger-secondary);--button-color:var(--sds-color-text-danger-on-danger);&[data-hovered]:not([data-disabled]){--button-background-color:var(--sds-color-background-danger-hover);--button-border-color:var(--sds-color-border-danger-default)}}.button-variant-danger-subtle{--button-background-color:transparent;--button-border-color:transparent;--button-color:var(--sds-color-text-danger-default);&[data-hovered]:not([data-disabled]){--button-background-color:var(
      --sds-color-background-danger-tertiary-hover
    )}}.button[data-disabled]{cursor:default;pointer-events:none;--button-background-color:var(--sds-color-background-disabled-default);--button-border-color:var(--sds-color-border-disabled-default);--button-color:var(--sds-color-text-disabled-default)}.button-group{align-items:center;display:flex;gap:var(--sds-size-space-300);&.button-group-align-start{justify-content:flex-start}&.button-group-align-center{justify-content:center}&.button-group-align-end{justify-content:flex-end}&.button-group-align-justify{>.button{flex:1}}&.button-group-align-stack{flex-direction:column;>.button{width:100%}}}.input{--input-text-color:#ffffff;--input-border-color:rgba(255,255,255,0.12);--input-placeholder-color:rgba(255,255,255,0.5);align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.06));backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--input-border-color);border-radius:12px;color:var(--input-text-color);display:flex;line-height:1;padding:12px 16px;position:relative;width:100%;transition:all .2s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.08);&::placeholder{color:var(--input-placeholder-color)}&[data-disabled]{background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.06);cursor:not-allowed}&[data-invalid]:not([data-disabled]){border:1px solid rgba(239,68,68,.5);background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.04))}&[data-focus-visible]{border:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.08));box-shadow:0 0 0 3px rgba(59,130,246,.1),0 4px 8px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-.5px)}}