@import 'normalize.css';
@import 'vars';
@import 'type';
@import '../../node_modules/highlight.js/styles/solarized-light';
/*@import '../../node_modules/materialize-css/dist/css/materialize.min';*/

@font-face {
  font-family: 'robotolight';
  src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
       url('../fonts/roboto-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotomedium';
  src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
       url('../fonts/roboto-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotoregular';
  src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
       url('../fonts/roboto-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(../../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

* {
  box-sizing: border-box;

  &:before,
  &:after {
    box-sizing: border-box;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--body-bg);
  margin-bottom: var(--footer-height);
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

pre {
  word-break: break-all;
  word-wrap: break-word;
  border-radius: 4px;
}

.clearfix, .cf {
  @apply --clearfix;
}

.container {
  @apply --clearfix;
  margin-right: auto;
  margin-left: auto;
  padding-left:  calc(var(--grid-gutter-width) / 2);
  padding-right: calc(var(--grid-gutter-width) / 2);
}

.row {
  @apply --row;
}

.details {
  padding-top: calc(var(--navbar-height) + 24);
}

// Z-levels
.z-depth-0 {
  box-shadow: none !important;
}
.z-depth-1{
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-1-half{
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-2{
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-3{
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-4{
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.z-depth-5{
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

@media (--screen-sm) {
  .container {
    width: var(--container-sm);
  }
  .details {
    padding-top: calc(var(--navbar-height-short) + 24);
  }
}
@media (--screen-md) {
  .container {
    width: var(--container-md);
  }
}
@media (--screen-lg) {
  .container {
    width: var(--container-lg);
  }
}