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

////
/// Details component
///
/// 1. Make the focus outline shrink-wrap the text content of the summary
/// 2. Allow for absolutely positioned marker and align with disclosed text
/// 3. Only underline the text, not the arrow
/// 4. Remove the default details marker so we can style our own consistently
///    and ensure it displays in Firefox
/// 5. Custom padding to left align the details text with the summary
///
/// @group components/details
/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
////

@include nhsuk-exports("nhsuk/components/details") {
  .nhsuk-details {
    display: block;
    @include nhsuk-text-colour;
    @include nhsuk-font-size(19);
    @include nhsuk-responsive-margin(4, "bottom");
  }

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

    .nhsuk-u-secondary-text-colour {
      // stylelint-disable-next-line declaration-no-important
      color: $nhsuk-reverse-secondary-text-colour !important;
    }
  }

  .nhsuk-details__summary {
    display: block;
  }

  .nhsuk-details__text {
    @include nhsuk-top-and-bottom;
  }

  // Hack to support Internet Explorer 11
  @media screen\0 {
    .nhsuk-details {
      margin-top: nhsuk-spacing(2);
      padding: nhsuk-spacing(3) 0;
      padding-left: nhsuk-spacing(4, $adjustment: - $nhsuk-border-width, $unit: "rem"); // [5]
      border-left: $nhsuk-border-width solid nhsuk-colour("grey-3");
    }

    .nhsuk-details--reverse {
      border-left-color: $nhsuk-reverse-border-colour;
    }

    .nhsuk-details__summary-text {
      display: block;
      @include nhsuk-font-weight-bold;
      @include nhsuk-responsive-margin(4, "bottom");
    }
  }

  // Use a feature query to style the <details> element in newer browsers,
  // leaving older browsers to only show the content
  //
  // Additionally, -ms-ime-align is only supported by Edge 12 - 18
  //
  // This ensures we don't use these styles in browsers which:
  //   - support ES6 modules but not the <details> element (Edge 16 - 18)
  //   - do not support ES6 modules or the <details> element (eg, IE8+)
  @supports not (-ms-ime-align: auto) {
    .nhsuk-details__summary {
      position: relative; // [2]
      width: fit-content; // [1]
      padding-left: nhsuk-spacing(4, $unit: "rem");
      text-decoration: none;
      cursor: pointer;

      @include nhsuk-link-style-focus;
      @include nhsuk-top-and-bottom;

      &::-webkit-details-marker {
        display: none; // [4]
      }

      &::before {
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        margin: auto;

        @include nhsuk-shape-arrow($direction: right, $base: 14px);
      }

      .nhsuk-details[open] > &::before {
        @include nhsuk-shape-arrow($direction: down, $base: 14px);
      }
    }

    // Style the arrow and summary text to look like a link...
    .nhsuk-details__summary::before,
    .nhsuk-details__summary-text {
      color: $nhsuk-link-colour;
    }

    // ...but only underline the text, not the arrow
    .nhsuk-details__summary-text {
      text-decoration: underline; // [3]
      @include nhsuk-responsive-margin(3, "bottom");
    }

    .nhsuk-details__summary-text:only-child {
      margin-bottom: 0;
    }

    .nhsuk-details__summary:hover,
    .nhsuk-details__summary:focus {
      & .nhsuk-details__summary-text {
        text-decoration: none;
      }
    }

    .nhsuk-details__summary:hover {
      &::before,
      & .nhsuk-details__summary-text {
        color: $nhsuk-link-hover-colour;
      }
    }

    .nhsuk-details__summary:active {
      &::before,
      & .nhsuk-details__summary-text {
        color: $nhsuk-link-active-colour;
      }
    }

    .nhsuk-details__summary:focus {
      &::before,
      & .nhsuk-details__summary-text {
        color: $nhsuk-focus-text-colour;
      }
    }

    .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),
    .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {
      &::before,
      & .nhsuk-details__summary-text {
        color: $nhsuk-reverse-text-colour;
      }
    }

    .nhsuk-details__text {
      margin-top: nhsuk-spacing(2);
      padding: nhsuk-spacing(3) 0;
      padding-right: 0;
      padding-left: nhsuk-spacing(4, $adjustment: - $nhsuk-border-width, $unit: "rem"); // [5]
      border-left: $nhsuk-border-width solid nhsuk-colour("grey-3");

      .nhsuk-details--reverse & {
        border-left-color: $nhsuk-reverse-border-colour;
      }
    }

    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
      .nhsuk-details__summary,
      .nhsuk-details__summary:hover {
        &::before,
        & .nhsuk-details__summary-text {
          color: LinkText;
        }
      }

      .nhsuk-details__summary:active {
        &::before,
        & .nhsuk-details__summary-text {
          color: ActiveText;
        }
      }

      .nhsuk-details__summary:focus,
      .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),
      .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {
        &::before,
        & .nhsuk-details__summary-text {
          color: LinkText;
        }
      }
    }
  }

  // Expander variant

  .nhsuk-expander {
    border: none;
    background-color: $nhsuk-card-background-colour;

    @include nhsuk-responsive-margin(6, "bottom");

    :first-child:empty + & {
      margin-top: 0;
    }

    &:not(:first-child) {
      @include nhsuk-responsive-margin(6, "top");
    }

    .nhsuk-details__summary {
      display: block;
      width: auto;
      border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;
      border-bottom: $nhsuk-expander-border-bottom-width solid $nhsuk-expander-border-colour;
      background-color: $nhsuk-card-background-colour;

      @include nhsuk-responsive-padding(5);
    }

    .nhsuk-details__summary:hover,
    .nhsuk-details__summary:hover + .nhsuk-details__text,
    &:has(.nhsuk-details__summary:hover) .nhsuk-details__summary,
    &:has(.nhsuk-details__summary:hover) .nhsuk-details__text {
      border-color: $nhsuk-expander-border-hover-colour;
    }

    &[open] .nhsuk-details__summary {
      border-bottom: 0;
    }

    .nhsuk-details__text {
      margin-top: 0;
      margin-left: 0;
      padding-top: 0;
      border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;
      border-top: 0;

      @include nhsuk-responsive-padding(5, ("bottom", "left", "right"));
    }

    // Hack to support Internet Explorer 11
    @media screen\0 {
      margin-top: 0;
      padding: 0;

      .nhsuk-details__summary-text {
        display: block;
        @include nhsuk-font(26, $weight: bold);
        @include nhsuk-responsive-margin(4, "bottom");
      }
    }

    // Use a feature query to style the <details> element in newer browsers,
    // leaving older browsers to show the content in a card style box
    @supports not (-ms-ime-align: auto) {
      border-bottom-width: $nhsuk-expander-border-bottom-width;

      .nhsuk-details__summary {
        @include nhsuk-responsive-padding(5, "bottom");
      }

      .nhsuk-details__summary::before,
      &[open] > .nhsuk-details__summary::before {
        display: none; // [6]
      }

      .nhsuk-details__summary:focus {
        outline: none;
        box-shadow: none;
      }

      .nhsuk-details__summary-text {
        display: inline-block;
        position: relative;
        padding: nhsuk-spacing(1);
        padding-left: nhsuk-spacing(2, $adjustment: $nhsuk-expander-icon-size);
        cursor: pointer;
      }

      .nhsuk-details__summary:focus .nhsuk-details__summary-text {
        @include nhsuk-focused-text;
      }

      // Internet Explorer 11 doesn’t support clip-path, but we don’t show the
      // ::before pseudo element to users of that browser
      .nhsuk-details__summary-text::before {
        content: "";

        position: absolute;
        top: calc(50% - math.div($nhsuk-expander-icon-size, 2));
        left: 0;

        width: $nhsuk-expander-icon-size;
        height: $nhsuk-expander-icon-size;

        clip-path: path(
          "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm0 6c-.8 0-1.5.7-1.5 1.5V12H8.5c-.8 0-1.4.6-1.5 1.4v.1c0 .8.7 1.5 1.5 1.5H12v3.5c0 .8.6 1.4 1.4 1.5h.1c.8 0 1.5-.7 1.5-1.5V15h3.5c.8 0 1.4-.6 1.5-1.4v-.1c0-.8-.7-1.5-1.5-1.5H15V8.5c0-.8-.6-1.4-1.4-1.5Z"
        ); // Plus icon

        background-color: ButtonText;
      }

      &[open] {
        border-bottom-width: $nhsuk-expander-border-width;
      }

      &[open] .nhsuk-details__summary-text::before {
        clip-path: path(
          "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm5 11h-10a1.5 1.5 0 0 0 0 3h10a1.5 1.5 0 0 0 0-3Z"
        ); // Minus icon
      }

      // Use a feature query to check for scalable clip-path support,
      // replacing fixed pixel sizes with rems for text-only zooming
      @supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {
        .nhsuk-details__summary-text {
          padding-left: nhsuk-spacing(2, $adjustment: $nhsuk-expander-icon-size, $unit: "rem");
        }

        .nhsuk-details__summary-text::before {
          top: calc(50% - nhsuk-px-to-rem(math.div($nhsuk-expander-icon-size, 2)));

          width: nhsuk-px-to-rem($nhsuk-expander-icon-size);
          height: nhsuk-px-to-rem($nhsuk-expander-icon-size);

          clip-path: shape(
            from 50% 3.7%,
            arc by 0% 92.6% of 46.3% 46.3% large cw,
            arc by 0% -92.6% of 46.3% 46.3% small cw,
            close,
            move by 0% 22.22%,
            curve by -5.56% 5.56% with -2.96% 0% / -5.56% 2.59%,
            vline to 44.44%,
            hline to 31.48%,
            curve by -5.56% 5.19% with -2.96% 0% / -5.19% 2.22%,
            vline by 0.37%,
            curve by 5.56% 5.56% with 0% 2.96% / 2.59% 5.56%,
            hline to 44.44%,
            vline by 12.96%,
            curve by 5.19% 5.56% with 0% 2.96% / 2.22% 5.19%,
            hline by 0.37%,
            curve by 5.56% -5.56% with 2.96% 0% / 5.56% -2.59%,
            vline to 55.56%,
            hline by 12.96%,
            curve by 5.56% -5.19% with 2.96% 0% / 5.19% -2.22%,
            vline by -0.37%,
            curve by -5.56% -5.56% with 0% -2.96% / -2.59% -5.56%,
            hline to 55.56%,
            vline to 31.48%,
            curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,
            close
          ); // Plus icon, scalable

          background-color: currentcolor;

          forced-color-adjust: none;
        }

        &[open] .nhsuk-details__summary-text::before {
          clip-path: shape(
            from 50% 3.7%,
            arc by 0% 92.6% of 46.3% 46.3% large cw,
            arc by 0% -92.6% of 46.3% 46.3% small cw,
            close,
            move by 18.52% 40.74%,
            hline by -37.04%,
            arc by 0% 11.11% of 5.56% 5.56% small ccw,
            hline by 37.04%,
            arc by 0% -11.11% of 5.56% 5.56% small ccw,
            close
          ); // Minus icon, scalable
        }
      }

      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
        .nhsuk-details__summary:not(:focus):not(:hover):not(:active) .nhsuk-details__summary-text::before {
          background-color: ButtonText;
        }
      }
    }
  }

  // Reduce margin between a group of expanders so they sit together
  .nhsuk-expander-group {
    @include nhsuk-responsive-margin(6, "bottom");

    :first-child:empty + & {
      margin-top: 0;
    }

    &:not(:first-child) {
      @include nhsuk-responsive-margin(6, "top");
    }

    > .nhsuk-details:not(:first-child) {
      @include nhsuk-responsive-margin(2, "top");
    }

    > .nhsuk-details:not(:last-child) {
      @include nhsuk-responsive-margin(2, "bottom");
    }
  }

  .nhsuk-details + h2:not([class^="nhsuk-caption"]),
  .nhsuk-details + .nhsuk-heading-l {
    @include nhsuk-responsive-padding(4, "top");
  }

  .nhsuk-details + h3:not([class^="nhsuk-caption"]),
  .nhsuk-details + h4:not([class^="nhsuk-caption"]),
  .nhsuk-details + .nhsuk-heading-m,
  .nhsuk-details + .nhsuk-heading-s {
    padding-top: nhsuk-spacing(1);

    @media #{nhsuk-from-breakpoint(tablet)} {
      padding-top: nhsuk-spacing(2);
    }
  }
}