/* ============================================================
   Onesown Blazor Components – Input (Textbox, Textarea, Numberbox)
   Abhängigkeit: theme1.css
   ============================================================ */


/* ── Wrapper ─────────────────────────────────────────────── */
.form--group {
    position: relative;
}
/* ── Input ───────────────────────────────────────────────── */

.form--input {
    /*padding: var(--oo-space-2) var(--oo-space-4);*/
    /*color: var(--oo-color-text);*/
    /*font-size: var(--oo-font-size-md);*/
    border: var(--oo-border-width) solid var(--oo-color-border);
    width: 100%;
    background-color: var(--oo-color-surface);
    /*box-sizing: border-box;*/
    /*font: inherit;*/
    border-radius: var(--oo-border-radius);
    font-size: inherit;
}

    .form--input:hover {
        border-color: var(--oo-color-border-strong);
    }

    .form--input:focus {
        color: var(--oo-color-text);
        border-color: var(--oo-primary);
        /* MR: überschreibt die default Browser anweisung */
        outline: 0;
    }

    .form--input:disabled,
    .form--input[disabled],
    .form--input[readonly] {
        background-color: var(--oo-color-background);
        color: var(--oo-color-text-disabled);
        cursor: not-allowed;
    }
/* ── TextBox Input-Wrapper (für Clear-Button) ─────────────── */

.oo-textbox--input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .oo-textbox--input-wrapper .form--input {
        flex: 1;
    }

        .oo-textbox--input-wrapper .form--input.has-clear {
            padding-right: 2rem;
        }

.oo-textbox--clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--oo-color-text-subtle);
    display: flex;
    align-items: center;
    line-height: 0;
}

    .oo-textbox--clear:hover {
        color: var(--oo-danger);
    }

    .oo-textbox--clear .oo-svg-icon {
        width: 1.25rem;
        height: 1.25rem;
        fill: currentColor;
    }