/*
The darken/lighten is not giving accurate results for the toasters so specific vars for them below.

- Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20.
- Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20.
- Orange background: #ff9933
- The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text.

*/
/*is not being used anywhere; the same as @redAlert*/
:host {
  position: relative; }

input {
  width: 100%;
  height: 19px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: left;
  margin: 0 0 2px;
  font-family: ProximaNova; }
  input.error {
    border-color: #f5475b; }
  input.spinner {
    padding-right: 12px; }

:host.Done input {
  color: #2498BA;
  background-color: #171717; }

:host.Done.Markup input {
  color: #fff; }

:host.Disabled input {
  color: #4a4a52;
  background-color: #171717; }

:host.Activated input {
  color: #1cb31c; }

:host.AwaitingActivation input {
  color: #1cb31c; }

:host button {
  background-image: none;
  box-shadow: none;
  background-color: transparent;
  border: none;
  margin: 0;
  height: 9px;
  padding: 0;
  min-width: initial;
  width: 13px;
  position: absolute;
  right: 1px;
  font-size: 7px;
  line-height: 7px;
  font-family: 'Icons';
  color: #c2c2c2; }
  :host button.spin-up {
    top: 1px; }
    :host button.spin-up:before {
      /* arrow up */
      content: "\e614";
      position: absolute;
      top: 1px;
      right: 4px; }
  :host button.spin-down {
    top: 9px; }
    :host button.spin-down:before {
      /* arrow down */
      content: "\e900";
      position: absolute;
      bottom: 1px;
      right: 4px; }
  :host button:hover {
    color: #ff9933;
    background-color: transparent !important; }
  :host button:focus {
    border: none !important;
    box-shadow: none; }