@use "govuk-frontend" as *;
@use "pkg:highlight.js/styles/github.css";

.app-code {
  @include govuk-responsive-margin(8, "bottom");

  &__container {
    display: block;
    margin: 0;
    padding: govuk-spacing(4);
    overflow-x: auto;
    border: $govuk-focus-width solid transparent;
    outline: 1px solid transparent;
    background-color: govuk-colour("light-grey");
    @include govuk-responsive-margin(4, "bottom");

    &:focus {
      border: $govuk-focus-width solid $govuk-input-border-colour;
      outline: $govuk-focus-width solid $govuk-focus-colour;
    }
  }

  &:last-child &__container {
    margin-bottom: 0;
  }
}

pre,
code {
  $app-code-font: ui-monospace, menlo, "Cascadia Mono", "Segoe UI Mono", consolas, "Liberation Mono", monospace;
  @include govuk-typography-common($font-family: $app-code-font);
  @include govuk-font-size($size: 16);
}