@import "../helpers/index.scss";

.cta-btn {
  padding: 5px 10px;
  @include font($size: $t4-text, $color: $white, $weight: bold);
  background-color: $brand-color;
  border: none;
  border-radius: $radius-4;
  transition: all 0.2s linear;
  white-space: nowrap;
  &:hover {
    color: $white;
    background: $cta-hover-gradient;
    transform: scale(1.05);
  }
  &:focus {
    outline: 3px auto rgba(47, 128, 237, 0.3);
    outline-offset: 1px;
  }
  &.disabled {
    color: $disabled-clr;
    background: $grey-lighter-clr;
    cursor: not-allowed !important;
    &:hover {
      background-color: $grey-lighter-clr;
    }
  }
}

.primary-btn {
  padding: 5px 10px;
  @include font($size: $t4-text, $color: $brand-color, $weight: bold);
  background-color: $white;
  border: 1px solid $brand-color;
  border-radius: $radius-4;
  transition: all 0.2s linear;
  white-space: nowrap;
  &:hover {
    color: $brand-color;
    background-color: $brand-hover-color;
    transform: scale(1.05);
  }
  &:focus {
    outline: 3px auto rgba(47, 128, 237, 0.3);
    outline-offset: 2px;
  }
  &.disabled {
    color: $disabled-clr;
    background: $white;
    border: 1px solid $grey-regular-clr;
    cursor: not-allowed !important;
    &:hover {
      background-color: $white;
    }
  }
}

.secondary-btn {
  padding: 5px 10px;
  @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
  background-color: $white;
  border: 1px solid $ink-regular-clr;
  border-radius: $radius-4;
  transition: all 0.2s linear;
  white-space: nowrap;
  &:hover {
    color: $primary-text-clr;
    background-color: $grey-light-clr;
    transform: scale(1.05);
  }
  &:focus {
    outline: 3px auto rgba(47, 128, 237, 0.3);
    outline-offset: 2px;
  }
  &.disabled {
    color: $disabled-clr;
    background: $white;
    border: 1px solid $grey-regular-clr;
    cursor: not-allowed !important;
    &:hover {
      background-color: $white;
    }
  }
  span:nth-child(2) {
    margin: 0 4px 0 8px;
  }
  span:nth-child(3) {
    @include font($size: 10px, $color: $ink-lighter-clr, $weight: bold);
  }
}

.gray-border-btn {
  padding: 5px 10px;
  @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
  background-color: $white;
  border: 1px solid $ink-regular-clr;
  border-radius: $radius-4;
  transition: all 0.2s linear;
  white-space: nowrap;
  &:hover {
    color: $primary-text-clr;
    background-color: $grey-light-clr;
    transform: scale(1.05);
  }
  &:focus {
    outline: 3px auto rgba(47, 128, 237, 0.3);
    outline-offset: 2px;
  }
  &.disabled {
    color: $disabled-clr;
    background: $white;
    border: 1px solid $grey-regular-clr;
    cursor: not-allowed !important;
    &:hover {
      background-color: $white;
    }
  }
}

.ghost-btn {
  padding: 5px 10px;
  @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
  background-color: transparent;
  border: none;
  border-radius: $radius-4;
  transition: all 0.2s linear;
  white-space: nowrap;
  &:hover {
    color: $primary-text-clr;
    background: $grey-light-clr;
    transform: scale(1.05);
  }
  &:focus {
    outline: 3px auto rgba(47, 128, 237, 0.3);
  }
  &.disabled {
    color: $disabled-clr;
    background: $grey-light-clr;
    border: none;
    cursor: not-allowed !important;
    &:hover {
      background-color: $grey-light-clr;
    }
  }
}

.text-btn {
  border: none;
  background-color: transparent;
  white-space: nowrap;
  &:focus {
    outline: none;
  }
}