@import "../settings.colors";
@import "../settings.button-colors";

@import "tools.functions";

// Generates selectors for a single button type
// These styles should be included inside a .c-button{} selector block

@mixin c-button-styles($bg, $text: $color-grey-660, $transform: null) {
  $bg-base: $bg;
  $bg-default: null;
  $bg-default-override: null;
  $bg-hover: null;
  $bg-active: null;
  $bg-disabled: $color-white;

  $text-base: $text;
  $text-default: null;
  $text-hover: null;
  $text-active: null;
  $text-disabled: $color-grey-200;

  $border: $color-stone-200;

  // In cases where we want the button to appear white by default then become
  // some other colour on hover, we're unable to use white as the base colour
  // because darkening white results in a grey/black colour, which may not be
  // what we want. So, we must use a lighter tint of the desired hover colour
  // as the base, then override the default background colour later (see below).
  @if (type-of($bg-base) == string and str-index($bg-base, "white-primary") == 1) {
    $bg-default-override: $color-white;
  }

  // If the background colour is provided as a string instead of a colour,
  // attempt to retrieve the matching colour from the $c-button-colors map
  @if (type-of($bg-base) == string) {
    $col: map-get($c-button-colors, $bg-base);
    @if ($col) {
      $bg-base: $col;
    }
  }

  // Background colours for hover and active states
  @if ($transform == "opacity") {
    $bg-default: rgba($bg-base, 0.15);
    $bg-hover: rgba($bg-base, 0.25);
    $bg-active: rgba($bg-base, 0.35);
  } @else {
    $bg-default: $bg-base;
    $bg-hover: darken($bg-base, 8%);
    $bg-active: darken($bg-base, 16%);
  }

  // Text colours for hover and active states
  @if ($transform == "opacity") {
    $text-default: $color-white;
    $text-hover: $color-white;
    $text-active: $color-white;
  } @else {
    // Decide whether the text should be light or dark
    @if ($text-base == $color-grey-660 and contrast($bg-base, $text-base) < 4.5) {
      // If the default text colour is being used (i.e. a custom value has not
      // been provided) and it does not have sufficient contrast when placed
      // over top of the given background colour, force the text to be white
      $text-default: $color-white;
      $text-hover: rgba($text-default, 0.75);
      $text-active: rgba($text-default, 0.45);
    } @else {
      $text-default: $text-base;
      $text-hover: darken($text-default, 15%);
      $text-active: darken($text-default, 25%);
    }
    // Warn developers when colour contrast is insufficient
    $contrast: contrast($bg-base, $text-default);
    @if ($contrast < 4.5) { // WCAG-2.0 Level AA
      @warn "Insufficient button colour contrast (bg: #{$bg-base} text: #{$text-default}): #{$contrast} ❌";
    }
  }

  // Button styles
  @if ($bg-default-override) {
    background-color: $bg-default-override;
  } @else {
    background-color: $bg-default;
  }
  color: $text-default;
  border-color: $border;
  .c-button__icon {
    fill: $text-default;
  }
  &:hover,
  &:focus {
    background-color: $bg-hover;
    color: $text-hover;
    border-color: $border;
    .c-button__icon {
      fill: $text-hover;
    }
  }
  &:active {
    background-color: $bg-active;
    color: $text-active;
    border-color: $border;
    .c-button__icon {
      fill: $text-active;
    }
  }
  &[disabled], // for anchors
  &:disabled {
    background-color: $bg-disabled;
    color: $text-disabled;
    border-color: $border;
    .c-button__icon {
      fill: $text-disabled;
    }
  }
}
