// Colors
$c2blue-swatch: (
  primary: #3A6E93,
  secondary: #355E7D,
  tertiary: #C5DCED,
  quaternary: #DBEAF5,
  quinary: #EDF5FB,
);
$c2black-swatch: (
  primary: #333541,
  secondary: #444754,
  tertiary: #71737A,
  quaternary: #CDD1D3,
  quinary: #E8E8E8,
  senary: #FAFAFA,
);
$c2success-swatch: (
  primary: #9CD984,
  secondary: #80CD62,
  tertiary: #2B6E11,
);
$c2-warning: #F7DD7D;

// Typography
$body-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
// https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
// $h1-font-sizes: (
//   null  : 28px,
//   small : 31px,
//   medium : 33px,
//   large: 36px
// );
// $p-font-sizes: (
//   null  : 15px,
//   small : 16px,
//   medium : 17px,
//   large: 19px
// );
$header-color: map-get($c2blue-swatch, primary);

// Temp throwaway legacy overrides and things that don't yet have a home
.controller-reports {
  form.button_to button[type="submit"] {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.45em 1.6em;
    margin: 0 0 1rem 0;
    font-size: 0.8rem;
    background-color: #3a6e93;
    color: #fefefe;
  }
}
.controller-proposals {
  h1,h2,h3,h4 {
    font-family: $body-font-family;
  }
  #tabular-data_wrapper {
    z-index: 1;
    position: relative;
  }
  #query-links{
    margin-top: 27px;
    margin-bottom: 10px;
    z-index: 3;
    position: relative;
    .list-inline{
      margin-bottom: 0;
    }
    .button{
      margin-bottom: 0;
      text-decoration: none;
      color: white;
    }
  }
}
.summary-status-wrapper{
  font-family: $body-font-family;
}
.button{
  font-family: $body-font-family !important;
}
.form-button{
  border-color: map-get($c2success-swatch, primary);
  background: map-get($c2success-swatch, primary);
  color: #4A4A4A;
}
.card {
  font-family: $body-font-family !important;
  div[role=tooltip] {
    background-color: map-get($c2blue-swatch, primary) !important;
    color: white !important;
    font-size: .8rem !important;
  }
}
.popover-title {
  background-color: map-get($c2blue-swatch, primary);
  border-bottom: none;
  color: #ffffff !important;
  font-size: 1rem !important;
}
.popover.top > .arrow:after {
  border-top-color: map-get($c2blue-swatch, primary) !important;
}
