/*
 * Hobi Community - Text field
 *
 * Generieke styling voor tekst-, datum-, wachtwoord- en textarea-velden.
 *
 * De selectors zijn bewust specifieker dan de Elementor reset.css,
 * zodat de Hobi-styling leidend blijft.
 */

.hobi-text-field,
.hobi-text-field * {
    box-sizing: border-box;
}

.hobi-text-field {
    width: 100%;
    color: var(--hobi-color-text);
}

.hobi-text-field__input-wrap {
    position: relative;
    width: 100%;
}

/* ========================================================================== */
/* Basis control                                                              */
/* ========================================================================== */

.hobi-text-field input.hobi-text-field__control,
.hobi-text-field textarea.hobi-text-field__control {
    display: block;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 10px 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    color: var(--hobi-color-text);
    caret-color: var(--hobi-color-accent, #CF6DA6);

    background-color: var(--hobi-color-background, #FFFFFF);
    background-image: none;

    border-width: 1px;
    border-style: solid;
    border-color: var(--hobi-color-accent, #CF6DA6);
    border-radius: 5px;

    outline: none;
    box-shadow: none;

    font: inherit;
    font-size: 1rem;
    line-height: 1.4;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
}

.hobi-text-field textarea.hobi-text-field__control {
    min-height: 120px;
    overflow: auto;
    resize: vertical;
}

/* ========================================================================== */
/* Elementor reset overschrijven voor specifieke inputtypen                   */
/* ========================================================================== */

.hobi-text-field input[type="date"].hobi-text-field__control,
.hobi-text-field input[type="datetime-local"].hobi-text-field__control,
.hobi-text-field input[type="email"].hobi-text-field__control,
.hobi-text-field input[type="month"].hobi-text-field__control,
.hobi-text-field input[type="number"].hobi-text-field__control,
.hobi-text-field input[type="password"].hobi-text-field__control,
.hobi-text-field input[type="search"].hobi-text-field__control,
.hobi-text-field input[type="tel"].hobi-text-field__control,
.hobi-text-field input[type="text"].hobi-text-field__control,
.hobi-text-field input[type="time"].hobi-text-field__control,
.hobi-text-field input[type="url"].hobi-text-field__control,
.hobi-text-field input[type="week"].hobi-text-field__control {
    display: block;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 10px 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    color: var(--hobi-color-text);
    background-color: var(--hobi-color-background, #FFFFFF);
    background-image: none;

    border-width: 1px;
    border-style: solid;
    border-color: var(--hobi-color-accent, #CF6DA6);
    border-radius: 5px;

    outline: none;
    box-shadow: none;

    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

/* ========================================================================== */
/* Search input                                                               */
/* ========================================================================== */

.hobi-text-field input[type="search"].hobi-text-field__control {
    appearance: none;
    outline-offset: 0;
}

.hobi-text-field input[type="search"].hobi-text-field__control::-webkit-search-decoration,
.hobi-text-field input[type="search"].hobi-text-field__control::-webkit-search-cancel-button,
.hobi-text-field input[type="search"].hobi-text-field__control::-webkit-search-results-button,
.hobi-text-field input[type="search"].hobi-text-field__control::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* ========================================================================== */
/* Number input                                                               */
/* ========================================================================== */

.hobi-text-field input[type="number"].hobi-text-field__control::-webkit-inner-spin-button,
.hobi-text-field input[type="number"].hobi-text-field__control::-webkit-outer-spin-button {
    margin: 0;
}

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

.hobi-text-field input.hobi-text-field__control::placeholder,
.hobi-text-field textarea.hobi-text-field__control::placeholder {
    color: var(--hobi-color-muted);
    opacity: 1;
}

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

.hobi-text-field input.hobi-text-field__control:hover:not(:disabled):not(:read-only),
.hobi-text-field textarea.hobi-text-field__control:hover:not(:disabled):not(:read-only) {
    color: var(--hobi-color-text);
    background-color: var(--hobi-color-background, #FFFFFF);
    border-color: var(--hobi-color-accent-hover, #C24788);
    box-shadow: none;
}

/* ========================================================================== */
/* Focus                                                                      */
/* ========================================================================== */

.hobi-text-field input.hobi-text-field__control:focus,
.hobi-text-field input.hobi-text-field__control:focus-visible,
.hobi-text-field textarea.hobi-text-field__control:focus,
.hobi-text-field textarea.hobi-text-field__control:focus-visible {
    color: var(--hobi-color-text);
    background-color: var(--hobi-color-background, #FFFFFF);
    border-color: var(--hobi-color-accent, #CF6DA6);

    outline: none;
    box-shadow: 0 0 0 4px var(
        --hobi-color-focus-ring,
        rgb(207 109 166 / 15%)
    );
}

/* Specifiek tegen de Elementor type-selector voor focus. */

.hobi-text-field input[type="date"].hobi-text-field__control:focus,
.hobi-text-field input[type="datetime-local"].hobi-text-field__control:focus,
.hobi-text-field input[type="email"].hobi-text-field__control:focus,
.hobi-text-field input[type="month"].hobi-text-field__control:focus,
.hobi-text-field input[type="number"].hobi-text-field__control:focus,
.hobi-text-field input[type="password"].hobi-text-field__control:focus,
.hobi-text-field input[type="search"].hobi-text-field__control:focus,
.hobi-text-field input[type="tel"].hobi-text-field__control:focus,
.hobi-text-field input[type="text"].hobi-text-field__control:focus,
.hobi-text-field input[type="time"].hobi-text-field__control:focus,
.hobi-text-field input[type="url"].hobi-text-field__control:focus,
.hobi-text-field input[type="week"].hobi-text-field__control:focus {
    border-color: var(--hobi-color-accent, #CF6DA6);
    outline: none;
    box-shadow: 0 0 0 4px var(
        --hobi-color-focus-ring,
        rgb(207 109 166 / 15%)
    );
}

/* ========================================================================== */
/* Disabled                                                                   */
/* ========================================================================== */

.hobi-text-field input.hobi-text-field__control:disabled,
.hobi-text-field textarea.hobi-text-field__control:disabled {
    color: var(--hobi-color-disabled-text);
    background-color: var(--hobi-color-disabled-background);
    border-color: var(--hobi-color-border);
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
}

/* ========================================================================== */
/* Read only                                                                  */
/* ========================================================================== */

.hobi-text-field input.hobi-text-field__control:read-only,
.hobi-text-field textarea.hobi-text-field__control:read-only {
    color: var(--hobi-color-text-secondary);
    background-color: var(--hobi-color-surface-strong);
    border-color: var(--hobi-color-border);
    cursor: default;
    box-shadow: none;
}

/* Readonly mag niet de hoverkleur krijgen. */

.hobi-text-field input.hobi-text-field__control:read-only:hover,
.hobi-text-field textarea.hobi-text-field__control:read-only:hover {
    border-color: var(--hobi-color-border);
}

/* ========================================================================== */
/* Validatie                                                                  */
/* ========================================================================== */

.hobi-text-field input.hobi-text-field__control:user-invalid,
.hobi-text-field textarea.hobi-text-field__control:user-invalid,
.hobi-text-field input.hobi-text-field__control[aria-invalid="true"],
.hobi-text-field textarea.hobi-text-field__control[aria-invalid="true"] {
    border-color: var(--hobi-color-error);
}

.hobi-text-field input.hobi-text-field__control:user-invalid:focus,
.hobi-text-field textarea.hobi-text-field__control:user-invalid:focus,
.hobi-text-field input.hobi-text-field__control[aria-invalid="true"]:focus,
.hobi-text-field textarea.hobi-text-field__control[aria-invalid="true"]:focus {
    border-color: var(--hobi-color-error);
    box-shadow: 0 0 0 4px rgb(220 38 38 / 15%);
}

/* ========================================================================== */
/* Tekstselectie                                                              */
/* ========================================================================== */

.hobi-text-field input.hobi-text-field__control::selection,
.hobi-text-field textarea.hobi-text-field__control::selection {
    color: var(--hobi-color-selected-text);
    background-color: var(--hobi-color-selected-background);
}

/* ========================================================================== */
/* Password                                                                   */
/* ========================================================================== */

.hobi-text-field--password input.hobi-text-field__control {
    padding-right: 52px;
}

/*
 * Expliciet button-element opnemen om Elementor button-styling
 * te overschrijven.
 */

.hobi-text-field button.hobi-text-field__password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    color: var(--hobi-color-muted);
    background-color: transparent;

    border: 0;
    border-radius: 50%;

    outline: none;
    box-shadow: none;

    font: inherit;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;

    cursor: pointer;
    transform: translateY(-50%);

    transition:
        color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.hobi-text-field button.hobi-text-field__password-toggle:hover {
    color: var(--hobi-color-accent-hover, #C24788);
    background-color: var(--hobi-color-surface-muted);

    border: 0;
    box-shadow: none;
}

.hobi-text-field button.hobi-text-field__password-toggle:focus,
.hobi-text-field button.hobi-text-field__password-toggle:focus-visible {
    color: var(--hobi-color-accent, #CF6DA6);
    background-color: var(--hobi-color-surface-muted);

    border: 0;
    outline: none;
    box-shadow: 0 0 0 3px var(
        --hobi-color-focus-ring,
        rgb(207 109 166 / 15%)
    );
}

.hobi-text-field button.hobi-text-field__password-toggle:active {
    transform: translateY(-50%) scale(0.96);
}

.hobi-text-field button.hobi-text-field__password-toggle:disabled {
    color: var(--hobi-color-disabled-text);
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.6;
}

/*
 * Password-iconen.
 *
 * Beide iconen worden door TextField.php gerenderd.
 * Het aria-pressed-attribuut op de knop bepaalt welk icoon zichtbaar is.
 */

.hobi-text-field button.hobi-text-field__password-toggle
.hobi-text-field__password-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    pointer-events: none;
}

/*
 * Standaard:
 * - wachtwoord verborgen;
 * - normaal oog zichtbaar;
 * - doorgestreept oog verborgen.
 */

.hobi-text-field button.hobi-text-field__password-toggle
.hobi-text-field__password-icon--hidden {
    display: inline-block !important;
}

.hobi-text-field button.hobi-text-field__password-toggle
.hobi-text-field__password-icon--visible {
    display: none !important;
}

/*
 * Wachtwoord zichtbaar:
 * - normaal oog verborgen;
 * - doorgestreept oog zichtbaar.
 */

.hobi-text-field button.hobi-text-field__password-toggle[aria-pressed="true"]
.hobi-text-field__password-icon--hidden {
    display: none !important;
}

.hobi-text-field button.hobi-text-field__password-toggle[aria-pressed="true"]
.hobi-text-field__password-icon--visible {
    display: inline-block !important;
}

/*
 * Ondersteuning voor Font Awesome-plug-ins die de oorspronkelijke
 * <i>-elementen omzetten naar <svg>-elementen.
 */

.hobi-text-field button.hobi-text-field__password-toggle
svg.hobi-text-field__password-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    pointer-events: none;
}

/* ========================================================================== */
/* Counter                                                                    */
/* ========================================================================== */

.hobi-text-field__counter {
    margin-top: 6px;
    color: var(--hobi-color-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: right;
}

.hobi-text-field__counter.is-limit-reached {
    color: var(--hobi-color-error);
}

/* ========================================================================== */
/* Help                                                                       */
/* ========================================================================== */

.hobi-text-field__help {
    margin: 6px 0 0;
    color: var(--hobi-color-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.hobi-text-field__help.is-error {
    color: var(--hobi-color-error);
}