.tao-btn-primary {
  color: $tao-blue-500;
  font-size: $font-size-base;
  padding: 6px 19px;
  border-radius: 100px !important;
  background-color: transparent;
  border: 1px solid $tao-blue-500;
  outline: none !important;
  transition: all 0.18s ease-out 0.18s;
  cursor: pointer;

  &.large {
    font-size: $font-size-h3;
    padding: 10px 32px;
  }

  &.hidden {
    visibility: hidden;

  }

  &.medium {
    font-size: $font-size-h4;
    padding: 8px 24px;
  }

  &:hover
  {
    background: initial;
    background-color: transparent;
    color: $tao-blue-500;
    box-shadow: inset 0 0 0 1px $tao-blue-500;
  }

  &:active {

  }

}

.tao-btn-rainbow {
  @extend .tao-btn-primary;
  background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
  transition: all 0.18s ease;
  color: white;
  border: none;
  text-decoration: none !important;
  box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);


  &:active {
    box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
    background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
    color: white;
    padding: 5px 18px;
  }

  &:hover {
    background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
    box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
    color: white;
  }
}