@use "../variables/colors";

// Regular solid buttons
@mixin button-variant($color, $hover-alpha: 1) {
  $var-color: colors.color($color);
  $var-color-rgb: colors.color($color, true);
  color: colors.color($color + '-contrast');
  background-color: $var-color;
  border-color: $var-color;
  border-radius: var(--dnn-controls-radius, 0);
  display: inline-block;
  font-weight: bold;
  padding: calc(var(--dnn-controls-padding, .5rem) * 1.25) calc(var(--dnn-controls-padding, .5rem) * 4);
  &:hover, &:focus {
    color: colors.color($color + '-contrast');
    background-color: rgba($var-color-rgb, $hover-alpha);
    border-color: rgba($var-color-rgb, $hover-alpha);
  }
}

// Outline buttons
@mixin button-outline-variant($color) {
  $var-color: colors.color($color);
  $var-color-contrast: colors.color($color + '-contrast');
  color: $var-color;
  background-color: transparent;
  border-color: $var-color;
  border-radius: var(--dnn-controls-radius, 0);
  display: inline-block;
  font-weight: bold;
  padding: calc(var(--dnn-controls-padding, .5rem) * 1.25) calc(var(--dnn-controls-padding, .5rem) * 4);
  &:hover, &:focus {
    color: $var-color-contrast;
    background-color: $var-color;
    border-color: $var-color;
  }
}

// Reverse outline to solid buttons
@mixin button-reverse-outline-variant($color) {
  $var-color: colors.color($color);
  $var-color-contrast: colors.color($color + '-contrast');
  color: $var-color-contrast;
  background-color: $var-color;
  background-image: none;
  border-color: $var-color;
  border-radius: var(--dnn-controls-radius, 0);
  display: inline-block;
  font-weight: bold;
  padding: calc(var(--dnn-controls-padding, .5rem) * 1.25) calc(var(--dnn-controls-padding, .5rem) * 4);
  &:hover, &:focus {
    color: $var-color;
    background-color: transparent;
    border-color: $var-color;
  }
}

// Inverse buttons to white background and colored text
@mixin button-inverse-variant($color, $hover-alpha: 1) {
  $var-color: colors.color($color);
  $var-color-contrast: colors.color($color + '-contrast');
  $var-color-rgb: colors.color($color, true);
  color: $var-color;
  background-color: $var-color-contrast;
  background-image: none;
  border-color: $var-color-contrast;
  border-radius: var(--dnn-controls-radius, 0);
  display: inline-block;
  font-weight: bold;
  padding: calc(var(--dnn-controls-padding, .5rem) * 1.25) calc(var(--dnn-controls-padding, .5rem) * 4);
  &:hover, &:focus {
    color: $color;
    background-color: rgba($var-color-rgb, $hover-alpha);
    border-color: rgba($var-color-rgb, $hover-alpha);
  }
}

// button iterations for each color
@each $color, $value in colors.$colors {
  .aperture-btn-#{$color}, a.aperture-btn-#{$color} {
    @include button-variant($color,.8);
  }
  .aperture-btn-outline-#{$color}, a.aperture-btn-outline-#{$color} {
    @include button-outline-variant($color);
  }
  .aperture-btn-reverse-outline-#{$color} a.aperture-btn-reverse-outline-#{$color} {
    @include button-reverse-outline-variant($color);
  }
  .aperture-btn-inverse-#{$color}, a.aperture-btn-inverse-#{$color} {
    @include button-inverse-variant($color,.9);
  }
}