@import '../../base/components/input.styl';

.input {
    color: black;

    &.icon {
        & > .icon {
            color: color--grey--4;
            font-size: 16px;

            &:hover {
                color: color--red--3;
            }
        }

        & > input {
            padding-right: 2.5em;
        }

        &.left {
            & > input {
                padding-right: 1em;
                padding-left: 2.5em;
            }
        }
    }

    &.disabled {
        color: color--grey--2;

        &.icon > .icon {
            color: color--grey--2;
        }
    }

    input, textarea {
        background: white;
        border: 1px solid color--grey--3;
        color: black;
        border-radius: (3 / 16) * 1rem;
        outline: 0;
        flex: 1 0 auto;

        &:focus {
            border-color: color--blue--4;
        }

        &:disabled {
            color: color--grey--2;
            border-color: color--grey--2;

            &::placeholder {
                color: color--grey--2;
            }
        }

        &::placeholder {
            font-style: italic;
        }
    }

    input {
        margin: 0;
        max-width: 100%;
        text-align: left;
        line-height: (20 / 16) * 1em;
        padding: 0 1em;
        height: 24px;
    }
}