// stylelint-disable declaration-no-important

@use "../settings" as *;
@use "../helpers" as *;
@use "sass-mq" as *;
@use "spacing" as *;
@use "typography" as *;

////
/// Mixins
///
/// @group tools
////

/// Clearfix mixin
///
/// @example scss
///   @include nhsuk-clearfix;
///

@mixin nhsuk-clearfix {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

/// Clearfix mixin (deprecated)
///
/// @alias nhsuk-clearfix
/// @deprecated To be removed in v11.0, replaced by nhsuk-clearfix

@mixin clearfix() {
  @include nhsuk-warning("clearfix", "clearfix is deprecated. Use nhsuk-clearfix instead.");
  @include nhsuk-clearfix;
}

/// Reading width mixin, add a maximum width
/// to large pieces of content
///
/// @example scss
///   @include nhsuk-reading-width;
///

@mixin nhsuk-reading-width {
  max-width: 44em;
}

/// Reading width mixin, add a maximum width
/// to large pieces of content (deprecated)
///
/// @alias nhsuk-reading-width
/// @deprecated To be removed in v11.0, replaced by nhsuk-reading-width

@mixin reading-width() {
  @include nhsuk-warning("reading-width", "reading-width is deprecated. Use nhsuk-reading-width instead.");
  @include nhsuk-reading-width;
}

/// Helper function containing the common code for the following two mixins
///
/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
///   - h5bp/html5-boilerplate - Thanks!
///
/// @param {Boolean} $important [true] - Whether to mark as `!important`
///
/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
///
/// @access private

@mixin _nhsuk-visually-hide-content($important: true) {
  $properties: (
    "position": absolute,

    "width": 1px,
    "height": 1px,

    // If margin is set to a negative value it can cause text to be announced in
    // the wrong order in VoiceOver for OSX
    "margin": 0,
    "padding": 0,

    "overflow": hidden,

    // `clip` is needed for IE11 support
    "clip": rect(0 0 0 0),
    "clip-path": inset(50%),
    "border": 0,

    // For long content, line feeds are not interpreted as spaces and small width
    // causes content to wrap 1 word per line:
    // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    "white-space": nowrap
  );

  // Workaround to avoid deprecated `if()` function
  @each $property, $value in $properties {
    @if $important == true {
      #{$property}: $value !important;
    } @else {
      #{$property}: $value;
    }
  }

  // Prevent users from selecting or copying visually-hidden text. This prevents
  // a user unintentionally copying more text than they intended and needing to
  // manually trim it down again.
  user-select: none;
}

/// Hide an element visually, but have it available for screen readers
///
/// @param {Boolean} $important [true] - Whether to mark as `!important`
///
/// @example scss
///   @include nhsuk-visually-hidden;
///

@mixin nhsuk-visually-hidden($important: true) {
  @include _nhsuk-visually-hide-content($important: $important);

  // Absolute positioning has the unintended consequence of removing any
  // whitespace surrounding visually hidden text from the accessibility tree.
  // Insert a space character before and after visually hidden text to separate
  // it from any visible text surrounding it.
  &::before {
    content: "\00a0";
  }

  &::after {
    content: "\00a0";
  }
}

/// Hide an element visually, but have it available for screen readers
/// (deprecated)
///
/// @alias nhsuk-visually-hidden
/// @deprecated To be removed in v11.0, replaced by nhsuk-visually-hidden

@mixin visually-hidden() {
  @include nhsuk-visually-hidden;
}

/// Hide an element visually, but have it available for screen readers whilst
/// allowing the element to be focused when navigated to via the keyboard (e.g.
/// for the skip link)
///
/// @param {Boolean} $important [true] - Whether to mark as `!important`
///
/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)

@mixin nhsuk-visually-hidden-focusable($important: true) {
  // IE 11 doesn't support the combined `:not(:active, :focus)` syntax.
  // Also allows for ':focus' companion classes from postcss-pseudo-classes
  // which the plugin unfortunately doesn't handle automatically.
  // stylelint-disable-next-line selector-class-pattern
  &:not(:active):not(:focus):not(.\:focus) {
    @include _nhsuk-visually-hide-content($important: $important);
  }
}

