// ===================================================
// Normalize
// ===================================================

/*
  Base Styles

  Styleguide 1
*/
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background: transparent;

  @if map-get($kittn-activate, box-sizing) { box-sizing: border-box; }

  @if map-get($kittn-typo, unit) == rem {
    @if $kittn-active-responsive-fonts != false {
      @include responsive-fontsize($kittn-active-responsive-fonts);

    } @else {
      font-size: map-get($kittn-typo, base-scale) + 0%;
    }

  } @else {
    font-size: map-get($kittn-typo, base-scale) + 0%;
  }
}

// Global Activation
* {
  @if map-get($kittn-activate, antialias) { @include antialias; }

  @if map-get($kittn-activate, box-sizing) == true {
    &, &:before, &:after {
      box-sizing: inherit;
    }
  }
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  position: relative;
  color: map-get($kittn-color-route, text);
  @include fontsize(map-get($kittn-typo, base-size));
  line-height: map-get($kittn-typo, line-height);

  @if map-get($kittn-activate, hyphens) { @include text-hyphen; }

  @if map-get($kittn-color-route, body) { background-color: map-get($kittn-color-route, body); }

  @if map-get($kittn-typo-style, base-weight) { font-weight: map-get($kittn-typo-style, base-weight); }
}

@if map-get($kittn-activate, viewport-fix) { @-ms-viewport { width: device-width; }}

@if map-get($kittn-activate, hyphens) == true {
  abbr, acronym, code, dir, kbd,
  listing, plaintext, q, samp, tt, var, xmp {
    hyphens: none;
  }
}

