@import '../../../styles/core.scss';

.Input {
  appearance: none;
  background-color: get(color 'ivory');
  border: 2px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  color: get(color 'slate');
  font: inherit;
  font-weight: 400;
  outline: none;
  padding: 0 ms(-1);
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  &:focus {
    background: #fff;
    border: 2px solid get(color 'blue');
    box-shadow: 0 0 0 3px rgba(get(color 'blue'), 0.25);
    color: get(grays, 1);
  }

  &:disabled {
    background: get(color 'ivory');
    color: get(color 'graphite');
    cursor: not-allowed;
  }

  // uncontrolled
  &:not(.Input_clean):not(.Input_dirty):invalid:focus {
    border-color: get(color 'red');
    box-shadow: 0 0 0 3px rgba(get(color 'red'), 0.4);
  }

  // controlled
  &_dirty:invalid {
    border-color: get(color 'red');

    &:focus {
      box-shadow: 0 0 0 3px rgba(get(color 'red'), 0.4);
    }
  }

  &::placeholder {
    color: get(color 'shale');
  }

  &_sm {
    font-size: ms(-1);
    height: 30px;
  }

  &_md {
    font-size: ms(0);
    height: 40px;
  }

  &_lg {
    font-size: ms(1);
    height: 50px;
  }
}
