/**
 * Common Design: Resets
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
input {
  font-size: 16px;
}

body {
  color: var(--cd-grey--dark);
  font-family: var(--cd-font--roboto);
  font-size: 1rem;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  body {
    font-size: var(--cd-font-size--base);
  }
}

body.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/**
 * Custom-styled lists
 *
 * When the attribute ARIA role "list" is applied to a <ul> tag, we can assume
 * the intention is to have complete styling control over this list and remove
 * all of the default typographic treatment: spacing / bullets
 */
[role=list] {
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Respect user prefs for animations/transitions
 *
 * Some people prefer not to see animations/transitions for medical or personal
 * reasons. Additionally it can happen that the browser is unable to draw the
 * animations at a sufficient speed.
 *
 * This block of rules will wholesale disable the animations when unwanted,
 * leaving the codebase to implement its animations/transitions in a simple
 * format without individual rules needing to be qualified.
 */
@media (prefers-reduced-motion: no-preference) {
  *,
  *::before,
  *::after {
    /* turn animations on if user doesn't mind */
    animation-play-state: running;
  }
}

@media not (update: fast) {
  *,
  *::before,
  *::after {
    /* turn them off again if the browser can't draw them effectively */
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* explicitly disable animations and transitions when requested */
    transition-duration: 0s !important;
    animation-play-state: paused;
  }
}