$_theme: () !default

@use "sass:map"

body
  background-color: map.get($_theme, "bg-2")
  color: map.get($_theme, "fg-main")
  font-family: "Bariol", sans-serif
  font-size: 18px
  margin: 0
  padding: 0
  // for footer alignment
  min-height: 100vh
  display: flex
  flex-direction: column

a
  color: map.get($_theme, "link")

pre, code
  font-size: 0.88em

code
  background: map.get($_theme, "bg-1")
  padding: 3px 5px
  border-radius: 4px

input, select, button
  font-family: inherit
  font-size: 16px
  min-width: 0px

button
  cursor: pointer

::placeholder
  color: map.get($_theme, "placeholder")
  opacity: 1

// focus section

:focus
  outline: none

:-moz-focusring
  outline: none

::-moz-focus-inner
  border: 0

select:-moz-focusring
  color: transparent
  text-shadow: 0 0 0 map.get($_theme, "fg-bright")

body.show-focus
  a, select, button, input, video, summary
    &:focus
      outline: 2px dotted map.get($_theme, "fg-main")

video
  background-color: black

details
  background-color: map.get($_theme, "bg-3")
  padding: 12px
  border: 1px solid map.get($_theme, "edge-grey")
  border-radius: 8px

  summary
    cursor: pointer
    line-height: 1
    margin-bottom: 0
    user-select: none
    color: map.get($_theme, "fg-main")

  &[open] summary
    padding-bottom: 12px
    border-bottom: 1px solid map.get($_theme, "edge-grey")
    margin-bottom: 8px

table
  background-color: map.get($_theme, "bg-1")

table, td, th
  border: 1px solid map.get($_theme, "edge-grey")
  border-collapse: collapse

td, th
  padding: 4px 8px

thead, tr:nth-child(even)
 background-color: map.get($_theme, "bg-0")