/// Hide an element visually, but have it available for screen readers whilst
/// allowing the element to be focused when navigated to via the keyboard (e.g.
/// for the skip link) (deprecated)
///
/// @alias nhsuk-visually-hidden-focusable
/// @deprecated To be removed in v11.0, replaced by nhsuk-visually-hidden-focusable

@mixin visually-hidden-focusable($args...) {
  @include nhsuk-warning(
    "visually-hidden-focusable",
    "visually-hidden-focusable is deprecated. Use nhsuk-visually-hidden-focusable instead."
  );
  @include nhsuk-visually-hidden-focusable($args...);
}

/// Show an element visually that has previously been hidden by visually-hidden
///
/// For differences between mobile and desktop views, use $display to set the CSS display property
///
/// @param {String} $display [null] - CSS display property (optional)
/// @param {Boolean} $important [true] - Whether to mark as `!important`
///
/// @deprecated To be removed in v11.0, use @media queries to apply `visually-hidden` instead

@mixin visually-shown($display: null, $important: true) {
  @include nhsuk-warning(
    "visually-shown",
    "visually-shown is deprecated. Use @media queries to apply `visually-hidden` instead."
  );

  $properties: (
    "position": static,

    "width": auto,
    "height": auto,
    "margin": 0,
    "padding": 0,

    "overflow": visible,

    "clip": auto,
    "clip-path": none,

    "border": none,

    "white-space": normal,
    "user-select": auto
  );

  // Workaround to avoid deprecated `if()` function
  @each $property, $value in $properties {
    @if $important == true {
      #{$property}: $value !important;
    } @else {
      #{$property}: $value;
    }
  }

  @if $display {
    display: $display;
  }
}

/// Top and bottom margin mixin, remove
/// the top and bottom margin spacing
///
/// @example scss
///   @include nhsuk-top-and-bottom;
///

@mixin nhsuk-top-and-bottom {
  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }
}

/// Top and bottom margin mixin, remove
/// the top and bottom margin spacing (deprecated)
///
/// @alias nhsuk-top-and-bottom
/// @deprecated To be removed in v11.0, replaced by nhsuk-top-and-bottom

@mixin top-and-bottom() {
  @include nhsuk-warning("top-and-bottom", "top-and-bottom is deprecated and will be removed in a future release.");
  @include nhsuk-top-and-bottom;
}

/// Panel mixin
///
/// See components/_panel
///
/// @param {Colour} $panel-background-colour - Panel background colour
/// @param {Colour} $panel-text-colour - Panel text colour
/// @param {Colour} $panel-border-colour [null] - Optional panel border colour
///
/// @example scss
///   @include nhsuk-panel($nhsuk-brand-colour, $nhsuk-reverse-text-colour, $nhsuk-reverse-border-colour);
///

@mixin nhsuk-panel($panel-background-colour, $panel-text-colour, $panel-border-colour: null) {
  box-sizing: border-box;
  @if $panel-border-colour {
    border: 1px solid $panel-border-colour;
  }
  color: $panel-text-colour;
  background-color: $panel-background-colour;

  @include nhsuk-top-and-bottom;
  @include nhsuk-responsive-margin(7, "bottom");

  @include nhsuk-media-query($media-type: print) {
    border: 1px solid $nhsuk-print-text-colour;
    page-break-inside: avoid;
  }
}

/// Panel mixin (deprecated)
///
/// @alias nhsuk-panel
/// @deprecated To be removed in v11.0, replaced by nhsuk-panel

@mixin panel($args...) {
  @include nhsuk-warning("panel", "panel is deprecated. Use nhsuk-panel instead.");
  @include nhsuk-panel($args...);
}

/// Panel with label mixin, inherits panel styling
/// and removes padding top for the label positioning
///
/// @param {Colour} $panel-background-colour - Panel background colour
/// @param {Colour} $panel-text-colour - Panel text colour
/// @param {Colour} $panel-border-colour - Panel border colour
///
/// @example scss
///   @include nhsuk-panel-with-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour, $nhsuk-reverse-border-colour);
///

