@use '../0-tools/vars' as *;

.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom {
  background-color: $primary-red;
  color: $white;
  &:hover {
    background-color: $primary-blue;
  }
}

.buttons__yt-subscribe {
  display: inline-block;
  height: 1rem;
  margin-top: -4px;
  margin-right: 5px;
  transform: scale(1.8,1.8);
  vertical-align: middle;
  width: 1rem;
}

.buttons__custom-danger {
  margin-right: 20px;
}

.buttons__btn-margin-top {
  margin-top: 20px;
}

.btn-primary {
  background-color: $btn-primary-bg;
  border-color: $btn-primary-border;
}

.btn-primary:hover {
  background-color: $btn-hover-bg;
  border-color: $btn-hover-border;
}

.buttons__no-decoration {
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }
  &:focus {
    text-decoration: none;
  }
  &:visited {
    text-decoration: none;
  }
}

.buttons{
  display: inline-block;
  padding-left: .9rem;
  padding-right: .9rem;
  padding-top: .125rem;
  padding-bottom: .125rem;
  &__my-kcc {
    border-color: $color-blue-grey;
    padding-top: .125rem;
    padding-bottom: .125rem;
    margin-top: 0.25rem;
    margin-bottom: .375rem;
    &--mobile {
      position: absolute;
      bottom: .65rem;
      left: 1rem;
    }
  }
}

@media screen and (min-width: 992px) {
  .buttons__my-kcc:hover,
  .buttons__my-kcc:focus {
    //color: $white;
    background-color: #0c3050;
  }
}

@media screen and (max-width: 992px) {
  .buttons__my-kcc:hover,
  .buttons__my-kcc:focus {
    color: $primary-red;
  }
}

.buttons__action {
  color: $white;
  background-color: $primary-red;
  border-color: $color-red-darker;
  font-family: $font-family-headings;
  font-size: 1.3rem;
  font-weight: $font-weight-bolder; //dash
  line-height: 36px;
  letter-spacing: .075rem;
  width: 100%;
  &:hover,
  &:focus {
    color: $white;
    background-color: $primary-blue;
  }
}

@media screen and (min-width: 360px) {
  .buttons__action {
    font-size: 1.75rem;
    line-height: 48px;
  }
}

@media screen and (min-width: 768px) {
  .buttons__action {
    font-size: 1.3rem;
    line-height: 36px;
  }
}

@media screen and (min-width: 992px) {
  .buttons__action {
    font-size: 1.75rem;
    line-height: 48px;
  }
}