/* ==========================================================================
 * Basic elements (no class selectors allowed)
 * ========================================================================== */

/**
 * Set up the html
 *
 * 1. Makes sure that some fonts are better rendered
 * 2. Set font to lining figures
 */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "lnum";
  box-sizing: border-box;
}

body {
  @include font-size(base);
  position: relative;
  line-height: $line-height-ratio;
  font-family: $font-roboto;
  margin: 0;
  color: palette(text, 500);
  background: palette(neutral, 0);
  overflow-x: hidden;
}


/**
 * [1] Make sure elements like input and textarea inherit some base properties
 *     https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
 *
 * [2] Setting box-sizing the best way per:
 *     https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
* {
  font-family: inherit;
  line-height: inherit;
  color: inherit;

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

/**
 * [1] Turn off text-shadow when selecting text for better readability
 */
::selection {
  background: palette(secondary);
  color: palette(text-on-secondary);
  text-shadow: none; /* [1] */
}

/* Remove default margin around figure
 */
figure {
  margin: 0;
}

/**
 * [1] Setting 'vertical-align' removes the whitespace that appears under 'img'
 *	   elements when they are dropped into a page as-is. Safer alternative to
 *	   using 'display: block;'.
 * [2] Remove border / especially on older browsers
 */
img, svg {
  vertical-align: middle; /*[1]*/
  border: none; /*[2]*/
  max-width: 100%;
}

/**
 *  Needed for iOS to prevent input zooming
 *  https://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to-fix-input-zoom
 */
input,
select,
textarea {
  font-size: 16px;
}


// Links with no class get a default hover
a:not([class]) {
  position: relative;
  color: palette(feedback, action);
  text-decoration: none;
  text-decoration-skip-ink: auto; // pretty underlining links

  &::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: palette(feedback, action);
    content: '';
    opacity: 0;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    transform: translateY(-5px);
  }

  &:hover {
    &::after {
      height: 2px;
      opacity: 1;
      transform: translateY(0px);
    }
  }
}


// TODO: Is this the right way to reset all margin??
// Reset all top margins
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr {
  margin-top: 0;
  margin-bottom: 0;
}