-focus, .textbox:has(> .textbox__control:focus):not(.textbox--readonly):not( :has(> .textbox__control[readonly])) { background-color: var(--textbox-focus-background-color, var(--color-background-primary)); border-color: var(--textbox-focus-border-color, var(--color-border-strong)); box-shadow: 0 0 0 1px var(--color-border-strong); } .textbox--readonly, .textbox:has(> .textbox__control[readonly]) { background-color: initial; border: none; } .textbox--disabled, .textbox:has(> .textbox__control[disabled]) { border-color: var(--textbox-disabled-border-color, var(--color-background-disabled)); color: var(--textbox-disabled-foreground-color, var(--color-foreground-disabled)); } .textbox--invalid, .textbox:has(> .textbox__control[aria-invalid="true"]) { border-color: var(--textbox-invalid-border-color, var(--color-border-attention)); } .textbox__control { background-color: initial; border: none; box-sizing: border-box; color: inherit; } textarea.textbox__control { font-family: inherit; min-height: 200px; overflow: auto; padding: var(--spacing-200); resize: vertical; vertical-align: middle; } input.textbox__control { font-family: inherit; padding: 0; vertical-align: middle; } input.textbox__control:first-child:not([readonly]) { padding-inline-start: var(--spacing-200); } input.textbox__control:last-child:not([readonly]) { padding-inline-end: var(--spacing-200); } input.textbox__control, textarea.textbox__control { appearance: none; flex-grow: 1; font-size: 1em; height: 40px; margin: 0; outline: none; } input.textbox__control[disabled], textarea.textbox__control[disabled] { border-color: var(--textbox-disabled-border-color, var(--color-background-disabled)); color: var(--textbox-disabled-foreground-color, var(--color-foreground-disabled)); } input.textbox__control[disabled]::-webkit-input-placeholder, textarea.textbox__control[disabled]::-webkit-input-placeholder { color: var(--textbox-disabled-placeholder-color, var(--color-foreground-ghost)); } input.textbox__control[disabled]::-moz-placeholder, textarea.textbox__control[disabled]::-moz-placeholder { color: var(--textbox-disabled-placeholder-color, var(--color-foreground-ghost)); } input.textbox__control[disabled]:-ms-input-placeholder, textarea.textbox__control[disabled]:-ms-input-placeholder { color: var(--textbox-disabled-placeholder-color, var(--color-foreground-ghost)); } input.textbox__control[aria-invalid="true"], textarea.textbox__control[aria-invalid="true"] { border-color: var(--textbox-invalid-foreground-color, var(--color-border-attention)); } input.textbox__control::placeholder, textarea.textbox__control::placeholder { color: var(--textbox-placeholder-color, var(--color-foreground-secondary)); font-weight: 200; opacity: 1; } input.textbox__control { height: calc(var(--input-default-height) - 2px); } .textbox--large input.textbox__control { height: calc(var(--input-large-height) - 2px); } .textbox .icon-btn > svg, .textbox > svg { color: var(--textbox-icon-color, var(--color-foreground-secondary)); display: inline-flex; fill: var(--textbox-icon-color, var(--color-foreground-secondary)); height: 1lh; pointer-events: none; } .textbox > span:first-child, .textbox > svg:first-child { flex-shrink: 0; margin-inline-start: var(--spacing-200); } .textbox > span:last-child, .textbox > svg:last-child { margin-inline-end: var(--spacing-200); } .textbox .icon-btn:last-child { margin-inline-start: calc(var(--spacing-100) * -1); } .textbox .icon-btn:first-child { margin-inline-end: calc(var(--spacing-100) * -1); } input.textbox__control[readonly]:focus, textarea.textbox__control[readonly]:focus { text-decoration: underline; } .textbox--fluid, .textbox--fluid .textbox__control { width: 100%; } Ó