@import '../utilities/variables';

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

html {
  font-family: $base-font-family;
  font-size: $base-font-size;
  font-style: $base-font-style;
  font-weight: $base-font-weight;
  line-height: $base-line-height;
  color: $base-font-color;
  background: $base-bg;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

::selection {
  text-shadow: none;
  background: #b3d4fc;
}

/**
* A better looking default horizontal rule
*/

hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid #ccc;
}

/**
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/base5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
* Remove default fieldset styles.
*/

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

/**
* Allow only vertical resizing of textareas.
*/

textarea {
  resize: vertical;
}

/**
* Responsive images
*/

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

table {
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    padding: 0.5rem 0;
    text-align: left;
  }
}
