@use "../../styles/variables.sass"

.Navigation
  flex-direction: column
  flex-shrink: 0
  display: flex

  .version
    font-family: "Francois One", sans-serif
    text-align: center

  .farm-name
    line-height: 1.3em
    margin: 0.25em 0

    .MuiInput-root
      background: none
      margin: 0

      input
        font-family: "Francois One"
        padding-left: 0.5em
        padding-right: 0.5em
        text-align: center

  .online-control-container
    align-items: center
    display: flex
    flex-direction: row
    margin: 1em 0

    .toggle-container
      min-width: 155px

  .sidebar &
    .button-array
      margin-left: 3em
      margin-right: 3em

      @media (max-width: #{variables.$break-small-phone})
        margin-left: 2em
        margin-right: 2em

  .current-level
    align-items: center
    bottom: 0
    display: flex
    justify-content: center
    left: 0
    position: absolute
    right: 0
    top: 0
    user-select: none

  h1
    font-size: 3em
    font-weight: bold

    @media (max-width: #{variables.$break-small-phone})
      font-size: 2.5em

  button
    font-size: 1.3em
    margin: 0.3em
    min-width: 56px


  h1, h2, h3
    text-align: center

  .day-and-progress-container
    align-items: center
    display: flex
    font-size: 1.5em
    margin: .5em auto

    .MuiBox-root
      display: inline-flex
      margin-left: 0.5em
      position: relative

  .inventory-info
    font-size: 1em

    &.is-inventory-full
      color: variables.$error-color

  .MuiSelect-select.MuiSelect-select
    padding: 1em

  .chat-placeholder
    font-size: .75em
    padding: .5em 0
    text-align: center