@import './vendor/normalize';

@import './fonts';
@import './shared/index';


* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

main {
  @include site-gutters();
  overflow: hidden;
}

// DEFAULT TYPE STYLES
// =================================================================================================
html {
  font-family: $font-stack-primary;
  font-size: $base-font-size * 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  @include type-body-primary();
  overflow-x: hidden;
  background-color: color(gray, 80);
  color: #fff;
  -webkit-overflow-scrolling: touch;
}

// Selected text
@include type-selection;

// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1em 0;
}

h1 {
  @include type-heading-h1;
}

h2 {
  @include type-heading-h2;
}

h3 {
  @include type-heading-h3;
}

h4 {
  @include type-heading-h4;
}

h5 {
  @include type-heading-h5;
}

// Body Type
p {
  margin: 1em 0;
}

// User inputs
input,
textarea,
button {
  font-family: $font-stack-primary;
}

// Horizontal Rules
hr {
  height: rem(2);
  margin: rem(16) 0;
  background-color: $type-color-default;
  border: 0;
}

// Navigation
nav {
  ol,
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
}

// Code
code {
  display: inline-block;
  padding: 0 0.5em;
  line-height: 1.6;
  color: $type-color-code-inline;
  word-break: break-all;
  background-color: lighten($type-color-code-inline, 42%);
  border: 1px solid lighten($type-color-code-inline, 25%);
  border-radius: 0.25em;
}

pre {
  overflow: auto;
  background-color: color(gray, 10);
  border: 1px solid color(gray, 40);
  border-radius: 0.25em;

  code {
    padding-right: 2em;
    color: $type-color-code-block;
    background-color: color(gray, 10);
    border: 0;
  }
}

// Tables
table {
  width: 100%;
  line-height: (20/16);
  background-color: color(white);
  border: 1px solid color(gray, 40);
  border-spacing: 0;
  border-radius: 3px;
}

td,
th {
  padding: em(17);
  border-right: 1px solid color(gray, 40);
  border-bottom: 1px solid color(gray, 40);

  &:last-child {
    border-right: 0;
  }
}

th {
  padding: em(17);
  font-weight: normal;
  text-align: left;
}

td {
  padding: em(18);
}

tr:last-child td {
  border-bottom: 0;
}

td:global(.selected),
:global(.selected) td {
  background-color: #fee385;
}

:global(.noContent) {
  @include no-content;
}

:global(.modal-open),
:global(.modal-open) body {
  overflow: hidden;
}