@import 'normalize.css';
@import 'vars';
@import 'type';
@import '../../../node_modules/highlight.js/styles/atom-one-light';
@import '../../../node_modules/chartist/dist/chartist';

@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: normal;
  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 {
  display: inline-block;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  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;
  transition: var(--link-transition);

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

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

.clearfix,
.cf {
  @extend %clearfix;
}

.container {
  @extend %clearfix;

  margin-right: auto;
  margin-left: auto;
  padding-left: calc(var(--grid-gutter-width) / 2);
  padding-right: calc(var(--grid-gutter-width) / 2);
}

.row {
  @extend %row;
}

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

/* Z-levels */
.z-depth-0 {
  /* stylelint-disable-next-line declaration-no-important */
  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) + 24px);
  }
}

@media (--screen-md) {
  .container {
    width: var(--container-md);
  }
}

@media (--screen-lg) {
  .container {
    width: var(--container-lg);
  }
}
