// ==========================================================================
// Fields - Inputs
// ==========================================================================

.fui-input,
.fui-select {
    // Resets
    font-family: inherit;
    font-size: var(--fui-input-font-size);
    line-height: var(--fui-input-line-height);
    margin: 0;
    appearance: none;

    width: var(--fui-input-width);
    display: block;
    padding: var(--fui-input-padding);
    border: var(--fui-input-border, 1px solid var(--fui-border-color));
    border-radius: var(--fui-input-border-radius, var(--fui-border-radius));
    background-color: var(--fui-input-background-color);
    transition-property: var(--fui-input-transition-property);
    transition-timing-function: var(--fui-input-transition-timing-function);
    transition-duration: var(--fui-input-transition-duration);

    &:focus,
    &.fui-focus {
        outline: 0;
        border-color: var(--fui-input-border-color-focus, var(--fui-focus-border-color));
        box-shadow: var(--fui-input-box-shadow-focus, var(--fui-focus-shadow));
    }

    &.fui-error {
        color: var(--fui-input-error-color);
        border-color: var(--fui-input-error-border-color);
    }

    &.fui-error:focus,
    &.fui-error.fui-focus {
        box-shadow: var(--fui-input-error-box-shadow-focus);
    }

    &::placeholder {
        color: var(--fui-input-placeholder-color, var(--fui-gray-400));
    }

    //
    // Input types
    //

    &[type="file"] {
        height: auto;
    }

    &[type="color"] {
        height: 39px;
        padding: 0.1rem;
    }

    // Fix for iOS devices and zooming on focus - must be 16px specifically
    @media (max-width: 639px) {
        font-size: 16px;
    }
}

// Fix Safari date input height bug
// https://8yd.no/article/date-input-height-in-safari
.fui-field input::-webkit-datetime-edit {
    display: block;
    padding: 0;
    margin-bottom: -2px;
}

// Fix mobile Safari date input height appearing shrunk
// https://bugs.webkit.org/show_bug.cgi?id=198959
.fui-field input::-webkit-date-and-time-value {
    height: 1.5em;
}