/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@use '../../theme/styles/theming' as *;

@mixin b-btn-hero($status) {
  $left-color: nb-theme(button-hero-#{$status}-left-background-color);
  $right-color: nb-theme(button-hero-#{$status}-right-background-color);
  $bevel: nb-theme(button-hero-bevel-size) nb-theme(button-hero-#{$status}-bevel-color);
  $glow: nb-theme(button-hero-glow-size) nb-theme(button-hero-#{$status}-glow-color);
  $shadow: nb-theme(button-hero-shadow);
  $hero-box-shadows: $bevel, $glow, $shadow;

  background-image: linear-gradient(to right, $left-color, $right-color);
  border: none;
  box-shadow: $hero-box-shadows;
  color: nb-theme(button-hero-#{$status}-text-color);

  &:focus {
    $left-focus-color: nb-theme(button-hero-#{$status}-focus-left-background-color);
    $right-focus-color: nb-theme(button-hero-#{$status}-focus-right-background-color);
    background-image: linear-gradient(to right, $left-focus-color, $right-focus-color);
    box-shadow: $hero-box-shadows, 0 0 0 nb-theme(button-hero-outline-width) nb-theme(button-hero-outline-color);
  }

  &:hover {
    $left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
    $right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
    background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
  }

  &:active {
    $left-active-color: nb-theme(button-hero-#{$status}-active-left-background-color);
    $right-active-color: nb-theme(button-hero-#{$status}-active-right-background-color);
    background-image: linear-gradient(to right, $left-active-color, $right-active-color);
  }

  &[disabled] {
    background-color: nb-theme(button-hero-#{$status}-disabled-background-color);
    background-image: none;
    color: nb-theme(button-hero-#{$status}-disabled-text-color);
  }

  &.button-pulse {
    animation: button-hero-#{$status}-pulse 0.75s infinite alternate;
  }

  @include keyframes(button-hero-#{$status}-pulse) {
    0% {
      box-shadow: none;
      opacity: 0.3;
    }

    100% {
      box-shadow: 0 0 1rem 0 $left-color;
      opacity: 0.8;
    }
  }
}

@mixin b-btn-heros() {
  .btn.btn-hero-primary {
    @include b-btn-hero(primary);
  }

  .btn.btn-hero-success {
    @include b-btn-hero(success);
  }

  .btn.btn-hero-warning {
    @include b-btn-hero(warning);
  }

  .btn.btn-hero-info {
    @include b-btn-hero(info);
  }

  .btn.btn-hero-danger {
    @include b-btn-hero(danger);
  }
}