@use "sass:math";
@use "../../core/settings" as *;
@use "../../core/tools" as *;
@use "../../core/helpers" as *;
@forward "../../core/styles/icons";

////
/// Card component
///
/// 1. Is needed for the :active top positioning, and invisible clickable overlay.
/// 2. Border is used to create a divider between the white content
///    box and an image.
/// 3. Creates the 'pressed down' effect when clicked.
/// 4. Removes padding-top from headings directly after the card group.
/// 5. Includes the border width to achieve the correct left alignment.
/// 6. Stops the heading from spanning the full width of the card.
/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.
/// 8. Default care card colour set to blue (non-urgent care card) -
///    using the @mixin care-card tools/_mixins.scss.
///    The same mixin is used for each care card, setting the background
///    colour,text colour and print border width with the variables.
/// 9. 'Random number' for the heading triangle.
/// 10. 'Random number' for the heading triangle positioning.
/// 11. 'Random number' used for spacing to compensate for the triangle.
/// 12. Needed to enable the triangle to show correctly in high contrast mode.
/// 13. Prevent additional padding on headings
/// 14. Give the action link icon sufficient contrast when used in the emergency variant
/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.
/// 16. Emergency care card <a> needs to be white because the background colour is black.
/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.
/// 18. Increase the clickable area to the border of the card and the shadow.
///
/// @group components/card
////

$nhsuk-card-border-width: 1px;
$nhsuk-card-border-bottom-width: nhsuk-spacing(1) - 1px;
$nhsuk-card-border-colour: $nhsuk-border-colour;
$nhsuk-card-border-hover-colour: nhsuk-colour("grey-3");

// @deprecated To be removed in v11.0
$card-border-width: $nhsuk-card-border-width;
$card-border-bottom-width: $nhsuk-card-border-bottom-width;
$card-border-color: $nhsuk-card-border-colour;
$card-border-colour: $nhsuk-card-border-colour;
$card-border-hover-color: $nhsuk-card-border-hover-colour;
$card-border-hover-colour: $nhsuk-card-border-hover-colour;

