HBM/md-components

/**
 * Variables
 */

$navigation-width: 240px;
$header-height: 64px;

/**
 * Scaffolding
 */

// Reset the box-sizing
//
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
  box-sizing: border-box;

  // Changes the default tap highlight to be completely transparent in iOS.
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  background: #f9f9f9;
  color: #333;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: 48px;

  @include medium {
    padding-top: 64px;
  }
}

input,
textarea,
select,
button {
  font-family: 'Roboto', sans-serif;
}

main {
  font-size: 13px;
  padding-left: 10px;
  padding-right: 10px;

  @include xlarge {
    margin-left: $navigation-width;
  }
}