//** Init | Mixins

// Darken Color

/** We need to use this since CSS variables can't use darken/lighten sass functions **/

@mixin darken($color, $level) {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, $level),
      rgba(0, 0, 0, $level)
    )
    var($color);
}

@mixin button-css-variable($color) {
  background-color: var(--#{$color});
  border-color: var(--#{$color});
  // hover
  &:hover {
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);
  }
  // focus
  &:focus,
  &.focus {
    box-shadow: none;
  }

  // disabled
  &.disabled,
  &:disabled {
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);

    &:focus {
      box-shadow: none;
    }
  }
}

@mixin button-outline-css-variable($color) {
  color: var(--#{$color});
  border-color: var(--#{$color});

  // hover
  &:hover {
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);
  }
  // focus
  &:focus,
  &.focus {
    box-shadow: none;
  }

  // disabled
  &.disabled,
  &:disabled {
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);

    &:focus {
      box-shadow: none;
    }
  }
}

@mixin generate-color($color, $h, $s, $l) {
  --#{"" + $color}-h: #{$h};
  --#{"" + $color}-s: #{$s};
  --#{"" + $color}-l: #{$l};
  --#{"" + $color}-100: hsl(var(--#{"" + $color}-h), var(--#{"" + $color}-s), calc(var(--#{"" + $color}-l) * 2.3));
  --#{"" + $color}-200: hsl(var(--#{"" + $color}-h), calc(var(--#{"" + $color}-s) / 1.75), calc(var(--#{"" + $color}-l) * 2.2));
  --#{"" + $color}-300: hsl(var(--#{"" + $color}-h), var(--#{"" + $color}-s), calc(var(--#{"" + $color}-l) * 1.75));
  --#{"" + $color}-400: hsl(var(--#{"" + $color}-h), var(--#{"" + $color}-s), calc(var(--#{"" + $color}-l) * 1.25));
  --#{"" + $color}: hsl(var(--#{"" + $color}-h), var(--#{"" + $color}-s), var(--#{"" + $color}-l));
  --#{"" + $color}-600: hsl(var(--#{"" + $color}-h), var(--#{"" + $color}-s), calc(var(--#{"" + $color}-l) * 0.85));
  --#{"" + $color}-700: hsl(var(--#{"" + $color}-h), var(--#{"" + $color}-s), calc(var(--#{"" + $color}-l) * 0.5));
}