@include nhsuk-exports("nhsuk/components/card") {
  .nhsuk-card {
    box-sizing: border-box;
    position: relative; // [1]
    width: 100%;

    @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);
  }

  .nhsuk-card__img,
  .nhsuk-card .nhsuk-image {
    display: block;
    width: 100%;
    margin: 0;
    border-bottom: $nhsuk-card-border-width solid nhsuk-colour("grey-5"); // [2]
  }

  .nhsuk-card__content {
    box-sizing: border-box;
    @include nhsuk-top-and-bottom;
    @include nhsuk-responsive-padding(5);
  }

  .nhsuk-card .nhsuk-image__caption {
    @include nhsuk-responsive-padding(5, "left");
    @include nhsuk-responsive-padding(5, "right");
  }

  .nhsuk-card__heading {
    flex-basis: 0;
    flex-grow: 999;

    &:has(+ .nhsuk-icon) {
      margin-bottom: 0;
    }
  }

  .nhsuk-card__heading-container,
  // Deprecated, to be removed in v11.0
  .nhsuk-card--care__heading-container {
    @include nhsuk-responsive-padding(5);
  }

  .nhsuk-card__heading-container {
    &:last-child {
      @include nhsuk-top-and-bottom;
    }

    &:not(:last-child) {
      padding-bottom: 0;
    }

    + .nhsuk-card__content {
      padding-top: 0;
    }

    @include nhsuk-media-query($from: tablet) {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
      justify-content: space-between;

      &:has(.nhsuk-card__actions:only-child) {
        justify-content: right;
      }
    }
  }

  .nhsuk-card__actions {
    display: flex;

    flex-wrap: wrap;
    row-gap: 10px;

    margin: nhsuk-spacing(-1) 0 nhsuk-spacing(3);
    padding: 0;

    list-style: none;
    @include nhsuk-font(19, $weight: bold);

    @include nhsuk-media-query($from: tablet) {
      justify-content: right;
      margin: 0 0 nhsuk-spacing(3) nhsuk-spacing(3);
      text-align: right;

      &:only-child {
        margin-left: 0;
      }
    }
  }

  .nhsuk-card__action {
    display: inline-block;

    // We use the following media query to target IE11 and 10 only to add margin
    // between actions.
    //
    // We do this because we're using row-gap to create space between actions on
    // more evergreen browsers which IE doesn't support. @supports currently isn't
    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
    //
    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
    // which also includes an explanation of why this works
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      margin-bottom: nhsuk-spacing(1);
    }
  }

  .nhsuk-card__action:last-child {
    // See above comment for why this is here
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      margin-bottom: 0;
    }
  }

  @include nhsuk-media-query($until: tablet) {
    .nhsuk-card__action {
      margin-right: nhsuk-spacing(2);
      padding-right: nhsuk-spacing(2);
      border-right: 1px solid $nhsuk-border-colour;
    }

    .nhsuk-card__action:last-child {
      margin-right: 0;
      padding-right: 0;
      border: 0;
    }
  }

  @include nhsuk-media-query($from: tablet) {
    .nhsuk-card__action {
      margin-bottom: 0;
      margin-left: nhsuk-spacing(2);
      padding-left: nhsuk-spacing(2);
    }

    .nhsuk-card__action:not(:first-child) {
      border-left: 1px solid $nhsuk-border-colour;
    }

    .nhsuk-card__action:first-child {
      margin-left: 0;
      padding-left: 0;
      border: 0;
    }
  }

  .nhsuk-card__description {
    margin-bottom: 0;
  }

  // Card shadow shared styles

  .nhsuk-card--clickable,
  .nhsuk-card--secondary {
    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $nhsuk-border-colour;
    @include nhsuk-responsive-margin(7, "bottom", $adjustment: $nhsuk-card-border-bottom-width); // [18]
  }

  // Clickable card

  .nhsuk-card--clickable {
    .nhsuk-card__heading a,
    .nhsuk-card__link {
      &::before {
        content: "";

        display: block;

        position: absolute;
        top: -$nhsuk-card-border-width; // [18]
        right: -$nhsuk-card-border-width; // [18]
        bottom: -$nhsuk-card-border-width - $nhsuk-card-border-bottom-width; // [18]
        left: -$nhsuk-card-border-width; // [18]

        background-color: rgba(255, 255, 255, 0); // [17]
      }
    }

    &:hover,
    &:has(.nhsuk-card__heading a:hover),
    &:has(.nhsuk-card__link:hover) {
      border-color: $nhsuk-card-border-hover-colour;
      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $nhsuk-card-border-hover-colour;
    }

    &:hover .nhsuk-icon,
    &:has(.nhsuk-card__heading a:hover) .nhsuk-icon,
    &:has(.nhsuk-card__link:hover) .nhsuk-icon {
      fill: $nhsuk-link-hover-colour;

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

    &:active,
    &:has(.nhsuk-card__heading a:active),
    &:has(.nhsuk-card__link:active) {
      top: $nhsuk-card-border-bottom-width; // [3]
      box-shadow: none;
    }

    &:active .nhsuk-icon,
    &:has(.nhsuk-card__heading a:active) .nhsuk-icon,
    &:has(.nhsuk-card__link:active) .nhsuk-icon {
      fill: $nhsuk-link-active-colour;

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

  // Card group
  //
  // Allows you to have a row of cards.
  // Flexbox is used to make each card in a row the same height.

  .nhsuk-card-group {
    margin-bottom: nhsuk-spacing(3);
    padding: 0;

    @include nhsuk-flex;

    @include nhsuk-media-query($until: desktop) {
      margin-bottom: nhsuk-spacing(6);
    }

    + h2,
    + .nhsuk-heading-l,
    + h3,
    + .nhsuk-heading-m {
      padding-top: 0; // [4]
    }
  }

  .nhsuk-card-group__item {
    margin-bottom: 0;
    list-style-type: none;

    @include nhsuk-flex-item;

    .nhsuk-card {
      margin-bottom: nhsuk-spacing(5);
    }

    .nhsuk-card--clickable,
    .nhsuk-card--secondary {
      margin-bottom: nhsuk-spacing(5) + $nhsuk-card-border-bottom-width; // [18]
    }

    @include nhsuk-media-query($until: desktop) {
      .nhsuk-card {
        margin-bottom: nhsuk-spacing(3);
      }

      .nhsuk-card--clickable,
      .nhsuk-card--secondary {
        margin-bottom: nhsuk-spacing(3) + $nhsuk-card-border-bottom-width; // [18]
      }

      &:last-child .nhsuk-card {
        margin-bottom: 0;
      }

      &:last-child .nhsuk-card--clickable,
      &:last-child .nhsuk-card--secondary {
        margin-bottom: $nhsuk-card-border-bottom-width; // [18]
      }
    }
  }

  // Card panel shared styles

  .nhsuk-card--feature > .nhsuk-card__heading-container,
  .nhsuk-card--feature > .nhsuk-card__content,
  .nhsuk-card--warning > .nhsuk-card__heading-container,
  .nhsuk-card--warning > .nhsuk-card__content,
  // Deprecated, to be removed in v11.0
  .nhsuk-card__content--feature {
    padding: 0; // [7]
  }

  .nhsuk-card--feature > .nhsuk-card__heading-container,
  .nhsuk-card--warning > .nhsuk-card__heading-container {
    @include nhsuk-media-query($from: tablet) {
      align-items: flex-start;
    }

    .nhsuk-card__actions {
      margin-top: 0;

      @include nhsuk-media-query($from: tablet) {
        padding-top: nhsuk-spacing(4);
      }
    }
  }

  // Card feature

  .nhsuk-card--feature {
    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);
  }

  .nhsuk-card--feature > .nhsuk-card__heading-container > .nhsuk-card__heading,
  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
  // Deprecated, to be removed in v11.0
  .nhsuk-card__heading--feature {
    flex-basis: auto;
    flex-grow: 0;
    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
  }

  // Card warning

  .nhsuk-card--warning {
    @include nhsuk-panel-with-label(nhsuk-colour("pale-yellow"), $nhsuk-text-colour, nhsuk-colour("yellow"));
  }

  .nhsuk-card--warning > .nhsuk-card__heading-container > .nhsuk-card__heading,
  .nhsuk-card--warning > .nhsuk-card__content > .nhsuk-card__heading {
    flex-basis: auto;
    flex-grow: 0;
    @include nhsuk-heading-label(nhsuk-colour("yellow"), $nhsuk-text-colour);
  }

  // Care card

  .nhsuk-card--care {
    @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]
    @include nhsuk-responsive-margin(7, "top");
  }

  .nhsuk-card--care > .nhsuk-card__heading-container,
  // Deprecated, to be removed in v11.0
  .nhsuk-card--care__heading-container {
    position: relative;
    padding-top: nhsuk-spacing(3);
    padding-bottom: nhsuk-spacing(3) - $nhsuk-card-border-width;
    border-bottom: $nhsuk-card-border-width solid transparent;
  }

  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
  // Deprecated, to be removed in v11.0
  .nhsuk-card--care__heading {
    margin: 0;
    padding-top: 0; // [13]

    @include nhsuk-font(26, $weight: bold);
    @include nhsuk-print-colour;
  }

  .nhsuk-card--care__arrow {
    display: block;

    position: absolute;
    bottom: nhsuk-px-to-rem(-11px); // [9]
    left: nhsuk-px-to-rem(30px); // [10]

    width: nhsuk-px-to-rem(20px); // [9]
    height: nhsuk-px-to-rem(20px); // [9]

    overflow: hidden;

    transform: rotate(45deg);
    @include nhsuk-print-hide;

    @include nhsuk-media-query($from: tablet) {
      left: nhsuk-px-to-rem(38px); // [10]
    }

    &::before,
    &::after {
      content: "";

      display: block;

      position: absolute;
      top: 0;

      width: 0;
      height: 0;

      transform: rotate(45deg); // [12]

      border: solid nhsuk-px-to-rem(32px) $nhsuk-brand-colour; // [9]
    }
  }

  .nhsuk-card--care .nhsuk-card__content {
    @include nhsuk-responsive-padding(5, "top");
  }

  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container,
  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,
  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {
    .nhsuk-card__actions {
      margin-top: nhsuk-spacing(3);
      margin-bottom: 0;

      @include nhsuk-media-query($from: tablet) {
        align-self: center;
        margin-top: 0;
      }
    }

    .nhsuk-card__action a {
      @include nhsuk-link-style-reverse;
    }
  }

  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container {
    .nhsuk-card__action {
      border-color: $nhsuk-reverse-border-colour;
    }
  }

  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,
  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {
    .nhsuk-card__action {
      border-color: nhsuk-tint(nhsuk-colour("red"), 20%);
    }
  }

  .nhsuk-card--care--urgent {
    @include nhsuk-care-card(nhsuk-colour("red"), $nhsuk-reverse-text-colour, 6px);

    .nhsuk-card--care__arrow {
      &::before,
      &::after {
        border-color: nhsuk-colour("red");
      }
    }
  }

  .nhsuk-card--care--emergency {
    @include nhsuk-care-card(nhsuk-colour("red"), $nhsuk-reverse-text-colour, 8px);

    .nhsuk-card--care__arrow {
      &::before,
      &::after {
        border-color: nhsuk-colour("red");
      }
    }

    .nhsuk-card__content {
      position: static; // [15]
      border: 0;
      color: $nhsuk-reverse-text-colour;
      background-color: nhsuk-colour("black");

      a:not(.nhsuk-action-link):not(.nhsuk-button) {
        @include nhsuk-link-style-reverse;
      }

      @include nhsuk-print-colour {
        background-color: $nhsuk-card-background-colour;
      }
    }

    .nhsuk-details,
    .nhsuk-details__summary {
      color: $nhsuk-reverse-text-colour;
    }

    .nhsuk-details__summary {
      &:hover {
        color: $nhsuk-reverse-text-colour;
      }

      &:focus {
        color: $nhsuk-focus-text-colour;
      }
    }

    .nhsuk-action-link:not(.nhsuk-action-link--reverse) {
      @include nhsuk-link-style-reverse;
    }
  }

  // Card primary

  .nhsuk-card--primary > .nhsuk-card__content,
  // Deprecated, to be removed in v11.0
  .nhsuk-card__content--primary {
    @include nhsuk-responsive-spacing(
      5,
      "padding",
      $direction: "right",
      $adjustment: nhsuk-px-to-rem(nhsuk-spacing(7))
    );

    @include nhsuk-media-query($from: desktop) {
      height: 100%;
    }
  }

  .nhsuk-card--primary,
  // Deprecated, to be removed in v11.0
  .nhsuk-card__content--primary {
    .nhsuk-icon {
      display: block;

      position: absolute;
      top: 50%;

      width: nhsuk-px-to-rem($nhsuk-icon-size-large);
      height: nhsuk-px-to-rem($nhsuk-icon-size-large);
      margin-top: nhsuk-px-to-rem(math.floor(math.div($nhsuk-icon-size-large, -2)));

      pointer-events: none;

      fill: $nhsuk-link-colour;
      @include nhsuk-responsive-spacing(5, "right");

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

  // Card secondary

  .nhsuk-card--secondary {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: transparent;
  }

  .nhsuk-card--secondary > .nhsuk-card__heading-container,
  .nhsuk-card--secondary > .nhsuk-card__content,
  // Deprecated, to be removed in v11.0
  .nhsuk-card__content--secondary {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
}