:root {
  --w-sys-logoHeight: @id7-masthead-logo-height-xs;
  & when not (@id7-masthead-logo-height-xs = @id7-masthead-logo-height-sm) {
    @media (min-width: @grid-float-breakpoint) {
      --w-sys-logoHeight: @id7-masthead-logo-height-sm;
    }
  }
  // ID-457 while most mobiles report a larger width, older phones
  // that report a width of 320px (e.g. iPhone 5) need a smaller logo.
  & when not (@id7-masthead-logo-height-xxs = @id7-masthead-logo-height-xs) {
    @media (max-width: 320px) {
      --w-sys-logoHeight: @id7-masthead-logo-height-xxs;
    }
  }

  // From the Brand Book:
  //  When the Wordmark and Crest are split, the
  //  height of the Crest must be 1.75 times the
  //  height of the Wordmark. This rule also applies
  //  to the Responsive Crest.
  --w-sys-crestHeight: calc(1.75 * var(--w-sys-logoHeight));
  --w-sys-crestAspect: ~"107 / 150"; // Stop Less doing its maths

  --w-ref-images-crestPositive: @id7-image-crest-positive; // Black crest
  --w-ref-images-crestNegative: @id7-image-crest-negative; // White crest
}

html {
  font-size: 0.625rem;
}

.id7-main-content-area {
  font-weight: @main-font-weight;
  font-size: (@main-font-size * @font-scale-xs);

  & when not (@font-scale-xs = 1.0) {
    @media (min-width: @grid-float-breakpoint) {
      font-size: @main-font-size;
    }
  }

  // Only add the right padding on a screen (to avoid it going on print)
  @media screen and (min-width: @grid-float-breakpoint) {
    .id7-main-content > .layout > .column-1 > .column-1-content > p {
      padding-right: 4rem;
    }
  }
}

// Add a crest image to the top right of an element,
// by adding it as a pseudo-element and then layout it out
// with flexbox (which pseudo-elements participate in).
.crest-right when (@id7-gen-logos >= 2025) {
  .crest-right(positive);
}


.crest-right(positive) {
  --w-sys-images-crest: var(--w-ref-images-crestPositive);
}

.crest-right(negative) {
  --w-sys-images-crest: var(--w-ref-images-crestNegative);
}

.crest-right(@_) {
  @media screen {
    &::before {
      display: block;
      content: var(--w-sys-images-crest);
      height: var(--w-sys-crestHeight);
      aspect-ratio: var(--w-sys-crestAspect);
      margin-left: auto;
    }
  }
}