@import "../../../styles/colors";
@import "../../../styles/fonts";

.blue-button {
  color: white;
  background-color: $blue;
  font: bold 14px/16px $font-family-sans-serif;
  border-radius: 4px;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 15px;
  transition: all 0.3s;
  &:hover,
  &:focus {
    color: $blue;
    background-color: white;
    border: 2px solid $blue;
  }
  &:active {
    border: 2px solid $dark-blue;
  }
}
.blue-button-inverse {
  color: $blue;
  background-color: white;
  font: bold 14px/16px $font-family-sans-serif;
  border-radius: 4px;
  border: 2px solid $blue;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 15px;
  transition: all 0.3s;
  &:hover,
  &:focus {
    color: white;
    background-color: $blue;
    border: 2px solid transparent;
  }
  &:active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }
}
.transparent-button {
  text-transform: uppercase;
  color: $blue;
  background: none;
  font: bold 14px/16px $font-family-sans-serif;
  border-radius: 4px;
  border: 2px solid $blue;
  transition: color .35s, background .35s;
  padding: 10px 15px;
  min-width: 100px;
  &:hover {
    background: $blue;
    color: $white;
  }
  &:focus {
    outline: none;
  }
}
.red-button-inverse {
  color: $red;
  background-color: white;
  font: bold 14px/16px $font-family-sans-serif;
  border-radius: 4px;
  border: 2px solid $red;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 15px;
  transition: all 0.3s;
  &:hover,
  &:focus {
    color: white;
    background-color: $red;
    border: 2px solid transparent;
  }
  &:active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }
}

a, a:hover {
  text-decoration: none;
}