@import "govuk_publishing_components/individual_component_support";

// stylelint-disable max-nesting-depth

// Override govspeak styles with HTML publication specific ones
.gem-c-govspeak-html-publication {
  margin-bottom: govuk-spacing(6) * 1.5;
  z-index: 2;

  // This fixes the positioning of the sticky element. The reason it's done on the parent element
  // is because directly messing with the positioning of the sticky element produces undesirable results.
  // The nested govspeak component handles its own text direction independently, but will
  // coincide with the direction of its parent anyway in all usecases.
  &.direction-rtl {
    direction: rtl;
    text-align: start;
  }

  .gem-c-govspeak {
    h2 {
      @include govuk-font($size: 36, $weight: bold);
    }

    h3 {
      @include govuk-font($size: 27, $weight: bold);
    }

    .stat-headline:first-child {
      margin-top: govuk-spacing(6);

      @include govuk-media-query($from: tablet) {
        margin-top: govuk-spacing(9) + govuk-spacing(4);
      }
    }

    h2,
    h3 {
      margin-top: govuk-spacing(6);

      @include govuk-media-query($from: tablet) {
        margin-top: govuk-spacing(9) + govuk-spacing(4);
      }
    }

    h2:first-child,
    h3:first-child {
      margin-top: govuk-spacing(4);

      @include govuk-media-query($from: tablet) {
        margin-top: 0;
      }
    }

    h3 .number,
    h4 .number,
    h5 .number,
    h6 .number {
      margin-right: .1em;

      .direction-rtl & {
        margin-right: 0;
        margin-left: .1em;
      }
    }

    // stylelint-disable selector-no-qualifying-type
    // this class will only be for tables and is to distinguish from a bare `table`
    // the row classes below should not be applied to anything else but `tr`s
    table.financial-data {
      .numeric {
        text-align: right;
        @include govuk-font(14, $weight: regular, $tabular: true);
      }

      // make all elements inside thead look the same
      // (td can sometimes be used to overcome complexity of multiple lines in thead)
      // and make all of thead and tfoot stand out
      thead,
      tfoot {
        background-color: govuk-colour("light-grey", $legacy: "grey-3");
      }

      thead th,
      thead td {
        @include govuk-font(14, $weight: bold, $tabular: true);

        &.numeric {
          @include govuk-font(14, $weight: bold, $tabular: true);
        }
      }

      // don't make `th`s bold unless they are a section heading or a (sub)total row
      tbody th,
      tfoot th {
        font-weight: normal;
      }

      // needs padding due to occasional background colour
      // is intentionally small and not balanced with other padding
      // as tables can be quite wide
      tr > :first-child {
        padding-left: govuk-spacing(1);
      }

      // add spacing so that groupings are clearer
      tr.section-heading > * {
        font-weight: bold;
        padding-top: govuk-spacing(6);
      }

      // ideally this should be just a top margin on the tfoot
      // but as that is very tricky, this is more complex
      tbody:last-of-type tr:last-child > *,
      tfoot ~ tbody:last-of-type tr:last-child > * {
        padding-bottom: govuk-spacing(6);
      }

      tbody:last-child tr:last-child > * {
        padding-bottom: govuk-spacing(2);
      }

      // total and subtotal rows
      tr.subtotal > *,
      tr.total > * {
        border-top: 3px solid govuk-colour("mid-grey", $legacy: "grey-2");
      }

      tr.total > *,
      tbody tr.subtotal > * {
        font-weight: bold;
      }

      // the total is usually in the tfoot, so already has that background colour
      // but when it's used inside the tbody, it should also be highlighted
      tr.total {
        background-color: govuk-colour("light-grey", $legacy: "grey-3");
      }
    }
    // stylelint-enable selector-no-qualifying-type
  }
}

@include govuk-media-query($media-type: print) {
  .gem-c-govspeak-html-publication {
    .govuk-sticky-element {
      display: none;
    }
  }
}