@use "colors"
  
$font: Quicksand, Inter, LXGW Wenkai, Microsoft YaHei, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Avenir, Helvetica, Arial, sans-serif
$c-main: #b3c6ff
$c-sub: rgba(0, 0, 0, 0.77)
$c-good: #b3ffb9
$c-darker: #646cff
$c-bg: #242424
$c-error: #ff6b6b
$c-shadow: rgba(0, 0, 0, 0.1)

$ov-light: rgba(white, 0.04)
$ov-lighter: rgba(white, 0.08)
$ov-dark: rgba(black, 0.1)
$ov-darker: rgba(black, 0.18)

$nav-height: 4rem
$w-mobile: 560px
$w-max: 900px

$grad-special: linear-gradient(90deg, #ffee94, #ffb798, #ffa3e5, #ebff94)

$border-radius: 12px
$gap: 20px

$transition: all 0.25s

.card
  display: flex
  flex-direction: column

  border-radius: $border-radius
  padding: 12px 16px
  background: $ov-light

blockquote
  $c1: rgba(255, 149, 149, 0.05)
  $c2: rgba(255, 152, 152, 0.12)
  background: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 20px)
  padding: 10px 20px 10px 20px
  margin: 16px 0
  border-left: solid #ff7c7c 3px
  border-radius: $border-radius

input, textarea
  border-radius: $border-radius
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: $ov-lighter
  transition: $transition
  box-sizing: border-box
  resize: vertical
  &:focus, &:focus-visible
    border: 1px solid $c-main
    outline: none
  &.error
    border: 1px solid $c-error

select
  border-radius: $border-radius
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: $ov-lighter
  transition: $transition
  box-sizing: border-box

input[type="checkbox"]
  width: 1.2em
  height: 1.2em
  margin: 0
  padding: 0
  border: 1px solid $c-main
  background-color: $ov-lighter
  appearance: none
  cursor: pointer
  flex-shrink: 0

  &:checked
    background-color: $c-main
    border-color: $c-main

label
  cursor: pointer

.overlay
  position: fixed
  inset: 0

  background-color: rgba(0, 0, 0, 0.5)

  display: flex
  justify-content: center
  align-items: center

  z-index: 1000
  backdrop-filter: blur(5px)

  h2, p
    user-select: none
    margin: 0

  > div
    background-color: colors.$background
    padding: 2rem
    border-radius: 8px

    display: flex
    flex-direction: column
    gap: 1rem

    min-width: 300px
    max-width: 400px

.actions
  display: flex
  flex-direction: column
  gap: 16px

  button
    width: 100%

.loading.overlay
  font-size: 28rem

  :global(.icon)
    opacity: 0.5

  > span
    position: absolute
    inset: 0
    display: flex
    justify-content: center
    align-items: center
    background: transparent

    letter-spacing: 20px
    margin-left: 20px

    font-size: 1.5rem

.error
  color: $c-error