// GOV.UK front end toolkit
// Sass variables, mixins and functions
// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets

// Settings (variables)
@import "colours";                                // Colour variables
@import "measurements";                           // Widths and gutter variables

// Mixins
@import "conditionals";                           // Media query mixin
@import "grid_layout";                            // Basic grid layout mixin
@import "typography";                             // Core bold and heading mixins, also external links

// GOV.UK elements
@import "elements/helpers";                       // Helper functions and classes

// ==========================================================================
// Elements page styles
// These are example styles, used only for the elements pages
// ==========================================================================

// Add a class to wrap the <main> element
// This is so the breadcrumb can sit outside <main>
.site-wrapper {
  @extend %site-width-container;

  // Override margins set on #content
  // This is a kludge to prevent a breaking change to govuk_elements_sass
  // where @extend %site-width-container; is set for #content, so we need to override its margins
  #content {
    margin: 0;
  }
}

.elements-index {
  // Reduce top and bottom margins
  .heading-medium {
    margin: 1em 0 0 0;
  }
  // Add spacing above
  .divider {
    margin-top: 4em;
  }
}

// Increase spacing above GOV.UK elements page headings
main > .heading-xlarge {
  @include media(tablet) {
    margin-top: em(60, 48);
    margin-bottom: em(30, 48);
  }
}

// Page contents
.heading-contents {
  margin-top: 3em;
}

.list-contents li {
  @include core-16;
}

// Use for paragraphs before lists
.lead-in {
  margin-bottom: 0;
}

// Lists
.list-bullet {
  margin-bottom: ($gutter*1.5);
}

.list-underline {
  border-top: 1px solid #bfc1c3;
}

.list-underline li {
  border-bottom: 1px solid #bfc1c3;
  padding: 2px 0 3px 0;
}

.list-underline a {
  text-decoration: none;
}

.no-top-margin {
  margin-top: 0;
}

// deprecation notice
.notification-summary {
  border: 4px solid $govuk-blue;

  margin-top: $gutter-half;
  margin-bottom: $gutter-half;

  padding: $gutter-half 10px;

  p {
    max-width: 38em;
  }

  @include media(tablet) {
    border: 5px solid $govuk-blue;

    margin-top: $gutter;
    margin-bottom: $gutter;

    padding: $gutter-two-thirds $gutter-half $gutter-half;
  }
}

// Example boxes
// ==========================================================================

.example {
  @extend %contain-floats;
  position: relative;
  overflow: hidden;
  border: 1px solid $grey-2;
  margin-top: $gutter-half;
  margin-bottom: $gutter-half;

  padding-top: $gutter;
  padding-right: $gutter-half;
  padding-bottom: $gutter-half;
  padding-left: $gutter-half;

  @include media(tablet) {
    padding-top: $gutter*1.5;
    padding-right: $gutter;
    padding-bottom: $gutter;
    padding-left: $gutter;
  }

  &:before {
    content: "EXAMPLE";

    position: absolute;
    top: 0;
    left: 0;

    padding: em(4) em(15) em(4) em(15);

    @include core-14;
    background: $grey-2;
    color: white;
  }

  // Blue text for heading sizes
  .highlight {
    font-style: normal;
    color: $hm-government;
  }

  // Lists (reset this to elements default)
  .list-bullet {
    margin-bottom: 20px;
  }

  // Fix grid layout within example boxes for IE7 and below
  // where box-sizing isn't supported: http://caniuse.com/#search=box-sizing
  @mixin example-box-column($width) {
    width: (($site-width - $gutter) * $width) - $gutter;
  }

  @include ie-lte(7){

    // Set example box width to 900px (removing left and right padding)
    $example-box-width: $site-width - ($gutter * 2);
    width: $example-box-width;

    // Recalculate grid column widths
    .column-quarter {
      @include example-box-column( 1/4 );
    }
    .column-half {
      @include example-box-column( 1/2 );
    }
    .column-third {
      @include example-box-column( 1/3 );
    }
    .column-two-thirds {
      @include example-box-column( 2/3 );
    }

    // Scale images to fit grid columns
    img {
      width: 100%;
    }
  }

}


// 1. Layout
// ==========================================================================

$grid-stripe-light: #7DADD3;
$grid-stripe-dark: #B7CFE1;