h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul {
  margin-top: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary
{display: block;
}

audio, progress, canvas, video {
  display: inline-block;
}

body, button, input, select, textarea, .sg-body {
  font-family: map-get($kittn-typo-style, base-font);
}

audio:not([controls]) {
  display: none;
  height: 0;
}

select, option, button, a, input[type="button"],input[type="reset"],input[type="submit"] {
  cursor: pointer;
}

[hidden],template {
  display: none;
}

/*
  Typosizes

  A definition of all fontsizes (classes and tags)

  Styleguide 1.1
*/

/*
  Main Heading Style

  markup:
  <h1>Lorem Ipsum it dolor</h1>
  <h3>Lorem Ipsum it dolor</h3>

  Styleguide 1.1.1
*/
%heading {
  text-rendering: optimizeLegibility;
  @if map-get($kittn-global-heading,texttransform) != false {
    text-transform: map-get($kittn-global-heading,texttransform);
  }

  @if map-get($kittn-global-heading,lineheight) != false {
    @if map-get($kittn-global-heading,lineheight) == d {
      line-height: 1.25;

    } @else {
      @include lineheight(map-get($kittn-global-heading,lineheight));
    }
  }

  @if map-get($kittn-global-heading,marginbottom) != false {
    @include marginbottom(map-get($kittn-global-heading,marginbottom));
  }

  @if map-get($kittn-global-heading,fontweight) != false {
    font-weight: map-get($kittn-global-heading,fontweight);
  }

  @if map-get($kittn-typo-style, heading-font) != false OR map-get($kittn-color-route, headline) != false {
    @if map-get($kittn-typo-style, heading-font) != false {
      font-family: map-get($kittn-typo-style, heading-font);
    }

    @if map-get($kittn-color-route, headline) != false {
      color: map-get($kittn-color-route, headline);
    }
  }
}

// Generate Fontsizes
@if $kittn-generate-typostyles { @include typogenerator; }


/*
  Typostyles and Elements

  Styleguide 1.2
*/

/*
  Header-Stack

  Group Wrapper for Headlines

  markup:
  <header class="header-stack">
    <h1>Main Headline</h1>
    <h2 class="h4">Subheadline</h2>
  </header>

  Styleguide 1.2.1
*/
.header-stack {
  @if map-get($kittn-global-heading,marginbottom) != false {
    @include marginbottom(map-get($kittn-global-heading,marginbottom));
  }

  > * {
    margin-bottom: 0
  }

  @if map-get($kittn-typo-margin,top) > 0 {

    p + & {
      @include margintop(map-get($kittn-typo-margin, top));
    }
  }
}

/*
  Paragraph

  Style for Texts

  markup:
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.2
*/
p {

  @include marginbottom(map-get($kittn-typo-margin, bottom));

  @if map-get($kittn-typo-margin,top) > 0 {
    + h1, + h2, + h3, + h4, + h5, + h6 {
      @include margintop(map-get($kittn-typo-margin, bottom) * 1.8);
    }
  }
}

/*
  Links

  Style for Text Links

  markup:
  <a href="#">This is a link</a>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.3
*/
a {
  outline: 0;
  line-height: inherit;
  background: transparent;
  color: map-get($kittn-color-route,link);

  @if map-get($kittn-typo-style,link-decoration) {
    text-decoration: underline;
  } @else {
    text-decoration: none;
  }

  &:hover,
  &.link-hover {
    color: map-get($kittn-color-route,link-hover);

    @if map-get($kittn-typo-style,link-decoration-hover) {
      text-decoration: underline;
    } @else {
      text-decoration: none;
    }
  }

  &:active,
  &.is-active {
    color: map-get($kittn-color-route,link-active);
  }

  &:hover,
  &:active,
  &:focus {
    outline: 0;
  }
}

/*
  Strong

  Bold Style for Texts

  markup:
  <p><strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</strong> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.4
*/
strong {
  @if map-get($kittn-typo-style,bold-weight) { font-weight: map-get($kittn-typo-style,bold-weight); }

  @if map-get($kittn-typo-style,bold-font) { font-family: map-get($kittn-typo-style,bold-font); }
}

/*
  Italic

  Italic Style for Texts

  markup:
  <p><em>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</em> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.5
*/
em, dfn {
  @if map-get($kittn-typo-style,italic-style) { font-style: map-get($kittn-typo-style,italic-style); }

  @if map-get($kittn-typo-style,italic-font) != false { font-family: map-get($kittn-typo-style,italic-font); }
}

/*
  Abbr

  markup:
  <abbr>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</abbr>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.6
*/
abbr {
  font-variant: small-caps;
  text-transform: lowercase;

  &[title] {
    border-bottom: 1px dotted;

    &:hover {
      cursor: help;
    }
  }
}


/*
  Hightlight, Mark

  For Highlightning text passages, also for hightlightning with mouse select

  markup:
  <p><mark>Lorem ipsum dolor sit amet</mark>, consetetur sadipscing elitr</p>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.7
*/
mark, .hightlight, ::selection {
  background: map-get($kittn-color-route,highlight-bg);
  color: map-get($kittn-color-route,hightlight-text);
}


/*
  Lists

  Styles for Unordered, Ordered and Definition Lists. If a `<ul>` or `<dl>` is wrapped in a `<nav>`, the list got an neutral style.

  markup:
  <ul>
    <li>List Entry</li>
    <li>List Entry</li>
    <li>List Entry</li>
  </ul>
  <ol>
    <li>List Entry</li>
    <li>List Entry</li>
    <li>List Entry</li>
  </ol>
  <dd>
    <dt>List Entry</dt>
    <dd>List Entry</dd>
  </dd>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.8
*/
ul,dl {
  list-style-type: map-get($kittn-typo-sizes,list-style);
  padding-left: map-get($kittn-typo-sizes,list-margin) + 0px;
  @include marginbottom(map-get($kittn-typo-margin,bottom));

  nav & {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
  }
}

ol {
  padding-left: map-get($kittn-typo-sizes,list-margin) + 2px;
  @include marginbottom(map-get($kittn-typo-margin,bottom));
}

li, dt, dd {
  @if map-get($kittn-typo-sizes,list-fontsize) != false {
    @include fontsize(map-get($kittn-typo-sizes,list-fontsize));
  }

  @if map-get($kittn-typo-sizes,list-lineheight) != false {
    line-height: map-get($kittn-typo-sizes,list-lineheight);
  }
}

li {
  > ul,  > ol {
    margin-bottom: 0;
  }
}

dt, dd {
  > dl {
    margin-bottom: 0;
  }
}

/*
  Hairline

  markup:
  <hr>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.9
*/
hr {
  @include marginbottom(map-get($kittn-typo-margin, bottom));
  height: map-get($kittn-hairline,height) + 0px;
  border-left: 0;
  border-bottom: 0;
  border-right: 0;
  border-top: (map-get($kittn-hairline,height) + 0px) map-get($kittn-hairline,style) map-get($kittn-hairline,color);
  position: relative;

  @if map-get($kittn-typo-margin,top) > 0 {
    @include margintop(map-get($kittn-typo-margin,bottom)); }
}

/*
  Code

  For write some code snippets

  markup:
  <code>
    <pre>
      <div>some Code</div>
    </pre>
  <code>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.10
*/
code, kbd, pre, samp {
  @if map-get($kittn-typo-sizes, code-fontsize) != false {
    @include fontsize(map-get($kittn-typo-sizes, code-fontsize));
  }

  @if map-get($kittn-typo-sizes, code-lineheight) != false {
    line-height: map-get($kittn-typo-sizes, code-lineheight);
  }

  @if map-get($kittn-typo-style, code-weight) != false {
    font-weight: map-get($kittn-typo-style, code-weight);
  }

  @if map-get($kittn-typo-style, code-font) != false {
    font-family: map-get($kittn-typo-style, code-font);

  } @else {
    font-family: monospace, serif;
  }
}

pre {
  white-space: pre;
  @include marginbottom(map-get($kittn-typo-margin,bottom));

  > code {
    word-wrap: normal;
    white-space: pre-wrap;
  }
}

code {
  white-space: pre;
}

/*
  Quotes

  markup:
  <q>Say something</q>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.11
*/
q {
  quotes: "\201C" "\201D" "\2018" "\2019";

  &:before, &:after {
    content: '';
    content: none;
  }
}

/*
  Small Fonts

  Some Styles for Smaller Texts

  markup:
  <small>Small Text</small><br>
  <sup>Superposition</sup><br>
  <sub>Subposition</sub>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.12
*/
small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

i {
  font-style: normal;
  display: inline-block;
}

/*
  Blockquotes

  Simple Style for Blockquotes

  markup:
  <blockquote>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <cite>Author from Lorem Ipsum</cite>
  </blockquote>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.2.13
*/
blockquote {
  margin-left: 0;
  margin-right: 0;
  @include marginbottom(map-get($kittn-typo-margin,bottom));

  & p {
    @if map-get($kittn-typo-sizes,quote-fontsize) != false {
      @include fontsize(map-get($kittn-typo-sizes,quote-fontsize));
    }

    @if map-get($kittn-typo-sizes,quote-lineheight) != false {
      line-height: map-get($kittn-typo-sizes,quote-lineheight);
    }
  }

  cite {
    font-style: normal;

    @if map-get($kittn-typo-sizes,cite-fontsize) != false {
      @include fontsize(map-get($kittn-typo-sizes,cite-fontsize));
    }

    @if map-get($kittn-typo-sizes,cite-lineheight) != false {
      line-height: map-get($kittn-typo-sizes,cite-lineheight);
    }

    &:before {
      content : '\2014 \0020';
    }
  }

  // The Last off all inner Elements get not bottom spacing
  *:last-child {
    margin-bottom: 0;
  }
}

blockquote, q, cite {
  @if map-get($kittn-typo-style, quote-font) != false {
    font-family: map-get($kittn-typo-style, quote-font);
  }

  @if map-get($kittn-typo-style, quote-weight) != false {
    font-weight: map-get($kittn-typo-style, quote-weight);
  }

  @if map-get($kittn-typo-style, quote-style) != false {
    font-style: map-get($kittn-typo-style, quote-style);
  }

  @if map-get($kittn-color-route, blockquote) != false {
    color: map-get($kittn-color-route, blockquote);
  }
}

/*
  Base Media Elements

  Styleguide 1.3
*/

/*
  Image

  Base Style for Images. Images without `height` and `width` are fluid, to there max-width.

  markup:
  <img src="http://lorempixel.com/400/200/cats"><br>
  <img src="http://lorempixel.com/400/200/cats" height="300" width="200">

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.3.1
*/
img {
  border: 0;
  max-width: 100%;
  height: auto;

  &[width],
  &[height] {
    max-width: none;
  }
}

/*
  Figure

  Is a container for Images, all images inside `<figure>` fill the complete space.

  markup:
  <figure><img src="http://lorempixel.com/500/400/cats"></figure>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.3.2
*/
figure {
  margin: 0;

  img {
    display: block;
    max-width: none;
    width: 100%;
  }
}


/*
  Map

  Simple Wrapper to remove `max-width` from embed google Maps

  markup:
  <div class="map_canvas"><iframe...></div>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.3.3
*/
#map_canvas,
.map_canvas {
  img, embed, object {
    max-width: none !important;
  }
}

svg:not(:root) {
  overflow: hidden;
}

/*
  Video

  Make Video Elements Fluid

  markup:
  <video></video>

  sg-wrapper:
  <div class="sg-body" style="height: 0; overflow: hidden;">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.3.4
*/
video {
  width: 100% !important;
  height: auto !important;
}

/*
  Base Form Elements

  Styleguide 1.4
*/


/*
  Fieldset

  markup:
  <fieldset>Lorem Ipsum</fieldset>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.4.1
*/
fieldset {
  border: 0;
  padding: 0;
}

/*
  Legend

  markup:
  <legend>Lorem Ipsum</legend>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.4.2
*/
legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

/*
  Input

  markup:
  <input type="text" placeholder="Some Values...">

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.4.3
*/
input {
  line-height: normal;
  &:focus {
    outline: 0;
  }
}


/*
  Buttons, Selects, Inputs

  markup:
  <button>Button</button><br>
  <input type="submit" value="Submit"><br>
  <input type="reset" value="Reset"><br>
  <input type="checkbox" value="1"><br>
  <input type="radio" value="1"><br>
  <input type="search" value="1"><br>


  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.4.4
*/
button, optgroup, input, select, textarea {
  font-size: inherit;
  margin: 0;
  color: inherit;
}

button {
  line-height: normal;
  overflow: visible;
}

button, select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button:focus {
  outline: none;
}

/*
  Textarea

  markup:
  <textarea name="" id="" cols="30" rows="10"></textarea>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.4.5
*/
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/*
  Table Elements

  Styleguide 1.5
*/

/*
  Table

  markup:
  <table>
    <tr>
      <th>Table</th>
      <th>Head</th>
    <tr>
    <tr>
      <td>Table</td>
      <td>Cell</td>
    </tr>
  </table>

  sg-wrapper:
  <div class="sg-body">
    <sg-wrapper-content/>
  </div>

  Styleguide 1.5.1
*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}