:root {
    --input-default-height: 40px;
    --input-large-height: 48px;
}

.textbox {
    align-items: center;
    background-color: var(
        --textbox-background-color,
        var(--color-background-secondary)
    );
    border-color: var(--textbox-border-color, var(--color-border-medium));
    border-radius: var(--textbox-border-radius, var(--border-radius-50));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var(--textbox-foreground-color, var(--color-foreground-primary));
    display: inline-flex;
    font-size: var(--font-size-body);
    gap: var(--spacing-100);
    overflow: hidden;
    position: relative;
    width: fit-content;
}

.textbox button.icon-btn {
    background-color: initial;
    padding: 0;
}

.textbox--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%;
}