@import './mixins'

html
  background-color: var(--group-body-background)
  font-size: var(--group-body-font-size)
  min-width: 300px
  overflow-x: hidden
  overflow-y: scroll
  text-rendering: optimizeLegibility
  text-size-adjust: 100%
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased
  -webkit-tap-highlight-color: transparent
  -webkit-overflow-scrolling: auto

*:focus
  -webkit-tap-highlight-color: transparent
  outline: none
  -ms-touch-action: manipulation
  touch-action: manipulation

article,
aside,
figure,
footer,
header,
hgroup,
section
  display: block

body,
button,
input,
optgroup,
select,
textarea
  font-family: var(--group-body-font-family)

button
  color: var(--group-body-color)

body
  color: var(--group-body-color)
  font-size: var(--group-body-font-size)
  font-weight: var(--group-body-font-weight)
  line-height: var(--group-body-line-height)
  -webkit-overflow-scrolling: auto

a
  cursor: pointer
  text-decoration: none
  hyphens: auto
  margin: 0
  word-break: break-word
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  strong,
  &:any-link
    color: currentColor
  &:hover,
  &:any-link:hover
    color: var(--group-link-hover-color)
  &:active,
  &:any-link:active
    color: var(--group-link-active-color)

p
  hyphens: auto
  margin: 0
  word-break: break-word
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  strong
    color: currentColor
  &:not(:last-child)
    margin-bottom: var(--group-space-normal)

hr
  background-color: var(--group-divider-background)
  border: none
  display: block
  height: var(--group-border-width-normal)
  margin-top: var(--group-space-xx-large)
  margin-bottom: var(--group-space-xx-large)
  +tablet
    margin-top: var(--group-space-xx-large-tablet)
    margin-bottom: var(--group-space-xx-large-tablet)
  +desktop
    margin-top: var(--group-space-xx-large-desktop)
    margin-bottom: var(--group-space-xx-large-desktop)

img
  height: auto
  max-width: 100%

input[type="checkbox"],
input[type="radio"]
  vertical-align: baseline

small
  font-size: var(--group-small-font-size)

span
  font-style: inherit
  font-weight: inherit

b,
strong
  color: inherit
  font-weight: var(--group-strong-font-weight)

fieldset
  border: none