@use "govuk-frontend/dist/govuk" as *;

@include govuk-exports("govuk-eleventy-plugin/component/prose-scope") {
  .app-prose-scope {
    @include govuk-responsive-margin(8, "bottom");

    &:has(+ .govuk-pagination) {
      @include govuk-responsive-margin(4, "bottom");
    }

    > *:first-child {
      margin-top: 0;
    }

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

    h1 {
      max-width: 15em;
    }

    h2 {
      max-width: 20em;
    }

    h3 {
      max-width: 30em;
    }

    h4,
    h5,
    h6,
    p,
    ul:not([class]),
    ol,
    img,
    video {
      max-width: 38em;
    }

    // Distinguish inserted text from that inside links
    ins {
      text-decoration-style: double;
    }

    // Use GOV.UK yellow colour for highlighted text
    mark {
      background-color: govuk-colour("yellow", $variant: "tint-50");
    }

    // Ensure sub- and superscript text doesn’t disrupt vertical rhythm
    sub,
    sup {
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }

    sup {
      top: -0.4em;
    }

    sub {
      bottom: -0.4em;
    }

    // Use sensible defaults for embedded media
    iframe,
    img,
    video {
      height: auto;
      max-width: 100%;
      width: auto;
    }

    figure {
      margin-left: 0;
      margin-right: 0;
      width: 100%;

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

      // Show outline around linked images within figures
      img {
        display: inline-block;
        outline: 1px solid rgba(govuk-functional-colour(border), 0.5);
      }

      > .govuk-link img {
        &:hover {
          outline-color: govuk-functional-colour(link-hover);
        }

        &:active {
          outline-color: govuk-functional-colour(link-active);
        }
      }

      > .govuk-link:focus img {
        outline: none;

        @include govuk-focused-box;
      }

      :focus & {
        background-color: govuk-functional-colour(focus);
      }
    }

    figcaption {
      color: govuk-functional-colour(secondary-text);
      margin-top: govuk-spacing(1);

      @include govuk-font($size: 19);
    }

    // Responsive tables
    .govuk-table[tabindex] {
      display: block;
      overflow-x: auto;
      scrollbar-color: govuk-functional-colour(border) govuk-colour("black", $variant: "tint-95");
      scrollbar-width: thin;

      &:focus,
      &:focus-visible {
        box-shadow:
          0 0 0 #{$govuk-focus-width * 3} govuk-functional-colour(focus-text),
          0 0 0 #{$govuk-focus-width * 4} govuk-functional-colour(focus);
        outline: #{$govuk-focus-width * 2} solid govuk-colour("white");
      }

      &:focus:not(:focus-visible) {
        box-shadow: none;
        outline: none;
      }
    }

    // Reverse the colour of code that uses shell highlighting
    .app-code__language--shell {
      background-color: govuk-colour("black");
      border: $govuk-focus-width solid govuk-colour("white");
      -webkit-font-smoothing: auto;
      margin-left: $govuk-focus-width * -1;
      margin-right: $govuk-focus-width * -1;

      code {
        filter: invert(100%);
      }
    }
  }
}