/* === Begin Button Styles ===  */

.s2a-btn
{ background-color: #bdf;
  border-radius: 3px; }

.s2a-btn-activate
{ font-size: 100%;
  line-height: 1.1;
  min-width: 80px; }

.s2a-btn-pushed
{ /* FontAwsome defines its color hard. */
  color: crimson !important; }

.s2a-btn:disabled
{ opacity: 0.65;
  pointer-events: none; }

.s2a-btn-sm
{ height: 20px;
  width: 34px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: #def;
  border-radius: 3px;
  border-style: none; }

.s2a-btn-alert
{ background-color: orange; }

/* An disabled small button should have the same color as the
 * bar it is placed upon. This also applies for alerted buttons,
 * since, if an button goes to alert, it should not be disabled.
 * And since this def comes later, it overrides the color. */
.s2a-btn-sm:disabled
{ background-color: #C9E4FF;
  opacity: 0.65;
  pointer-events: none; }

.s2a-btn-sm:hover:not([disabled])
{ cursor: pointer;  }

/* It is not possible to let css keep this color when pushed down,
   so we need a separate class for that. Highly non-orthogonal with disabled.*/
.s2a-btn-sm:active
{ background-color: #EEF6FF; }

.s2a-btn-alert:active
{ background-color: #ffe0b2; }

.s2a-btns-left, .s2a-btns-centre, .s2a-btns-right
{ display: inline-flex;
  white-space: nowrap; }

.s2a-btns-left
{ margin-left: 1px;
  float: left; }

.s2a-btns-right
{ margin-right: 1px;
  float: right;  }



/* === End Button Styles ===  */