/* =========================================================
   OBS DESIGN SYSTEM
   Input Component
   ========================================================= */

/* =========================================================
   FIELD
   ========================================================= */

.obs-field {
    position: relative;
}

/* =========================================================
   INPUT
   ========================================================= */

.obs-input {
    width: 100%;
    min-height: var(--obs-control-height-lg);

    padding:
        var(--obs-space-4)
        var(--obs-space-4)
        var(--obs-space-3);

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

    border:
        var(--obs-border-width-thin)
        solid
        var(--obs-border-primary);

    border-radius: var(--obs-radius-lg);

    font-family: inherit;
    font-size: var(--obs-font-size-md);
    line-height: var(--obs-line-height-normal);

    outline: none;

    transition:
        background var(--obs-transition-fast),
        border-color var(--obs-transition-fast),
        box-shadow var(--obs-transition-fast),
        color var(--obs-transition-fast);
}

.obs-input::placeholder {
    color: var(--obs-input-placeholder);
}

.obs-input:hover {
    border-color: var(--obs-border-hover);
}

.obs-input:focus {
    background: var(--obs-input-bg-focus);
    border-color: var(--obs-primary);
    box-shadow: var(--obs-focus-ring);
}

.obs-input:disabled,
.obs-input[readonly] {
    color: var(--obs-text-disabled);
    background: var(--obs-input-bg-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================================================
   INPUT WITH ICON
   ========================================================= */

.obs-input-has-icon {
    padding-left: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-3)
    );
}

.obs-input-icon {
    position: absolute;
    top: 50%;
    left: var(--obs-space-4);

    width: var(--obs-icon-size-md);
    height: var(--obs-icon-size-md);

    color: var(--obs-input-icon);
    opacity: 0.8;

    pointer-events: none;

    transform: translateY(-50%);
    transition:
        color var(--obs-transition-fast),
        opacity var(--obs-transition-fast);
}

.obs-field:focus-within .obs-input-icon {
    color: var(--obs-primary);
    opacity: 1;
}

/* =========================================================
   FLOATING LABEL
   ========================================================= */

.obs-field-floating .obs-input {
    padding-top: var(--obs-space-5);
    padding-bottom: var(--obs-space-2);
}

.obs-field-floating .obs-label {
    position: absolute;
    top: 50%;
    left: var(--obs-space-4);

    color: var(--obs-input-placeholder);

    font-size: var(--obs-font-size-md);
    line-height: 1;

    pointer-events: none;

    transform: translateY(-50%);

    transition:
        top var(--obs-transition-fast),
        color var(--obs-transition-fast),
        font-size var(--obs-transition-fast),
        transform var(--obs-transition-fast);
}

.obs-field-floating .obs-input-has-icon + .obs-label {
    left: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-3)
    );
}

.obs-field-floating .obs-input:focus + .obs-label,
.obs-field-floating .obs-input:not(:placeholder-shown) + .obs-label {
    top: var(--obs-space-2);
    color: var(--obs-text-secondary);
    font-size: var(--obs-font-size-xs);
    transform: none;
}

/* =========================================================
   VALIDATION
   ========================================================= */

.obs-input.is-invalid {
    border-color: var(--obs-danger);
}

.obs-input.is-invalid:focus {
    box-shadow: var(--obs-danger-focus-ring);
}

.obs-input.is-valid {
    border-color: var(--obs-success);
}

.obs-input.is-valid:focus {
    box-shadow: var(--obs-success-focus-ring);
}

/* =========================================================
   HELPER TEXT
   ========================================================= */

.obs-field-message {
    display: block;

    margin-top: var(--obs-space-2);

    color: var(--obs-text-muted);

    font-size: var(--obs-font-size-sm);
    line-height: var(--obs-line-height-normal);
}

.obs-field-message.is-error {
    color: var(--obs-danger);
}

.obs-field-message.is-success {
    color: var(--obs-success);
}