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

@import '../../styles/core/mixins';

@mixin button-hero() {
  [elButton].appearance-hero {
    text-shadow: el-theme(button-hero-text-shadow);
    text-transform: el-theme(button-hero-text-transform);

    @each $size in el-get-sizes() {
      &.size-#{$size} {
        padding: el-theme(button-hero-#{$size}-padding);
      }
    }

    @each $status in el-get-statuses() {
      &.status-#{$status} {
        $left-color: el-theme(button-hero-#{$status}-left-background-color);
        $right-color: el-theme(button-hero-#{$status}-right-background-color);
        $bevel: el-theme(button-hero-bevel-size) el-theme(button-hero-#{$status}-bevel-color);
        $glow: el-theme(button-hero-glow-size) el-theme(button-hero-#{$status}-glow-color);
        $shadow: el-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: el-theme(button-hero-#{$status}-text-color);

        &:focus {
          $left-focus-color: el-theme(button-hero-#{$status}-focus-left-background-color);
          $right-focus-color: el-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 el-theme(button-hero-outline-width) el-theme(button-hero-outline-color);
        }

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

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

        &[disabled] {
          background-color: el-theme(button-hero-#{$status}-disabled-background-color);
          background-image: none;
          color: el-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;
          }
        }
      }
    }
  }
}