%btn-fill {
  @each $color, $value in $theme-colors {
    &:not(.download).#{$color}:not(.play).#{$color} {
      @include button-variant($value, $value);
    }
  }
}

%btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);

  @include hover() {
    color: $body-color;
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }

  &:not(:disabled):not(.disabled) {
    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);

    &:active,
    &.active {
      @include box-shadow($btn-active-box-shadow);

      &:focus {
        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
      }
    }
  }

  small {
    display: block;
    margin-bottom: 2px;
    text-transform: none;
  }

  //
  //@include button-outline-variant($gray-600);
  //
  //@each $color, $value in $theme-colors {
  //  &:not(.download).#{$color}:not(.play).#{$color}:not(.inverse).#{$color} {
  //    @include button-outline-variant($value);
  //  }
  //}
  //
  //@each $color, $value in $theme-colors {
  //  &:not(.download).#{$color}:not(.play).#{$color}.inverse {
  //    @include button-variant($value, $value);
  //    color: $white;
  //  }
  //}
  //
  //small {
  //  display: block;
  //  margin-bottom: 2px;
  //  text-transform: none;
  //}
  //
  //&.fill {
  //  @extend %btn-fill;
  //}
  //
  //&.more {
  //  position: relative;
  //  padding-right: 4.5em;
  //
  //  @include icon(arrow-alt-circle-right, after);
  //
  //  &::after {
  //    top: 50%;
  //    right: 2px;
  //    line-height: 1;
  //    font-size: 2.1em;
  //    position: absolute;
  //    transform: translateY(-50%);
  //  }
  //}
  //
  //&.download,
  //&.play {
  //  @each $color, $value in $theme-colors {
  //    &.#{$color} {
  //      @include button-variant($value, $value);
  //    }
  //  }
  //}

}


%btn-action-base {
  line-height: 1;
  position: relative;
  text-transform: uppercase;
  padding: 0.6em 4.0em 0.6em 1.2em;

  font: {
    size: $font-size-lg;
    weight: $font-weight-bold;
  }
}



%btn-download {
  @extend %btn-action-base;
  @include icon(download, after);

  &::after {
    float: right;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    position: absolute;
  }

  &--big {
    &::after {
      font-size: 3rem;
    }
  }
}

%btn-play {
  @extend %btn-action-base;
  @include icon(play, after);

  &::after {
    float: right;
    top: 8px;
    right: 20px;
    font-size: 2 * $font-size-lg;
    position: absolute;
  }
}

%btn-more {
  @extend %btn;
  position: relative;
  padding-right: 4.5em !important;

  @include icon(arrow-alt-circle-right, after);

  &::after {
    top: 50%;
    right: 2px;
    line-height: 1;
    font-size: 2.1em;
    position: absolute;
    transform: translateY(-50%);
  }
}

@each $color, $value in $theme-colors {
  %btn-#{$color} {
    @include button-variant($value, $value);
    color: $white;
  }

  %btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

@each $color, $value in $colors {
  %btn-#{$color} {
    @include button-variant($value, $value);
    color: $white;
  }

  %btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}




@mixin btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);

  @include hover() {
    color: $body-color;
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }

  &:not(:disabled):not(.disabled) {
    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);

    &:active,
    &.active {
      @include box-shadow($btn-active-box-shadow);

      &:focus {
        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
      }
    }
  }

  small {
    display: block;
    margin-bottom: 2px;
    text-transform: none;
  }
}

@mixin btn-lg {
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

@mixin btn-sm {
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}

@mixin btn-icon {
  position: relative;
  padding-right: 4.5em;

  &::after {
    top: 50%;
    right: 2px;
    font-size: 2.1em;
    line-height: 1;
    position: absolute;
    transform: translateY(-50%);
  }
}

@mixin btn-more {
  @include btn;
  @include btn-icon;
  @include icon(arrow-alt-circle-right, after);
}

@mixin btn-download {
  @include btn-icon;
  @include icon(arrow-alt-circle-right, after);

  line-height: 1;
  position: relative;
  text-transform: uppercase;
  font: {
    size: $font-size-lg;
    weight: $font-weight-bold;
  }

  padding: {
    top: 0.6em;
    left: 1.2em;
    right: 4.0em;
    bottom: 0.6em;
  }

  &::after {
    transform: translateY(-50%) rotate(90deg);
    float: right;
    top: 50%;
    right: 3px;
    font-size: 3rem;
    position: absolute;
  }
}