@use "sass:math";
@use "../settings" as *;
@use "./functions" as *;

////
/// Buttons
///
/// @group tools
////

/// Button styling with colour overrides
///
/// @param {Colour} $button-colour [$nhsuk-secondary-button-colour] - Button background colour
/// @param {Colour} $button-hover-colour [null] - Button hover background colour
/// @param {Colour} $button-active-colour [null] - Button active background colour
/// @param {Colour} $button-text-colour [$nhsuk-secondary-button-text-colour] - Button text colour
/// @param {Colour} $button-shadow-colour [$nhsuk-secondary-button-shadow-colour] - Button shadow colour
/// @param {Colour} $button-border-colour [null] - Button border colour (optional, e.g. secondary button)
/// @param {Number} $button-border-radius [$nhsuk-button-border-radius] - Button border radius
///

@mixin nhsuk-button-style(
  $button-colour: $nhsuk-secondary-button-colour,
  $button-hover-colour: null,
  $button-active-colour: null,
  $button-text-colour: $nhsuk-secondary-button-text-colour,
  $button-shadow-colour: $nhsuk-secondary-button-shadow-colour,
  $button-border-colour: null,
  $button-border-radius: $nhsuk-button-border-radius
) {
  background-color: $button-colour;
  box-shadow: 0 $nhsuk-button-shadow-size 0 $button-shadow-colour;

  &,
  &:visited,
  &:hover,
  &:active {
    color: $button-text-colour;
  }

  &[href]:not(:focus) .nhsuk-icon {
    fill: $button-text-colour;

    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
      fill: currentcolor;
    }
  }

  &:hover {
    @if $button-hover-colour {
      background-color: $button-hover-colour;
    } @else {
      background-color: $button-colour;
    }
  }

  &:active,
  &:active:focus {
    @if $button-active-colour {
      background-color: $button-active-colour;
    } @else {
      background-color: $button-colour;
    }
  }

  // Override default border radius
  @if $button-border-radius != $nhsuk-button-border-radius {
    &,
    &::before,
    &::after {
      border-radius: nhsuk-px-to-rem($button-border-radius);
    }
  }

  // Handle shadow on both the button and the pseudo element. The button shadow
  // remains in place to prevent any pixel gaps due to browser rounding
  @if $button-border-colour {
    &,
    &::after {
      box-shadow: 0 $nhsuk-button-shadow-size 0 $button-shadow-colour;
    }

    &:active,
    &:active:focus,
    // Set border on click area for default and hover states which allows the
    // border to render underneath the shadow and hide pixel artifacts, but
    // ensuring the active "pressed" and focus states have priority
    &:not(:focus):not(:active)::before {
      border-color: $button-border-colour;

      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
        border-color: ButtonBorder;
      }
    }

    // Inset the pseudo element shadow away from the edges, to restore lost
    // border radius (and its shadow) previously hidden by the 2px border
    &:not(:focus)::after {
      right: 0;
      left: 0;
      border-radius: nhsuk-px-to-rem($button-border-radius - $nhsuk-border-width-form-element);
    }

    // Remove the pseudo element shadow when focused or pressed
    &:focus::after,
    &:active::after {
      box-shadow: none;
    }
  }

  // Override high-contrast button colours back to defaults
  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
    &,
    &:visited,
    &:hover,
    &:active {
      color: ButtonText;
    }

    &,
    &:hover,
    &:active,
    &:active:focus {
      background-color: ButtonFace;
    }
  }
}