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

@include govuk-exports("govuk-eleventy-plugin/component/prose-scope") {
  .app-prose-scope {
    @include govuk-responsive-margin(8, "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;
    }

    // Indicate abbreviations which have a title
    abbr {
      border-bottom: 1px dotted $govuk-secondary-text-colour;
      cursor: help;
    }

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

    // Use GOV.UK yellow colour for highlighted text
    mark {
      background-color: govuk-tint($govuk-focus-colour, 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;
    }

    img {
      height: auto;
      max-width: 100%;
      width: auto;
    }

    figure {
      @include govuk-responsive-margin(6, "bottom");
      margin-left: 0;
      margin-right: 0;
      width: 100%;

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

      > .govuk-link img {
        &:hover {
          outline-color: $govuk-link-hover-colour;
        }

        &:active {
          outline-color: $govuk-link-active-colour;
        }
      }

      :focus & {
        background-color: $govuk-focus-colour;
      }
    }

    figcaption {
      @include govuk-font($size: 19);
      color: $govuk-secondary-text-colour;
      margin-top: govuk-spacing(1);
    }

    // Responsive tables
    .govuk-table[tabindex] {
      display: block;
      overflow-x: auto;
      scrollbar-color: $govuk-border-colour govuk-colour("light-grey");

      &::-webkit-scrollbar {
        height: govuk-spacing(1);
        width: govuk-spacing(1);
      }

      &::-webkit-scrollbar-thumb {
        background: $govuk-border-colour;
      }

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

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

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

    // Reverse the colour of code that uses shell highlighting
    .x-govuk-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%);
      }
    }
  }
}