blog/src/components/atoms/Input.module.scss

@import 'variables';

.input {
    display: block;
    width: 100%;
    padding: $padding-base-vertical $padding-base-horizontal;
    font-size: $input-font-size;
    font-weight: $input-font-weight;
    line-height: $line-height;
    color: $input-color;
    background-color: $input-bg;
    background-image: none; // Reset unusual Firefox-on-Android default style
    border: 0;
    border-radius: $input-border-radius;
    box-shadow: none;
    transition: all ease-in-out .15s;
    appearance: none;

    &:hover {
        background: lighten($input-bg, 30%);
    }

    &:focus {
        background-color: $input-bg-focus;
        border-color: $input-border-focus;
        outline: 0;
    }

    &[disabled] {
        color: $brand-grey-dimmed;
    }
}