/**
 * buttons-primary.css
 * 
 * Primary buttons have a color fill, as opposed to secondary buttons which are simply outlined with a border.
 * 
 * There are 2 main colors in use, and both of those colors has a hovered variant. Primary buttons revert to one single gray color when disabled.
 * 
 * Index
 * - Primary 1: Active (#2375BB) and Hovered (#005394)
 * - Primary 2: Active (#CD470A) and Hovered (#AB3F02)
 * - Disabled (#DDDDDD)
 * 
 */

/*-----------------------------------------------------------------------
# Primary 1: Active (#2375BB) and Hovered (#005394)
------------------------------------------------------------------------*/

.btn-primary-1:link, 
.btn-primary-1:visited {
  background: #2375BB;
  color: #FFFFFF;
  border: 1px solid #2375BB;
}

.btn-primary-1:hover,
.btn-primary-1.hover,
.btn-primary-1.hover:hover,
.btn-primary-1:active,
.btn-primary-1.active {
  background: #005394;
  color: #FFFFFF;
  border: 1px solid #005394;
}

/*-----------------------------------------------------------------------
# Primary 2: Active (#CD470A) and Hovered (#AB3F02)
------------------------------------------------------------------------*/

.btn-primary-2:link, 
.btn-primary-2:visited {
  background: #CD470A;
  color: #FFFFFF;
  border: 1px solid #CD470A;
}
.btn-primary-2:hover,
.btn-primary-2.hover,
.btn-primary-2.hover:hover,
.btn-primary-2:active {
  background: #AB3F02;
  color: #FFFFFF;
  border: 1px solid #AB3F02;
}

/*-----------------------------------------------------------------------
# Disabled (#DDDDDD)
------------------------------------------------------------------------*/

.btn-primary-1:disabled,
.btn-primary-1:disabled:hover,
.btn-primary-1[disabled="disabled"],
.btn-primary-1[disabled="disabled"]:hover,
.btn-primary-2:disabled,
.btn-primary-2:disabled:hover,
.btn-primary-2[disabled="disabled"],
.btn-primary-2[disabled="disabled"]:hover {
  background: #DDDDDD;
  border: 1px solid #DDDDDD;
}