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 0.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;
  }
}