.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: rgba(0, 0, 0, .35);
  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;
  }
}

.buttons--sync {
  // bottom: 1px;
  padding: .5rem;
  opacity: 0;
  // position: absolute;
  // right: 1px;
  transition: opacity ease-in-out .25s;
}

@media screen and (max-width: 991px) {
  .buttons--sync {
    bottom: 1px;
    position: absolute;
    right: 1px;
  }
}

.buttons--sync:hover,
.buttons--sync:focus {
  border-color: rgba(0, 86, 179, .65);
  border-style: solid;
  border-width: 1px;
}


@keyframes show {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.buttons--sync--preview {
  animation-name: show;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}

.alert:hover .buttons--sync,
.alert:focus .buttons--sync,
.buttons--sync:focus,
.buttons--sync:focus-visible {
  opacity: 1;
}

.buttons--sync:focus-visible,
.buttons__action:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

.buttons--sync--visible {
  opacity: 1;
}