a {
  color: $primary;
  cursor: pointer;
}

p {
  a {
    &:hover {
      text-decoration: underline;
    }
  }
}

.btn {
  display: inline-block;
  text-align: center;
  font-weight: $font-weight-normal;
  vertical-align: middle;
  user-select: none;
  letter-spacing: .009rem;
  border: .0625rem solid transparent;
  padding: .375rem .75rem;
  padding: .7rem 1.2rem;
  font-size: .9rem;
  cursor: pointer;
}

.btn-rounded {
  border-radius: 3.125rem;
}

.btn-small {
  padding: .6rem .8rem;
  font-size: .8rem;
}

.btn-medium {
  padding: .8rem 1.6rem;
  font-size: 1rem;
}

.btn-large {
  padding: .9rem 2rem;
  font-size: 1.1rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-primary {
  background-color: $primary;
  border-color: $primary;
  color: $white;
  &:hover, &:focus {
    background-color: darken($primary, 5%);
    border-color: darken($primary, 5%);
  }
}

.btn-secondary {
  background-color: $secondary;
  border-color: $secondary;
  color: $white;
  &:hover, &:focus {
    background-color: darken($secondary, 5%);
    border-color: darken($secondary, 5%);
  }
}

.btn-success {
  background-color: $success;
  border-color: $success;
  color: $white;
  &:hover, &:focus {
    background-color: darken($success, 5%);
    border-color: darken($success, 5%);
  }
}

.btn-warning {
  background-color: $warning;
  border-color: $warning;
  color: $white;
  &:hover, &:focus {
    background-color: darken($warning, 5%);
    border-color: darken($warning, 5%);
  }
}

.btn-danger {
  background-color: $danger;
  border-color: $danger;
  color: $white;
  &:hover, &:focus {
    background-color: darken($danger, 5%);
    border-color: darken($danger, 5%);
  }
}

.btn-info {
  background-color: $info;
  border-color: $info;
  color: $white;
  &:hover, &:focus {
    background-color: darken($info, 5%);
    border-color: darken($info, 5%);
  }
}

.btn-dark {
  background-color: $dark;
  border-color: $dark;
  color: $white;
  &:hover, &:focus {
    background-color: darken($dark, 5%);
    border-color: darken($dark, 5%);
  }
}

.btn-light {
  background-color: $light;
  border-color: $light;
  color: darken($light, 10%);
  &:hover, &:focus {
    background-color: darken($light, 5%);
    border-color: darken($light, 5%);
  }
}

.btn-black {
  background-color: $black;
  border-color: $black;
  color: $white;
  &:hover, &:focus {
    background-color: darken($black, 5%);
    border-color: darken($black, 5%);
  }
}

.btn-white {
  background-color: $white;
  border-color: $white;
  color: $dark;
  &:hover, &:focus {
    background-color: darken($white, 5%);
    border-color: darken($white, 5%);
  }
}

.btn-outline-primary {
  background-color: transparent;
  border-color: $primary;
  color: $primary;
  &:hover, &:focus {
    border-color: darken($primary, 5%);
    color: darken($primary, 5%);
  }
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: $secondary;
  color: $secondary;
  &:hover, &:focus {
    border-color: darken($secondary, 5%);
    color: darken($secondary, 5%);
  }
}

.btn-outline-success {
  background-color: transparent;
  border-color: $success;
  color: $success;
  &:hover, &:focus {
    border-color: darken($success, 5%);
    color: darken($success, 5%);
  }
}

.btn-outline-warning {
  background-color: transparent;
  border-color: $warning;
  color: $warning;
  &:hover, &:focus {
    border-color: darken($warning, 5%);
    color: darken($warning, 5%);
  }
}

.btn-outline-danger {
  background-color: transparent;
  border-color: $danger;
  color: $danger;
  &:hover, &:focus {
    border-color: darken($danger, 5%);
    color: darken($danger, 5%);
  }
}

.btn-outline-info {
  background-color: transparent;
  border-color: $info;
  color: $info;
  &:hover, &:focus {
    border-color: darken($info, 5%);
    color: darken($info, 5%);
  }
}

.btn-outline-dark {
  background-color: transparent;
  border-color: $dark;
  color: $dark;
  &:hover, &:focus {
    border-color: darken($dark, 5%);
    color: darken($dark, 5%);
  }
}

.btn-outline-light {
  background-color: transparent;
  border-color: $light;
  color: darken($light, 10%);
  &:hover, &:focus {
    border-color: darken($light, 5%);
    color: darken($light, 5%);
  }
}

.btn-outline-black {
  background-color: transparent;
  border-color: $black;
  color: $black;
  &:hover, &:focus {
    border-color: darken($black, 5%);
    color: darken($black, 5%);
  }
}

.btn-outline-white {
  background-color: transparent;
  border-color: $white;
  color: $white;
  &:hover, &:focus {
    border-color: darken($white, 5%);
    color: darken($white, 5%);
  }
}