Text field

                @use "../abstracts/css-util";

.text-field {
    font-family: css-util.get-var(text-field, font);
    font-size: css-util.get-var(text-field, text-size);
    font-weight: css-util.get-var(text-field, text-weight);
    height: css-util.get-var(text-field, height);
    color: css-util.get-var(text-field, text-color);
    width: css-util.get-var(text-field, width);
    padding: css-util.get-var(text-field, padding);
    background: css-util.get-var(text-field, background);
    border-radius: css-util.get-var(text-field, radius);
    border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field, border-color);

    &:hover:not(.text-field-error):not(:disabled) {
        border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field, hover, border-color);
    }

    &:focus-visible {
        border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field, focus, border-color);

        &.text-field-error {
            border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field-error, border-color);
        }
    }

    &:disabled {
        border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field, disabled, border-color);
        background: css-util.get-var(text-field, disabled, background);
        color: css-util.get-var(text-field, disabled, text-color);
        -webkit-text-fill-color: css-util.get-var(text-field, disabled, text-color);
        opacity: 1;
        /* required on iOS */
    }

    &-extrasmall-width {
        width: css-util.get-var(text-field-extrasmall, width);
    }

    &-small-width {
        width: css-util.get-var(text-field-small, width);
    }

    &-medium-width {
        width: css-util.get-var(text-field-medium, width);
    }

    &-large-width {
        width: css-util.get-var(text-field-large, width);
    }

    &-small-height {
        height: css-util.get-var(text-field-small-height, height);
    }

    &-error {
        border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field-error, border-color);
    }

}


@media only screen and (max-width: 490px) {
    .text-field {
        padding: 1.8rem;
    }
}