@use "../../core/settings" as *;
@use "../../core/tools" as *;
@use "../../core/helpers" as *;

////
/// Hero component
///
/// 1. Position relative to support the description
///    appearing over the image.
/// 2. Adds a border between the header and hero, if required
///
/// @group components/hero
///

@include nhsuk-exports("nhsuk/components/hero") {
  .nhsuk-hero {
    box-sizing: border-box;
    position: relative; // [1]
    color: $nhsuk-reverse-text-colour;
    background-color: $nhsuk-brand-colour;

    @include nhsuk-print-colour;

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

    .nhsuk-hero--border {
      // [2]
      border-top: $nhsuk-hero-border solid $nhsuk-reverse-border-colour;
    }
  }

  .nhsuk-hero__wrapper {
    @include nhsuk-responsive-padding(8, top);
    @include nhsuk-responsive-padding(8, bottom);
  }

  .nhsuk-hero__heading {
    @include nhsuk-responsive-margin(3, bottom);
  }

  //  Hero component image styles
  //
  // 3. Center the background image.
  // 4. Stop the height affecting print stylesheets.
  // 5. Show more of the image for larger screen sizes
  // 6. Overlay must be min same height as .nhsuk-hero--image to cover the image.
  // 7. Darken the background image with an overlay.
  // 12. Remove any heights/min heights in Windows high contrast mode.

  .nhsuk-hero--image {
    background-repeat: no-repeat;
    background-position: center right; // [3]
    background-size: cover;

    @media only screen {
      // [4]
      min-height: nhsuk-px-to-rem(200px);
    }

    @include nhsuk-media-query($from: tablet) {
      @media only screen {
        // [4]
        min-height: nhsuk-px-to-rem(320px); // [5]

        .nhsuk-hero__overlay {
          height: nhsuk-px-to-rem(320px); // [6]
        }
      }
    }

    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
      min-height: 0; // [12]
    }

    .nhsuk-hero__overlay {
      background-color: rgba(nhsuk-shade($nhsuk-brand-colour, 50%), 0.1); // [7]

      @media only screen {
        // [4]
        min-height: nhsuk-px-to-rem(200px); // [6]
      }

      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
        height: auto; // [12]
        min-height: 0; // [12]
      }
    }
  }

  //  Hero component description styles.
  //
  // 8. 'Random number' for the triangle.
  // 9. 'Random number' for the triangle positioning.
  // 10. Needed to enable the triangle to show correctly in high contrast mode.
  // 11. Give the description box a max width.
  // 13. Remove the arrow in Windows high contrast mode.
  // 14. Reduce spacing and change positioning for Windows high contrast mode.
  // 15. Prevent text breaking out of box on smaller sizes
  // 16. Prevent overlap using safe area: box offset + arrow height + spacing

  .nhsuk-hero--image-description {
    margin-bottom: nhsuk-px-to-rem(70px + 20px + nhsuk-spacing(3)); // [16]

    @include nhsuk-media-query($from: tablet) {
      margin-bottom: nhsuk-px-to-rem(48px + 20px + nhsuk-spacing(4)); // [16]
    }

    .nhsuk-hero-content {
      position: relative;
      top: nhsuk-px-to-rem(70px);

      margin-bottom: nhsuk-px-to-rem(24px);
      padding: nhsuk-spacing(4);

      color: $nhsuk-reverse-text-colour;
      background-color: $nhsuk-brand-colour;

      .nhsuk-hero__arrow {
        display: block;

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

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

        overflow: hidden;

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

      .nhsuk-hero__arrow::before,
      .nhsuk-hero__arrow::after {
        content: "";

        display: block;

        position: absolute;
        top: 0;

        width: 0;
        height: 0;

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

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

      @include nhsuk-print-colour {
        max-width: 100%;
        padding: 0;
      }
    }

    @include nhsuk-media-query(375px) {
      .nhsuk-hero-content {
        width: 85%; // [15]
      }
    }

    @include nhsuk-media-query($from: tablet) {
      .nhsuk-hero-content {
        box-sizing: border-box;

        position: absolute;
        top: auto;
        bottom: nhsuk-px-to-rem(-48px); // [8]

        max-width: nhsuk-em(560); // [11]
        margin-bottom: 0;
        padding: nhsuk-spacing(5) nhsuk-spacing(6);

        @include nhsuk-top-and-bottom;
      }

      .nhsuk-hero__arrow {
        left: nhsuk-px-to-rem(46px); // [9]
      }
    }

    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
      .nhsuk-hero-content {
        position: relative;
        top: 0;
        // [14]
        bottom: 0;

        min-height: 0;
        margin-bottom: 0;
        padding: nhsuk-spacing(5) 0 0;
      }

      .nhsuk-hero__arrow {
        display: none; // [13]
      }
    }
  }
}