.example-grid p {
  width: 100%;
  background-color: $grid-stripe-light;
  background-image: repeating-linear-gradient(180deg, $grid-stripe-light, $grid-stripe-light $gutter-half, $grid-stripe-dark $gutter-half, $grid-stripe-dark $gutter);
  margin-bottom: 0;
  height: 30px;
  @include media(tablet) {
    height: 60px;
  }
  overflow: hidden;
  text-indent: -999em;
}


// 2. Typography
// ==========================================================================


// 3. Colour
// ==========================================================================

// Colour swatches
.swatch {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  @include media(mobile) {
    clear: both;
    float: left;
    margin-right: $gutter-half;
    margin-bottom: $gutter-half;
  }
  @include media(tablet) {
    margin: 0 auto $gutter-half auto;
  }
}

// Sass list for colour palette
$palette: (
  ("purple", $purple),
  ("mauve", $mauve),
  ("fuschia", $fuschia),
  ("pink", $pink),
  ("baby-pink", $baby-pink),
  ("red", $red),
  ("mellow-red", $mellow-red),
  ("orange", $orange),
  ("brown", $brown),
  ("yellow", $yellow),
  ("green", $green),
  ("grass-green", $grass-green),
  ("turquoise", $turquoise),
  ("light-blue", $light-blue),
  ("govuk-blue", $govuk-blue)
);

@mixin color-swatches {
  @each $color in $palette {
    $color-name: nth($color, 1);
    $color-var: nth($color, 2);
    .swatch-#{$color-name} {
      background-color: $color-var;
    }
  }
}

// Generate swatch classes for each colour in palette list
@include color-swatches;

.swatch-alpha {
  background-color: $alpha-colour;
}

.swatch-beta {
  background-color: $beta-colour;
}

.swatch-discovery {
  background-color: $discovery-colour;
}

.swatch-live {
  background-color: $live-colour;
}

.swatch-error {
  background-color: $error-colour;
}

.swatch-focus {
  background-color: $focus-colour;
}

.swatch-button-colour {
  background-color: $button-colour;
}

.swatch-black {
  background-color: $black;
}

.swatch-grey-1 {
  background-color: $grey-1;
}

.swatch-grey-2 {
  background-color: $grey-2;
}

.swatch-grey-3 {
  background-color: $grey-3;
}

.swatch-grey-4 {
  background-color: $grey-4;
}

.swatch-white {
  background-color: $white;
  border: 1px solid $grey-3;
}

.swatch-text-colour {
  background-color: $text-colour;
}

.swatch-text-secondary {
  background-color: $secondary-text-colour;
}

.swatch-page-colour {
  background-color: $page-colour;
  border: 1px solid $grey-3;
}

.swatch-button-colour {
  background-color: $button-colour;
}

.swatch-link-colour {
 background-color: $link-colour;
}

.swatch-link-colour-visited {
 background-color: $link-visited-colour;
}

.swatch-link-colour-hover {
 background-color: $link-hover-colour;
}

.swatch-border-colour {
  background-color: $border-colour;
}

.swatch-panel-colour {
  background-color: $panel-colour;
}

.swatch-highlight-colour {
  background-color: $highlight-colour;
}

// Colour swatch layout
.swatch-wrapper {
  @include media(tablet) {
    float: left;
    width: 20%;
    text-align: center;
  }

  .heading-small {
    margin-bottom: em(10);
  }

  ul {
    list-style-type: none;
    padding-bottom: $gutter-half;
    @include media(mobile) {
      min-height: 50px;
      padding-top: 10px;
    }
  }
  li {
    @include core-16;
  }
  b {
  font-weight: bold;
  text-transform: uppercase;
  }
}


// 4. Images and icons
// ==========================================================================

.example-images img {
  max-width: 100%;
  vertical-align: top;
}


// 5. Data
// ==========================================================================

.example .data {
  margin-bottom: 0;
}


// 6. Forms
// ==========================================================================


// 7. Buttons
// ==========================================================================

// Remove top margin from headings in the "Creating buttons" example
.example-button .heading-small {
  margin-top: 0;
}

// Make swatch wrapper full width for "Creating buttons" example
.example-button .swatch-wrapper {
  width: 100%;
}


// 9. Alpha beta banners
// ==========================================================================
