// `govuk_frontend_toolkit`
@import "measurements";
@import "grid_layout";
@import "typography";
@import "colours";

@import "../components/back-link";
@import "../components/fieldset";
@import "../components/label";
@import "../components/radio";
@import "../components/task-list";
@import "../components/task-list-header";
@import "../components/task-list-related";

$border-color: #ccc;

.govuk-component-guide-wrapper {
  padding-bottom: $gutter * 1.5;
}

.component-list {
  margin-left: 20px;

  li {
    @include core-19;
    margin-bottom: $gutter-half;
  }
}

.component-body {
  margin-bottom: $gutter * 1.5;
}

.component-doc {
  @include core-16;

  .component-doc-h2:first-child {
    margin-top: 0;
  }
}

.component-violation {
  border: 3px solid $error-colour;
  margin: 0 0 $gutter;
  padding: $gutter $gutter;

  .component-violation__title {
    @include bold-24;
  }

  .component-violation__link {
    display: block;
    @include bold-19;
    color: $error-colour;
    margin: $gutter-half 0;
  }
}

.component-doc-h2 {
  @include bold-27;
  margin: ($gutter * 1.5) 0 $gutter;

  small {
    @include bold-16;
  }
}

.component-doc-h3 {
  margin: $gutter 0 $gutter-half;
  @include bold-19;
}

.component-guide-preview {
  padding: 30px 0;

  .preview-title {
    margin-bottom: 1em;
    @include bold-16;

    a {
      color: $black;
    }
  }
}

.component-call {
  margin-top: $gutter-half;
  margin-bottom: $gutter-half;

  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid $border-colour;

  &[contenteditable]:hover {
    cursor: text;
  }

  &[contenteditable]:focus {
    outline: 3px solid $focus-colour;
  }

  > pre {
    padding: $gutter;
    max-height: 300px;
    overflow: auto;

    > code {
      font-family: inherit;
      display: block;
    }
  }
}

.component-guide-preview {
  &.direction-rtl {
    direction: rtl;
    text-align: start;
  }

  &.dark-background {
    background-color: $govuk-blue;
  }

  padding: ($gutter * 1.5) $gutter $gutter;
  border: 1px solid $border-colour;
  position: relative;

  &:before {
    @include core-14;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.21053em 0.78947em;
    background: $border-colour;
    color: $black;
    font-weight: bold;
  }
}

.component-guide-preview--simple {
  border: 0;
  padding: 0;

  &:before {
    display: none;
  }
}

.component-guide-preview--violation,
.component-guide-preview--warning {
  margin-top: $gutter-half;
  @include core-19;

  &:empty {
    display: none;
  }

  h3 {
    @include bold-19;
  }

  p,
  h3 {
    margin-bottom: $gutter / 2;
  }

  h3:not(:first-child) {
    margin-top: $gutter;
  }

  .selector {
    font-style: italic;
  }
}

.component-guide-preview--warning {
  border-color: $yellow;

  &:before {
    background-color: $yellow;
  }
}

.component-guide-preview--violation {
  border-color: $red;

  &:before {
    background-color: $red;
    color: $white;
  }
}

.examples {
  .component-example {
    margin: 0 0 $gutter * 1.5;

    .example-title {
      @include bold-24;
      margin: $gutter-half 0;

      small {
        @include bold-16;
      }
    }
  }
}

// Preview Page Styling
html {
  background: $white;
}

.hide-header-and-footer {
  // scss-lint:disable IdSelector
  #global-header,
  #global-header-bar,
  #global-breadcrumb,
  #footer {
    display: none;
  }
  // scss-lint:enable IdSelector
}

.component-guide-preview-page {
  padding: ($gutter * 1.5) 0;
  position: relative;

  .preview-title {
    margin-bottom: 1em;
    @include bold-16;

    a {
      color: $black;
    }
  }
}

// Hide survey and cookie banners
// scss-lint:disable IdSelector
#user-satisfaction-survey-container,
#global-cookie-message {
  display: none !important;
}
// scss-lint:enable IdSelector

// Rouge syntax highlighting
// Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss

