// Typography // ==========================================================================

// Increase the base font size to 19px for the main content area // Using the core-19 mixin from the govuk_toolkit _typography.scss file

main {

@include core-19;
-webkit-font-smoothing: antialiased;

}

// Core font sizes .font-xxlarge {

@include core-80;

}

.font-xlarge {

@include core-48;

}

.font-large {

@include core-36;

}

.font-medium {

@include core-24;

}

.font-small {

@include core-19;

}

.font-xsmall {

@include core-16;

}

// Bold font sizes .bold-xxlarge {

@include bold-80();

}

.bold-xlarge {

@include bold-48();

}

.bold-large {

@include bold-36();

}

.bold-medium {

@include bold-24();

}

.bold-small {

@include bold-19();

}

.bold-xsmall {

@include bold-16();

}

// Bold, without needing a font size .bold {

font-weight: 700;

}

// Common heading sizes // Using the bold-xx mixins from the govuk_toolkit _typography.scss file // Spacing is set in em, using the px to em function in the elements _helpers.scss file

// Headings .heading-xlarge {

@include bold-48();

margin-top: em(15, 32);
margin-bottom: em(30, 32);

@include media(tablet) {
  margin-top: em(30, 48);
  margin-bottom: em(60, 48);
}

.heading-secondary {
  @include heading-27();

  display: block;
  color: $secondary-text-colour;
}

}

.heading-large {

@include bold-36();

margin-top: em(25, 24);
margin-bottom: em(10, 24);

@include media(tablet) {
  margin-top: em(45, 36);
  margin-bottom: em(20, 36);
}

.heading-secondary {
  @include heading-24();

  display: block;
  color: $secondary-text-colour;
}

}

.heading-medium {

@include bold-24();

margin-top: em(25, 20);
margin-bottom: em(10, 20);

@include media(tablet) {
  margin-top: em(45, 24);
  margin-bottom: em(20, 24);
}

}

.heading-small {

@include bold-19();

margin-top: em(10, 16);
margin-bottom: em(5, 16);

@include media(tablet) {
  margin-top: em(20, 19);
}

}

// Text p, .body-text {

margin-top: em(5, 16);
margin-bottom: em(20, 16);

@include media(tablet) {
  margin-top: em(5);
  margin-bottom: em(20);
}

}

.body-text {

display: block;

}

// Lede, or intro text .lede {

@include core-24;

}

// Set a max-width for text blocks // Less than 75 characters per line of text .text {

max-width: 30em;

}

.text-secondary {

color: $secondary-text-colour;

}

// Link styles .link {

color: $link-colour;
text-decoration: underline;

}

.visited {

color: $link-visited-colour;

}

.hover {

color: $link-hover-colour;

}

.active {

color: $link-colour;

}

// Back link styles - with left pointing arrow

.link-back {

@include inline-block;
position: relative;

@include core-16;

margin-top: $gutter-half;
margin-bottom: $gutter-half;
padding-left: 14px;

color: $black;

&:link,
&:visited,
&:hover,
a#{&}:focus,
&:active {
  color: $black;
}

text-decoration: none;
border-bottom: 1px solid $black;

// Back arrow - left pointing black arrow
&::before {
  content: '';
  display: block;
  width: 0;
  height: 0;

  border-top: 5px solid transparent;
  border-right: 6px solid $text-colour;
  border-bottom: 5px solid transparent;

  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
}

// Fallback
// IE8 doesn't support rgba and only supports the single colon syntax for :before
// IE7 doesn't support pseudo-elements, let's fallback to an image instead.
// Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
@include ie-lte(8) {
  background: file-url("icon-arrow-left.png") no-repeat 0 4px;
}

} // Code styles .code {

color: $text-colour;
background-color: $highlight-colour;

text-shadow: 0 1px $page-colour;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 14px;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;

border: 1px solid $border-colour;
padding: 4px 4px 2px;

}

// Horizontal rule style hr {

display: block;
background: $border-colour;
border: 0;
height: 1px;
margin-top: $gutter;
margin-bottom: $gutter;
padding: 0;

@include ie-lte(7) {
  color: $border-colour;
}

}

// Notice, text with an icon to the left .notice {

@extend %contain-floats;
position: relative;

.icon {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -17px; // Half the height of the important icon
}

strong {
  display: block;
  padding-left: (35 + 30) + px;
  margin-left: -$gutter-half;
}

}

// Data .data {

margin-top: em(5, 16);
margin-bottom: em(20, 16);

@include media(tablet) {
  margin-top: em(5, 19);
  margin-bottom: em(20, 19);
}

}

.data-item {

display: block;
line-height: 1;

}