@import 'mixin.scss';
@include export-module('button-theme') {
  /*! button theme */
  // sass-lint:disable no-vendor-prefixes
  #{&}.e-btn,
  .e-css.e-btn {
    -webkit-tap-highlight-color: transparent;
    background-color: $btn-bgcolor;
    border-color: $btn-border-color;
    box-shadow: $btn-box-shadow;
    color: $btn-color;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
    @at-root {
      &:hover {
        background-color: $btn-hover-bgcolor;
        border-color: $btn-hover-border-color;
        box-shadow: $btn-hover-focus-box-shadow;
        color: $btn-hover-color;
      }

      &:focus {
        @include button-focus;
      }

      &:active {
        @include button-active;
      }

      &.e-active {
        background-color: $btn-active-bgcolor;
        border-color: $btn-active-border-color;
        box-shadow: $btn-active-box-shadow;
        color: $btn-active-color;
      }

      &:disabled {
        background-color: $btn-disabled-bgcolor;
        border-color: $btn-disabled-border-color;
        box-shadow: $btn-flat-box-shadow;
        color: $btn-disabled-color;
      }

      & .e-ripple-element {
        background-color: $btn-ripple-bgcolor;
      }

      &.e-round {
        background-color: $btn-round-bgcolor;
        border-color: $btn-round-border-color;
        color: $btn-round-color;

        &:hover {
          background-color: $btn-round-hover-bgcolor;
          border-color: $btn-round-hover-border-color;
          color: $btn-round-hover-color;
        }

        &:focus {
          background-color: $btn-focus-bgcolor;
          border-color: $btn-focus-border-color;
          box-shadow: $btn-box-shadow;
          color: $btn-round-focus-color;
          outline: $btn-focus-outline-round;
          outline-offset: $btn-focus-outline-offset;
        }

        &:active {
          background-color: $btn-active-bgcolor;
          border-color: $btn-active-border-color;
          box-shadow: $btn-active-box-shadow;
          color: $btn-round-active-color;
          outline: $btn-active-outline;
          outline-offset: $btn-active-outline-offset;
        }

        &:disabled {
          background-color: $btn-disabled-bgcolor;
          border-color: $btn-disabled-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-disabled-color;
        }

        &.e-primary {
          &:focus {
            outline: $btn-focus-outline-round;
          }
        }

        &.e-success {
          &:focus {
            outline: $btn-focus-outline-round;
          }
        }

        &.e-info {
          &:focus {
            outline: $btn-focus-outline-round;
          }
        }

        &.e-warning {
          &:focus {
            outline: $btn-focus-outline-round;
           }
        }

        &.e-danger {
          &:focus {
            outline: $btn-focus-outline-round;
          }
        }
      }

      &.e-primary {
        background-color: $btn-primary-bgcolor;
        border-color: $btn-primary-border-color;
        color: $btn-primary-color;

        &:hover {
          background-color: $btn-primary-hover-bgcolor;
          border-color: $btn-primary-hover-border-color;
          box-shadow: $btn-hover-focus-box-shadow;
          color: $btn-primary-hover-color;
        }

        &:focus {
          @include  primary-focus;
        }

        &:active {
          @include primary-active;
        }

        &.e-active {
          background-color: $btn-primary-active-bgcolor;
          border-color: $btn-primary-active-border-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-primary-active-color;
        }

        &:disabled {
          @include primary-disabled;
        }

        & .e-ripple-element {
          background-color: $btn-ripple-primary-bgcolor;
        }
      }

      &.e-success {
        background-color: $btn-success-bgcolor;
        border-color: $btn-success-border-color;
        color: $btn-success-color;

        &:hover {
          background-color: $btn-success-hover-bgcolor;
          border-color: $btn-success-hover-border-color;
          box-shadow: $btn-hover-focus-box-shadow;
          color: $btn-success-hover-color;
        }

        &:focus {
          @include success-focus;
        }

        &:active,
        &.e-active {
          @include success-active;
        }

        &:disabled {
          @include success-disabled;
        }

        & .e-ripple-element {
          background-color: $btn-ripple-success-bgcolor;
        }
      }

      &.e-info {
        background-color: $btn-info-bgcolor;
        border-color: $btn-info-border-color;
        color: $btn-info-color;

        &:hover {
          background-color: $btn-info-hover-bgcolor;
          border-color: $btn-info-hover-border-color;
          box-shadow: $btn-hover-focus-box-shadow;
          color: $btn-info-hover-color;
        }

        &:focus {
          @include info-focus;
        }

        &:active,
        &.e-active {
          @include info-active;
        }

        &:disabled {
          @include info-disabled;
        }

        & .e-ripple-element {
          background-color: $btn-ripple-info-bgcolor;
        }
      }

      &.e-warning {
        background-color: $btn-warning-bgcolor;
        border-color: $btn-warning-border-color;
        color: $btn-warning-color;

        &:hover {
          background-color: $btn-warning-hover-bgcolor;
          border-color: $btn-warning-hover-border-color;
          box-shadow: $btn-hover-focus-box-shadow;
          color: $btn-warning-hover-color;
        }

        &:focus {
          @include warning-focus;
        }

        &:active,
        &.e-active {
          @include warning-active;
        }

        &:disabled {
          @include warning-disabled;
        }

        & .e-ripple-element {
          background-color: $btn-ripple-warning-bgcolor;
        }
      }

      &.e-danger {
        background-color: $btn-danger-bgcolor;
        border-color: $btn-danger-border-color;
        color: $btn-danger-color;

        &:hover {
          background-color: $btn-danger-hover-bgcolor;
          border-color: $btn-danger-hover-border-color;
          box-shadow: $btn-hover-focus-box-shadow;
          color: $btn-danger-hover-color;
        }

        &:focus {
          @include danger-focus;
        }

        &:active {
          @include danger-active;
        }

        &.e-active {
          background-color: $btn-danger-active-bgcolor;
          border-color: $btn-danger-active-border-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-danger-active-color;
        }

        &:disabled {
          @include danger-disabled;
        }

        & .e-ripple-element {
          background-color: $btn-ripple-danger-bgcolor;
        }
      }

      &.e-flat {
        background-color: $btn-flat-bgcolor;
        border-color: $btn-flat-border-color;
        box-shadow: $btn-flat-box-shadow;
        color: $btn-flat-color;

        &:hover {
          background-color: $btn-flat-hover-bgcolor;
          border-color: $btn-flat-hover-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-flat-hover-color;
        }

        &:focus {
          background-color: $btn-flat-focus-bgcolor;
          border-color: $btn-flat-focus-border-color;
          color: $btn-flat-focus-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(mix(lighten($btn-flat-focus-bgcolor, 50%), $btn-flat-focus-border-color, .15), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else {
            box-shadow: $btn-flat-box-shadow;
          }
        }

        &:active,
        &.e-active {
          background-color: $btn-flat-active-bgcolor;
          border-color: $btn-flat-active-border-color;
          color: $btn-flat-active-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(mix(lighten($btn-flat-active-bgcolor, 50%), $btn-flat-active-border-color, .15), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else {
            box-shadow: $btn-flat-active-box-shadow;
          }
        }

        &:disabled {
          background-color: $btn-flat-disabled-bgcolor;
          border-color: $btn-flat-disabled-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-flat-disabled-color;
        }

        & .e-ripple-element {
          background-color: $btn-ripple-flat-bgcolor;
        }

        &.e-primary {
          background-color: $btn-flat-primary-bgcolor;
          border-color: $btn-flat-primary-border-color;
          color: $btn-flat-primary-color;

          &:hover {
            background-color: $btn-flat-primary-hover-bgcolor;
            border-color: $btn-flat-primary-hover-border-color;
            color: $btn-flat-primary-hover-color;
          }

          &:focus {
            background-color: $btn-flat-primary-focus-bgcolor;
            border-color: $btn-flat-primary-focus-border-color;
            color: $btn-flat-primary-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-primary-focus-bgcolor, 50%), $btn-flat-primary-focus-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
          }

          &:active,
          &.e-active {
            background-color: $btn-flat-primary-active-bgcolor;
            border-color: $btn-flat-primary-active-border-color;
            color: $btn-flat-primary-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-primary-active-bgcolor, 50%), $btn-flat-primary-active-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
          }

          &:disabled {
            background-color: $btn-flat-primary-disabled-bgcolor;
            border-color: $btn-flat-primary-disabled-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-primary-disabled-color;
          }

          & .e-ripple-element {
            background-color: $btn-ripple-flat-primary-bgcolor;
          }
        }

        &.e-success {
          background-color: $btn-flat-success-bgcolor;
          border-color: $btn-flat-success-border-color;
          color: $btn-flat-success-color;

          &:hover {
            background-color: $btn-flat-success-hover-bgcolor;
            border-color: $btn-flat-success-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-success-hover-color;
          }

          &:focus {
            background-color: $btn-flat-success-focus-bgcolor;
            border-color: $btn-flat-success-focus-border-color;
            color: $btn-flat-success-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-success-focus-bgcolor, 50%), $btn-flat-success-focus-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background-color: $btn-flat-success-active-bgcolor;
            border-color: $btn-flat-success-active-border-color;
            color: $btn-flat-success-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-success-active-bgcolor, 50%), $btn-flat-success-active-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled {
            background-color: $btn-flat-success-disabled-bgcolor;
            border-color: $btn-flat-success-disabled-border-color;
            color: $btn-flat-success-disabled-color;
          }

          & .e-ripple-element {
            background-color: $btn-ripple-flat-success-bgcolor;
          }
        }

        &.e-info {
          background-color: $btn-flat-info-bgcolor;
          border-color: $btn-flat-info-border-color;
          color: $btn-flat-info-color;

          &:hover {
            background-color: $btn-flat-info-hover-bgcolor;
            border-color: $btn-flat-info-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-info-hover-color;
          }

          &:focus {
            background-color: $btn-flat-info-focus-bgcolor;
            border-color: $btn-flat-info-focus-border-color;
            color: $btn-flat-info-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-info-focus-bgcolor, 50%), $btn-flat-info-focus-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background-color: $btn-flat-info-active-bgcolor;
            border-color: $btn-flat-info-active-border-color;
            color: $btn-flat-info-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-info-active-bgcolor, 50%), $btn-flat-info-active-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled {
            background-color: $btn-flat-info-disabled-bgcolor;
            border-color: $btn-flat-info-disabled-border-color;
            color: $btn-flat-info-disabled-color;
          }

          & .e-ripple-element {
            background-color: $btn-ripple-flat-info-bgcolor;
          }
        }

        &.e-warning {
          background-color: $btn-flat-warning-bgcolor;
          border-color: $btn-flat-warning-border-color;
          color: $btn-flat-warning-color;

          &:hover {
            background-color: $btn-flat-warning-hover-bgcolor;
            border-color: $btn-flat-warning-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-warning-hover-color;
          }

          &:focus {
            background-color: $btn-flat-warning-focus-bgcolor;
            border-color: $btn-flat-warning-focus-border-color;
            color: $btn-flat-warning-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-warning-focus-bgcolor, 50%), $btn-flat-warning-focus-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background-color: $btn-flat-warning-active-bgcolor;
            border-color: $btn-flat-warning-active-border-color;
            color: $btn-flat-warning-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-warning-active-bgcolor, 50%), $btn-flat-warning-active-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled {
            background-color: $btn-flat-warning-disabled-bgcolor;
            border-color: $btn-flat-warning-disabled-border-color;
            color: $btn-flat-warning-disabled-color;
          }

          & .e-ripple-element {
            background-color: $btn-ripple-flat-warning-bgcolor;
          }
        }

        &.e-danger {
          background-color: $btn-flat-danger-bgcolor;
          border-color: $btn-flat-danger-border-color;
          color: $btn-flat-danger-color;

          &:hover {
            background-color: $btn-flat-danger-hover-bgcolor;
            border-color: $btn-flat-danger-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-danger-hover-color;
          }

          &:focus {
            background-color: $btn-flat-danger-focus-bgcolor;
            border-color: $btn-flat-danger-focus-border-color;
            color: $btn-flat-danger-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-danger-focus-bgcolor, 50%), $btn-flat-danger-focus-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background-color: $btn-flat-danger-active-bgcolor;
            border-color: $btn-flat-danger-active-border-color;
            color: $btn-flat-danger-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(mix(lighten($btn-flat-danger-active-bgcolor, 50%), $btn-flat-danger-active-border-color, .15), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled {
            background-color: $btn-flat-danger-disabled-bgcolor;
            border-color: $btn-flat-danger-disabled-border-color;
            color: $btn-flat-danger-disabled-color;
          }

          & .e-ripple-element {
            background-color: $btn-ripple-flat-danger-bgcolor;
          }
        }
      }

      &.e-outline {
        background-color: $btn-outline-bgcolor;
        border-color: $btn-outline-border-color;
        box-shadow: $btn-flat-box-shadow;
        color: $btn-outline-color;

        &:hover {
          @if $skin-name == 'bootstrap4' {
            background-color: $btn-bgcolor;
          }
          @else {
            background-color: $btn-outline-hover-bgcolor;
          }
          border-color: $btn-outline-hover-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-outline-hover-color;
        }

        &:focus {
          @include outline-focus;
        }

        &:active,
        &.e-active {
          @include outline-active;
        }

        &:disabled {
          @include outline-disabled;
        }

        &.e-primary {
          background-color: $btn-outline-bgcolor;
          border-color: $btn-outline-primary-color;
          color: $btn-outline-primary-color;

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background-color: $btn-primary-bgcolor;
            }
            @else {
              background-color: $btn-primary-hover-bgcolor;
            }
            border-color: $btn-outline-primary-hover-border-color;
            color: $btn-primary-hover-color;
          }

          &:focus {
            @include outline-primary-focus;
          }

          &:active,
          &.e-active {
            @include outline-primary-active;
          }

          &:disabled {
            @include outline-primary-disabled;
          }
        }

        &.e-success {
          background-color: $btn-outline-bgcolor;
          border-color: $btn-success-bgcolor;
          color: $btn-success-bgcolor;

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background-color: $btn-success-bgcolor;
            }
            @else {
              background-color: $btn-success-hover-bgcolor;
            }
            border-color: $btn-success-hover-border-color;
            color: $btn-success-color;
          }

          &:focus {
            @include outline-success-focus;
          }

          &:active,
          &.e-active {
            @include outline-success-active;
          }

          &:disabled {
            @include outline-success-disabled;
          }
        }

        &.e-info {
          background-color: $btn-outline-bgcolor;
          border-color: $btn-info-bgcolor;
          color: $btn-info-bgcolor;

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background-color: $btn-info-bgcolor;
            }
            @else {
              background-color: $btn-info-hover-bgcolor;
            }
            border-color: $btn-info-hover-border-color;
            color: $btn-info-color;
          }

          &:focus {
            @include outline-info-focus;
          }

          &:active,
          &.e-active {
            @include outline-info-active;
          }

          &:disabled {
            @include outline-info-disabled;
          }
        }

        &.e-warning {
          background-color: $btn-outline-bgcolor;
          border-color: $btn-warning-bgcolor;
          color: $btn-warning-bgcolor;

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background-color: $btn-warning-bgcolor;
            }
            @else {
              background-color: $btn-warning-hover-bgcolor;
            }
            border-color: $btn-warning-hover-border-color;
            color: $btn-warning-color;
          }

          &:focus {
            @include outline-warning-focus;
          }

          &:active,
          &.e-active {
            @include outline-warning-active;
          }

          &:disabled {
            @include outline-warning-disabled;
          }
        }

        &.e-danger {
          background-color: $btn-outline-bgcolor;
          border-color: $btn-danger-bgcolor;
          color: $btn-danger-bgcolor;

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background-color: $btn-danger-bgcolor;
            }
            @else {
              background-color: $btn-danger-hover-bgcolor;
            }
            border-color: $btn-danger-hover-border-color;
            color: $btn-danger-color;
          }

          &:focus {
            @include outline-danger-focus;
          }

          &:active,
          &.e-active {
            @include outline-danger-active;
          }

          &:disabled {
            @include outline-danger-disabled;
          }
        }
      }

      &.e-link {
        background-color: $btn-link-bgcolor;
        border-color: $btn-link-border-color;
        border-radius: 0;
        box-shadow: none;
        color: $btn-link-color;

        &:hover {
          @include link-hover;
        }

        &:focus {
          @include link-focus;
        }

        &:disabled {
          @include link-disabled;
        }
      }
    }
  }
}