.textfield {
    --textfield-placeholder-color: var(--ds-text-subtlest, #6b6e76);

    box-sizing: border-box;
    appearance: none;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 40px;
    padding-block: var(--ds-space-075, 6px);
    padding-inline: var(--ds-space-075, 6px);
    border-width: var(--ds-border-width, 1px);
    border-style: solid;
    border-color: var(--ds-border-input, #8c8f97);
    border-radius: var(--ds-radius-medium, 6px);
    background-color: var(--ds-background-input, #fff);
    font: var(--ds-font-body, normal 400 14px/20px sans-serif);
    text-align: start;
    color: var(--ds-text, #292a2e);
    outline: 0;
    cursor: text;
    transition:
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;

    &::placeholder {
        color: var(--textfield-placeholder-color);
    }

    &:hover {
        background-color: var(--ds-background-input-hovered, #f8f8f8);
    }

    &:active {
        background-color: var(--ds-background-input-pressed, #fff);
    }

    &:focus-visible,
    &:has(input:focus) {
        border-color: var(--ds-border-focused, #4688ec);
        background-color: var(--ds-background-input-pressed, #fff);
        box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-focused, #4688ec);
    }

    &:user-invalid,
    &:has(input:user-invalid) {
        border-color: var(--ds-border-danger, #e2483d);
        box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-danger, #e2483d);
    }

    &:disabled {
        --textfield-placeholder-color: var(--ds-text-disabled, #080f214a);

        border-color: var(--ds-background-disabled, #0515240f);
        background-color: var(--ds-background-disabled, #0515240f);
        cursor: not-allowed;
    }

    &.textfield-compact {
        min-block-size: 32px;
        padding-block: var(--ds-space-025, 2px);
    }
}