@mixin nhsuk-panel-with-label($panel-background-colour, $panel-text-colour, $panel-border-colour) {
  padding-top: 0 !important;
  border: 1px solid $panel-border-colour;

  @include nhsuk-panel($panel-background-colour, $panel-text-colour, $panel-border-colour);
  @include nhsuk-responsive-margin(7, "top");
  @include nhsuk-responsive-padding(5);
}

/// Panel with label mixin, inherits panel styling
/// and removes padding top for the label positioning (deprecated)
///
/// @alias nhsuk-panel-with-label
/// @deprecated To be removed in v11.0, replaced by nhsuk-panel-with-label

@mixin panel-with-label($args...) {
  @include nhsuk-warning("panel-with-label", "panel-with-label is deprecated. Use nhsuk-panel-with-label instead.");
  @include nhsuk-panel-with-label($args...);
}

/// Heading label mixin, adds a tab heading to
/// warning callout, do and don't lists and panel
///
/// 1. Background colour to be set on the @include.
/// 2. Ensures heading appears separate to the body text in high contrast mode.
/// 3. Text colour to be set on the @include.
/// 4. Display inline-block so it does not take up the full width.
/// 5. Negative left margin aligns the heading to the box.
/// 6. Top positioning set to minus to make heading sit just outside the box.
///
/// @param {Colour} $heading-background-colour - Heading background colour
/// @param {Colour} $heading-text-colour - Heading text colour
///
/// @example scss
///   @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
///

@mixin nhsuk-heading-label($heading-background-colour, $heading-text-colour) {
  display: inline-block; // [4]

  position: relative;
  top: nhsuk-spacing(-3); // [6]

  margin: 0;
  margin-bottom: nhsuk-spacing(2);
  margin-left: nhsuk-spacing(-5) - 1px; // [5]
  padding: nhsuk-spacing(2) nhsuk-spacing(5);

  outline: 1px solid transparent; // [2]
  outline-offset: -1px;

  color: $heading-text-colour; // [3]
  background-color: $heading-background-colour; // [1]

  @include nhsuk-font-size(26);

  @include nhsuk-media-query($until: tablet) {
    top: nhsuk-spacing(-2); // [6]
    margin-left: nhsuk-spacing(-4) - 1px; // [5]
    padding: nhsuk-spacing(2) nhsuk-spacing(4);
  }

  @include nhsuk-print-colour {
    top: 0;
    background: none;
  }
}

/// Heading label mixin, adds a tab heading to
/// warning callout, do and don't lists and panel (deprecated)
///
/// @alias nhsuk-heading-label
/// @deprecated To be removed in v11.0, replaced by nhsuk-heading-label

@mixin heading-label($args...) {
  @include nhsuk-warning("heading-label", "heading-label is deprecated. Use nhsuk-heading-label instead.");
  @include nhsuk-heading-label($args...);
}

/// Care card mixin, used for creating
/// different coloured care cards
///
/// @param {Colour} $heading-background-colour - Heading background colour
/// @param {Colour} $heading-text-colour - Heading text colour
/// @param {Number} $print-border-size - Print border size
///
/// @example scss
///   @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px);
///

@mixin nhsuk-care-card($heading-background-colour, $heading-text-colour, $print-border-size) {
  .nhsuk-card__heading-container,
  .nhsuk-card--care__heading-container {
    color: $heading-text-colour;
    background-color: $heading-background-colour;
  }

  @include nhsuk-print-colour {
    border: $print-border-size solid $nhsuk-print-text-colour;
    page-break-inside: avoid;
  }
}

/// Care card mixin, used for creating
/// different coloured care cards (deprecated)
///
/// @alias nhsuk-care-card
/// @deprecated To be removed in v11.0, replaced by nhsuk-care-card

@mixin care-card($args...) {
  @include nhsuk-warning("care-card", "care-card is deprecated. Use nhsuk-care-card instead.");
  @include nhsuk-care-card($args...);
}

/// Print colour mixin, sets the text print colour
/// warning callout, do and don't lists and panels
///
/// @param {Colour} $print-colour [$nhsuk-print-text-colour] - Print colour
///
/// @example scss
///   @include nhsuk-print-colour($print-colour: inherit);
///

