/* =============================================================================
 * Variables
 * ========================================================================== */

:root {
    --font-family: Calibri, Arial, Helvetica, sans-serif;
    --text-font-size: 2.75vh;
    
    /* control the input size here */
    --input-h: clamp(40px, 7vmin, 50px);
    --input-radius: calc(var(--input-h) * 0.25);

    /* font follows height */
    --input-font: calc(var(--input-h) * 0.4);

    --border-w: clamp(2px, 0.35vmin, 3px);

    --input-bg: #f4f4f4;
    --input-border: #c9c9c9;
    --input-focus-border: #389bd5;
    --input-focus-glow: rgba(56, 155, 213, 0.25);

    --input-text: #333;
    --input-placeholder: #9a9a9a;

    --selection-bg: #389bd5;
    --selection-text: #fff;
}

/* =============================================================================
 * Base input
 * ========================================================================== */

.textInputClass {
    box-sizing: border-box;

    height: var(--input-h);
    line-height: calc(var(--input-h) - (var(--border-w) * 2)); /* nice vertical centering */
    padding: clamp(5px, 2vmin, 10px);

    font-size: var(--input-font);

    border-radius: var(--input-radius);
    border: var(--border-w) solid var(--input-border);

    background: var(--input-bg);
    color: var(--input-text);

    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* =============================================================================
 * Hover
 * ========================================================================== */

.textInputClass:hover {
    border-color: #a0a0a0;
    transition: 0.2s ease;
}

/* =============================================================================
 * Focused (selected / clicked)
 * ========================================================================== */

.textInputClass:focus{
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 clamp(3px, 0.8vmin, 5px) var(--input-focus-glow);
    background: #fff;
}

/* =============================================================================
 * Placeholder
 * ========================================================================== */

.textInputClass::placeholder{
    color: var(--input-placeholder);
    opacity: 1;
}

/* =============================================================================
 * Text selection inside input
 * ========================================================================== */

.textInputClass::selection{
    background: var(--selection-bg);
    color: var(--selection-text);
}

.textInputClass::-moz-selection{
    background: var(--selection-bg);
    color: var(--selection-text);
}