// note that font-size and line-height are using "em" instead of "rem" so they can be chaged by their parent's font-size
// for non-variable sizes, stick to "rem"

.kc.input {

    width: 100%;
    //height: auto;
    //overflow: hidden;
    border: var(--kc-border-width) var(--kc-border-style) var(--kc-border-color);
    //padding: .25rem;
    background-color: var(--kc-base-color);
    color: var(--kc-key-color);

    > input[type="text"],
    > input[type="password"],
    > input[type="tel"],
    > textarea {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        display: block;

        width: 100%;
        min-width: 0; // Fix for Firefox
        //height: 1.5em;
        //height: 4rem;

        margin: 0;
        //padding: 0;
        padding: .25rem;

        border: none;
        border-radius: 0;
        outline: none;

        line-height: 1;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;

        background-color: inherit;
        //background-color: rgba(0, 100, 100, .2);
        color: inherit;
    }
    > textarea {
        line-height: 1.5;
        resize: none;
    }
    > input:disabled,
    > textarea:disabled {
        background-color: var(--kc-base-color-dimmed);
        color: var(--kc-key-color-dimmed);
    }
    > ::placeholder {
        color: var(--kc-placeholder-color);
    }
}
.kc.input.with-prefix,
.kc.input.with-suffix {
    display: flex;
    flex-flow: row nowrap;
    > input {
        flex: 1;
    }
    > label {
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding: .25rem;
        //background-color: rgba(0, 0, 0, .2);
    }
}
.kc.input.with-prefix {
    > input {
        order: 1;
        padding-left: 0;
    }
    > label {
        order: 0;
        padding-right: 0;
    }
}
.kc.input.with-suffix {
    > input {
        order: 0;
        padding-right: 0;
    }
    > label {
        order: 1;
        padding-left: 0;
    }
}
.kc.input.with-button {
    display: flex;
    flex-flow: row nowrap;
    > input {
        flex: 1 0 0;
    }
}
.kc.form > .field.inline > .kc.input,
.kc.form > * > .field.inline > .kc.input {
    //background-color: blue;
    flex: 1 1 0;
    width: auto;
    margin-right: 1rem;
}
.kc.form > .field.inline > .kc.input:last-child,
.kc.form > * > .field.inline > .kc.input:last-child {
    margin-right: unset;
}