@mixin nhsuk-print-colour($print-colour: $nhsuk-print-text-colour) {
  @include nhsuk-media-query($media-type: print) {
    color: $print-colour;
    @content;
  }
}

/// Print colour mixin, sets the text print colour
/// warning callout, do and don't lists and panels (deprecated)
///
/// @alias nhsuk-print-colour
/// @deprecated To be removed in v11.0, replaced by nhsuk-print-colour

@mixin nhsuk-print-color($args...) {
  @include nhsuk-warning("color-to-colour", "nhsuk-print-color is deprecated. Use nhsuk-print-colour instead.");
  @include nhsuk-print-colour($args...);
}

/// Print colour mixin, sets the text print colour
/// warning callout, do and don't lists and panels (deprecated)
///
/// @alias nhsuk-print-colour
/// @deprecated To be removed in v11.0, replaced by nhsuk-print-colour

@mixin print-color($args...) {
  @include nhsuk-warning("print-color", "print-color is deprecated. Use nhsuk-print-colour instead.");
  @include nhsuk-print-colour($args...);
}

/// Print hide mixin, hides the element from print
///
/// @param {Boolean} $important [false] - Whether to mark as `!important`
///
/// @example scss
///   @include nhsuk-print-hide;
///

@mixin nhsuk-print-hide($important: false) {
  @include nhsuk-media-query($media-type: print) {
    @if $important == true {
      display: none !important;
    } @else {
      display: none;
    }
  }
}

/// Print hide mixin, hides the element from print (deprecated)
///
/// @alias nhsuk-print-hide
/// @deprecated To be removed in v11.0, replaced by nhsuk-print-hide

@mixin print-hide {
  @include nhsuk-warning("print-hide", "print-hide is deprecated. Use nhsuk-print-hide instead.");
  @include nhsuk-print-hide;
}

/// Flex mixin
///
/// @example scss
///   @include nhsuk-flex;
///

@mixin nhsuk-flex {
  display: flex;
  flex-wrap: wrap;
}

// Flex mixin (deprecated)
///
/// @alias nhsuk-flex
/// @deprecated To be removed in v11.0, replaced by nhsuk-flex

@mixin flex {
  @include nhsuk-warning("flex", "flex is deprecated. Use nhsuk-flex instead.");
  @include nhsuk-flex;
}

/// Flex item mixin
///
/// @example scss
///   @include nhsuk-flex-item;
///

@mixin nhsuk-flex-item {
  display: flex;

  @include nhsuk-media-query($until: desktop) {
    flex: 0 0 100%;
  }
}

// Flex item mixin (deprecated)
///
/// @alias nhsuk-flex-item
/// @deprecated To be removed in v11.0, replaced by nhsuk-flex-item

@mixin flex-item {
  @include nhsuk-warning("flex-item", "flex-item is deprecated. Use nhsuk-flex-item instead.");
  @include nhsuk-flex-item;
}

/// Remove margin mobile mixin
///
/// Removes left and right margin at tablet breakpoint

@mixin nhsuk-remove-margin-mobile {
  @include nhsuk-media-query($until: tablet) {
    margin-right: -$nhsuk-gutter-half;
    margin-left: -$nhsuk-gutter-half;
  }
}

/// Remove margin mobile mixin (deprecated)
///
/// Removes left and right margin at tablet breakpoint
///
/// @alias nhsuk-remove-margin-mobile
/// @deprecated To be removed in v11.0, replaced by nhsuk-remove-margin-mobile

@mixin remove-margin-mobile() {
  @include nhsuk-warning(
    "remove-margin-mobile",
    "remove-margin-mobile is deprecated. Use nhsuk-remove-margin-mobile instead."
  );

  @include nhsuk-remove-margin-mobile;
}

/// NHS logo size helper
///
/// Saves duplicating the code for when using the logo as a link.
/// Used in the header and footer.

@mixin nhsuk-logo-size {
  width: 100px;
  height: 40px;
}

@mixin nhsuk-logo-size-small {
  width: 80px;
  height: 32px;
}