@use '../abstracts' as *;

.btn {
  @include btn-base;

  &--blue {
    background-color: $color-blue;
    color: $color-white;
  }

  &--red {
    background-color: $color-red;
    color: $color-white;
  }

  &--outline {
    background-color: transparent;
    border: 1px solid $color-blue;
    color: $color-blue;

    &:hover {
      background-color: $color-blue;
      color: $color-white;
      opacity: 1;
    }
  }

  &--sm {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }

  &--full {
    width: 100%;
  }

  &--lg {
    padding: 16px 32px;
    font-size: 16px;
  }

  // Кнопки на первом экране карточки врача
  &--doctor-cta {
    background-color: $color-doctor-cta;
    color: $color-white;
    border: 1px solid $color-doctor-cta;

    &:hover {
      opacity: 0.92;
    }
  }

  &--doctor-outline {
    background-color: transparent;
    border: 1px solid $color-doctor-cta;
    color: $color-doctor-cta;

    &:hover {
      background-color: rgba($color-doctor-cta, 0.06);
      color: $color-doctor-cta;
      opacity: 1;
    }
  }

  &--hero {
    min-height: 40px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: $radius-sm;
  }

}