$white: #fff;
$black: #000;

// Gray
$concrete-gray: #fafafa;
$mercury-gray: #e1e1e1;
$silver-gray: #c4c4c4;
$chalice-gray: #aeaeae;
$dove-gray: #737373;
$mine-shaft-gray: #2b2b2b;

// Blue
$zumthor-blue: #ebf4ff;
$malibu-blue: #5ca2ff;
$royal-blue: #2f80ed;

// Purple
$wisteria-purple: #dc6be5;

// Red
$salmon-red: #ff6871;

// Orange
$pizazz-orange: #ff8f05;

%col-nowrap {
  display: flex;
  flex-flow: column nowrap;
}

%row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

%primary-button {
  font-size: 1rem;
  min-width: 16rem;
  padding: 1rem;
  background-color: $royal-blue;
  cursor: pointer;
  border-radius: 3rem;
  color: $white;
  outline: none;
  border: 1px solid transparent;
  user-select: none;
  transition: background-color 300ms ease-in-out;

  &:hover {
    background-color: lighten($royal-blue, 5);
  }

  &:active {
    background-color: darken($royal-blue, 5);
  }

  &:disabled {
    background-color: $mercury-gray;
    cursor: auto;
  }
}

%borderless-input {
  color: $mine-shaft-gray;
  font-size: 1rem;
  outline: none;
  border: none;
  flex: 1 1 auto;
  width: 0;

  &::placeholder {
    color: $mercury-gray;
  }
}
