@use "sass:color"

$bg: #FFFDF3
$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)}
$fg: #011627

:root
  --bg: #{$bg}
  --fg: #{$fg}

body
  font-family: 'Nunito', 'K Gothic', sans-serif
  margin: 0
  display: flex
  width: 100%
  height: 100vh
  box-sizing: border-box
  padding: 2em
  background: $bg0
  color: var(--fg)
  font-size: 1.25em

#content, dialog
  background: var(--bg)
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.125)
  border: none
  border-radius: 4px

input[type=number]
  background: var(--bg)
  color: var(--fg)
  border: none
  outline: none
  font: inherit
  text-align: center
  width: 4em
  appearance: textfield

#content
  width: 100%
  height: 100%
  display: grid
  grid-template-areas: "nav        nav" "challenge  submissions"
  grid-template-columns: 30em auto
  grid-template-rows: min-content auto
  overflow: hidden

  nav
    grid-area: nav
    --bg: #{$fg}
    --fg: #{$bg}
    background: var(--bg)
    color: var(--fg)
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125)
    display: flex

    .dropdown
      position: relative
      display: flex
      padding: 0

      .dropdown-content
        flex-direction: column
        position: absolute
        top: 100%
        right: 0
        min-width: 100%

      &:not(:hover) .dropdown-content
        display: none !important

    & > *, .dropdown .link
      padding: 0.45em

      & > *
        vertical-align: middle

    .link
      color: var(--fg)
      font-weight: bold
      white-space: nowrap

    & > .right
      margin-left: auto

    img
      height: 32px
      border-radius: 100%

  & > div
    overflow: scroll
    display: flex
    flex-direction: column
    gap: 1em

    footer
      margin-top: auto
      text-align: center

  #challenge
    padding: 1em

*
  box-sizing: border-box !important

#submissions
  grid-area: submissions
  background: rgba(0, 0, 0, 0.125)
  padding: 1em

  & > div
    width: 100%
    column-count: 3
    margin: 0

    $gap: 0.5em

    gap: $gap

    & > figure
      background: rgba(0, 0, 0, 0.125)
      padding: $gap
      width: 100%
      box-sizing: border-box
      margin: 0
      margin-bottom: $gap
      break-inside: avoid-column
      text-align: center

      & > img
        width: 100%
        cursor: pointer

        &:hover
          border: none
          filter: brightness(1.25)

.dropdown:hover > .link, nav > .link:hover
  border: none
  --fg: #{$fg}
  --bg: #{$bg}
  background: var(--bg)
  cursor: pointer

.svg-inline
  height: 1em
  vertical-align: -0.125em

a
  text-decoration: none

  &:hover
    border-bottom: 2px solid

  &.noun
    color: #a6e3a1

  &.adjective
    color: #f38ba8

  &.verb
    color: #87b0f9

  &.adverb
    color: #94e2d5

  &.particle
    color: #f9e2af

  &.phrase
    color: #fab387

.servers
  display: flex
  gap: 0.5em

  & > :not(.recommended)
    // To match the missing recommended label
    padding-bottom: 1em

  & > *
    display: flex
    flex-direction: column
    gap: 0.5em
    border: 2px solid
    border-radius: 0.5em
    padding: 0.5em
    width: 100%
    align-items: center
    text-align: center

    img
      width: 96px
      border-radius: 100%
      border: 2px solid

    .name
      display: flex
      flex-grow: 1
      align-items: center

    .joinButton
      display: inline
      background: seagreen
      color: white
      font: inherit
      font-weight: bold
      border: none
      outline: none
      padding: 0.25em 0.5em 0.25em 0.5em
      border-radius: 2px

      &:disabled, &.disabled
        background: gray

  .recommended
    border-color: mediumseagreen

    .label-wrapper
      height: 0

      .label
        position: relative
        width: fit-content
        border: auto
        bottom: 0px
        background: mediumseagreen
        color: white
        font-weight: bold
        font-size: 0.75em
        text-transform: uppercase
        padding: 0 0.5em 0 0.5em
        border-radius: 2px
        user-select: none

.icon
  height: 1.5em
  vertical-align: middle

h1
  text-align: center

  &:first-child
    margin-top: 0