.btn {
  padding: 6px 32px;
  text-transform: uppercase;
  transition: all 200ms ease-in-out;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: $color-white;
  font-weight: 700;
  font-size: rem(16);
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }

  @media screen and (min-width: 768px) {
    font-size: rem(20);
    padding: 6px 32px;
  }
  &--gold {
    background: $color-gold-dark;
    border: 2px solid $color-gold-dark;
    &:hover {
      background: transparent;
      border: 2px solid $color-white;
    }
  }
  &--gold-alt {
    background: $color-gold-dark;
    border: 2px solid $color-gold-dark;
    &:hover {
      background: transparent;
      color: $color-blue-dark;
      border: 2px solid $color-blue-dark;
    }
  }
  &--blue {
    background: $color-blue-main;
    border: 2px solid $color-blue-main;
    &:hover {
      background: $color-gold-dark;
      border: 2px solid $color-gold-dark;
    }
  }
  &--dark {
    background: $color-blue-dark;
    border: 2px solid $color-blue-dark;
    &:hover {
      background: $color-gold-dark;
      border: 2px solid $color-gold-dark;
    }
  }
  &--light {
    width: 100%;
    padding: 6px 10px;
    @media screen and (min-width: 768px) {
      font-size: rem(16);
      padding: 8px 10px;
    }
    background: $color-gold-light;
    border: 2px solid $color-gold-light;
    &:hover {
      background: #D3B17D;
      border: 2px solid #D3B17D;
    }
  }
  &--hollow {
    background: transparent;
    border: 2px solid $color-white;
    &:hover {
      border: 2px solid $color-gold-dark;
      background: $color-gold-dark;
    }
  }
}

button {
  &:focus {
    outline: none;
  }
}