@use "@/colors"
@use "@/mixins"

html, body
  font-size: 16px
  font-family: Rubik, sans-serif
  font-variant-numeric: tabular-nums
  text-rendering: optimizeLegibility
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  overflow: hidden
  display: flex
  flex-direction: column
  row-gap: 1px
  fill: white
  color: var(--color-bright)
  background-color: var(--background)
  touch-action: none

h1, h2, h3, h4, h5
  margin: 0
  font-weight: normal

*, *::before, *::after
  box-sizing: border-box
  user-select: none
  -webkit-user-select: none

.hidden
  display: none !important

.help-section
  .help-hidden &
    display: none !important

a
  font: inherit
  color: inherit
  cursor: pointer
  outline: none
  text-decoration: none

dialog
  position: fixed
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  margin: 0

div.layer
  top: 0
  left: 0
  width: 100%
  height: 100%
  position: absolute
  pointer-events: none

table
  text-align: left
  border-collapse: separate
  border-spacing: 1.5em 0
  margin: 1em -1.5em

  td
    font-size: 0.875em

  th
    font-size: 1em
    color: var(--color-green)

input.default, textarea.default
  appearance: none
  font-size: inherit
  font-family: inherit
  border: none
  outline: none
  white-space: nowrap
  @include mixins.form-element

input[type="range"]
  -webkit-appearance: none
  appearance: none
  background: transparent
  border: none
  width: 100%
  height: 4px

  &::-webkit-slider-runnable-track
    width: 100%
    height: 4px
    background: rgba(black, 0.25)
    border: none
    border-radius: 2px
    margin-top: 1px

  &::-webkit-slider-thumb
    -webkit-appearance: none
    width: 12px
    height: 12px
    background: var(--color-shadow)
    border-radius: 50%
    cursor: pointer
    margin-top: -4px

  &::-moz-range-track
    width: 100%
    height: 4px
    background: rgba(black, 0.25)
    border: none
    border-radius: 2px

  &::-moz-range-thumb
    width: 12px
    height: 12px
    background: var(--color-shadow)
    border-radius: 50%
    border: none
    cursor: pointer

  &::-ms-track
    width: 100%
    height: 4px
    background: transparent
    border: none
    color: transparent

  &::-ms-fill-lower,
  &::-ms-fill-upper
    background: rgba(black, 0.25)
    border: none
    border-radius: 2px

  &::-ms-thumb
    width: 12px
    height: 12px
    background: var(--color-shadow)
    border-radius: 50%
    cursor: pointer

.spinner_GuJz
  fill: var(--color-green)
  transform-origin: center
  animation: spinner_STY6 3s linear infinite

@keyframes spinner_STY6
  100%
    transform: rotate(360deg)