$code-00: scale-color($highlight-colour, $lightness:50%); // Default Background
$code-01: #f5f5f5; // Lighter Background (Unused)
$code-02: #bfc1c3; // Selection Background
$code-03: darken($secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting
$code-04: #e8e8e8; // Dark Foreground (Unused)
$code-05: $text-colour; // Default Foreground, Caret, Delimiters, Operators
$code-06: #ffffff; // Light Foreground (Unused)
$code-07: #ffffff; // Light Background (Unused)

$code-08: #ae5f3d; // Variables, XML Tags, Markup Link Text, Markup Lists
$code-09: #0E7754; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
$code-0a: #4C4077; // Classes, Markup Bold, Search Text Background
$code-0b: $govuk-blue; // Strings, Inherited Class, Markup Code
$code-0c: $govuk-blue; // Support, Regular Expressions, Escape Characters, Markup Quotes
$code-0d: #4C4077; // Functions, Methods, Attribute IDs, Headings
$code-0e: #a71d5d; // Keywords, Storage, Selector, Markup Italic
$code-0f: #C92424; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?> (Unused)

$code-insert-bg: #DEF8CA;
$code-delete-bg: #FADDDD;

.component-highlight {

  // Map Rouge / Pygments Tokens to work with 'Base 16' themes

  background: $code-00;
  color: $code-05;

  //
  // Comments
  //

  .c,       // Comment
  .cm,      // Comment.Multiline
  .cp,      // Comment.Preproc
  .c1,      // Comment.Single
  .cs {     // Comment.Special
    color: $code-03;
  }

  //
  // Keywords
  //

  .k,       // Keyword
  .kc,      // Keyword.Constant
  .kd,      // Keyword.Declaration
  .kp,      // Keyword.Pseudo
  .kr {     // Keyword.Reserved
    color: $code-0e;
  }

  .kn {     // Keyword.Namespace
    color: $code-0c;
  }

  .kt {     // Keyword.Type
    color: $code-0a;
  }

  //
  // Operators
  //

  .o,       // Operator
  .ow {     // Operator.Word
    color: $code-0c;
  }

  //
  // Names
  //

  .n,       // Name
  .nb,      // Name.Builtin
  .bp,      // Name.Builtin.Pseudo
  .ni,      // Name.Entity
  .nl,      // Name.Label
  .py {     // Name.Property
    // Default styling
  }

  .nc,      // Name.Class
  .nn {     // Name.Namespace
    color: $code-0a;
  }

  .na,      // Name.Attribute
  .nf {     // Name.Function
    color: $code-0d;
  }

  .nv,      // Name.Variable
  .no,      // Name.Constant
  .vc,      // Name.Variable.Class
  .vg,      // Name.Variable.Global
  .vi {     // Name.Variable.Instance
    color: $code-08;
  }

  .nd {     // Name.Decorator
    color: $code-0c;
  }

  .nt,      // Name.Tag
  .nx {     // Name.Other
    color: $code-09;
  }

  .ne {     // Name.Exception
    color: $code-0f;
  }

  //
  // Literals
  //

  .l  {     // Literal
    color: $code-09;
  }

  .ld {     // Literal.Date
    color: $code-0b;
  }

  .m,       // Literal.Number
  .mf,      // Literal.Number.Float
  .mh,      // Literal.Number.Hex
  .mi,      // Literal.Number.Integer
  .il,      // Literal.Number.Integer.Long
  .mo {     // Literal.Number.Oct
    color: $code-09;
  }

  .s,       // Literal.String
  .sb,      // Literal.String.Backtick
  .s2,      // Literal.String.Double
  .sh {     // Literal.String.Heredoc
    color: $code-0b;
  }

  .sx,      // Literal.String.Other
  .sr,      // Literal.String.Regex
  .s1,      // Literal.String.Single
  .ss {     // Literal.String.Symbol
    color: $code-0b;
  }

  .se,      // Literal.String.Escape
  .si {     // Literal.String.Interpol
    color: $code-09;
  }

  .sd {     // Literal.String.Doc
    color: $code-03;
  }

  .sc {     // Literal.String.Char
    // Default styling
  }

  //
  // Diffs
  //

  .gi {     // Generic.Inserted
    background-color: $code-insert-bg;
  }

  .gd {     // Generic.Deleted
    background-color: $code-delete-bg;
  }

  //
  // Misc
  //

  .p {      // Punctuation
    // Default styling
  }

  .w {      // Text.Whitespace
    // Default styling
  }

  .hll {    // Highlight
    background-color: $code-02;
  }

  .err,     // Error
  .gr,      // Generic.Error
  .gt {     // Generic.Traceback
    color: $code-0f;
  }

  .gs {     // Generic.Strong
    font-weight: bold;
  }

  .ge {     // Generic.Emph
    font-style: italic;
  }

  .gh {     // Generic.Heading
    font-weight: bold;
  }

  .gu {     // Generic.Subheading
    color: $code-0a;
    font-weight: bold;
  }

  .gp {     // Generic.Prompt
    color: $code-03;
    font-weight: bold;
  }
}

// Specific for this Gem, optimized for erb render statements
.component-highlight {
  .s2 {
    color: $code-08;
  }

  .n + .s2 {
    color: $code-09;
  }
}