@use "sass:color"

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

// Needed to prevent pull-to-refresh on Android
// https://stackoverflow.com/a/47709903/470685
body
  overscroll-behavior: contain

@mixin markdown-styles
  .markdown
    p
      margin: 1em 0

    ul li
      list-style: disc
      margin-left: 1em

    strong
      font-weight: bold

// Needed for MUI tooltips, as they are outside of the .Farmhand DOM
+markdown-styles()

.Farmhand
  +markdown-styles()

.Farmhand
  // padding-left and breakpoints correspond to AppBar dimensions
  // https://material-ui.com/demos/app-bar/
  display: flex
  padding-top: 3.5em
  position: fixed
  touch-action: manipulation

  // .farmhand-root is needed because some sibling top-level elements also have
  // the .Farmhand class, but do not have the bootup animation that the main
  // .Farmhand element does.
  &.farmhand-root
    opacity: 0
    transition: opacity, transform 200ms
    transform: scale(0)

    &.has-booted
      transform: scale(1)
      opacity: 1

  &.block-input
    button,
    input
      filter: contrast(65%)
      pointer-events: none

  // The Dialog root component also gets an explicit Farmhand class and needs
  // some styles tweaked just for it.
  &.MuiDialog-root
    display: block

  &,
  .MuiTypography-root
    font-family: "Public Sans", sans-serif

  @media (min-width: #{variables.$break-xs}) and (orientation: landscape)
    padding-top: 3em

  @media (min-width: #{variables.$break-sm})
    padding-top: 4em

  img
    image-rendering: pixelated

  strong
    font-weight: bold

  .visually_hidden:not(:focus):not(:active)
    clip: rect(0 0 0 0)
    clip-path: inset(50%)
    height: 1px
    overflow: hidden
    position: absolute
    white-space: nowrap
    width: 1px

  .MuiDivider-root
    margin: 1.5em 0

  .MuiPaper-rounded
    background-color: #fff7e7

  .MuiCard-root,
  .MuiTableContainer-root
    @include utils.card-style

    .MuiCard-root
      background: color.adjust(variables.$card-background, $lightness: -10%)

  .MuiCardHeader-avatar
    img
      @include utils.sprite-shadow

  .MuiTableCell-root
    border-color: #e9c777

  .sidebar-wrapper
    display: flex

  .sidebar
    background-image: url('../../img/ui/blue-stripe-bg.png')
    box-sizing: border-box
    overflow: auto
    padding: 1em 1em 0
    position: relative
    width: variables.$sidebar-width
    z-index: 20

    @media (max-width: #{variables.$break-small-phone})
      width: variables.$narrow-sidebar-width

    .button-array
      display: flex
      flex-wrap: wrap
      margin: .5em 0

  .bottom-controls
    align-items: center
    bottom: 1em
    display: flex
    flex-flow: column
    justify-content: center
    left: 50%
    opacity: 0.85
    position: fixed
    transition: left variables.$duration-entering-screen variables.$easing-ease-out
    width: 0
    z-index: 20

    @media (max-width: #{variables.$break-medium-phone})
      bottom: 0.5em

    .MuiMobileStepper-root
      background: none

    .fab-buttons
      display: flex
      flex-flow: row

      button
        margin: 0.5em
        position: relative

        @media (max-width: #{variables.$break-medium-phone})
          margin: 0.25em 0.5em

        @media (max-width: 320px)
          margin: 0.25em 0.1em

  @media (orientation: landscape)
    &.menu-open .bottom-controls
      left: calc(50vw + variables.$sidebar-width / 2)

  .end-day
    position: fixed
    top: 5em
    right: 1em

    @media (min-width: #{variables.$break-sm})
      right: 1.25em
      top: 5.5em

  &.use-alternate-end-day-button-position
    .end-day
      right: auto
      left: 1em

      @media (min-width: #{variables.$break-sm})
        &.use-alternate-end-day-button-position
          right: auto
          left: 1em

  .menu-button
    transition: transform variables.$duration-shorter
    transform: rotate(0deg)

    &.is-open
      transform: rotate(-90deg)


  h4,
  h5,
  h6,
  p,
  p.MuiTypography-root
    font-family: "Public Sans", sans-serif

  h3,
  h4,
  h5,
  h6
    font-weight: bold

  h2
    font-size: 1.4em

  h3,
  h4
    margin: 1em 0

  p,
  .MuiTypography-body2
    line-height: 1.5em

  ul

    &.card-list
      flex-grow: 1
      margin-bottom: 1em

      li
        margin: 1em 0

      > li
        margin: 1em auto
        max-width: variables.$card-max-width

  input

    &[type="number"]
      min-width: 140px

  th
    font-weight: bold

  .MuiCardContent-root:last-child
    // Overrides an unhelpful MUI default
    padding: 16px

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  legend,
  td,
  th,
  .MuiTypography-h1,
  .MuiTypography-h2,
  .MuiTypography-h3,
  .MuiTypography-h4,
  .MuiTypography-h5,
  .MuiTypography-h6,
  .MuiButtonBase-root
    font-family: "Francois One", sans-serif

  .MuiButtonBase-root
    text-transform: none

  // This is needed as a workaround for Safari layout rendering issues wherein
  // bottom padding for the stage and sidebar are not respected after
  // interacting with the elements within them.
  .spacer
    min-height: 7.5em

  .danger-text
    color: variables.$error-color

  .MuiTooltip-popper
    p
      text-align: center

  .MuiDialog-paper
    background-image: url('../../img/ui/light-blue-stripe-bg.png')

  .MuiAlert-root
    margin-bottom: 1em

    @media (min-width: #{variables.$break-xs}) and (orientation: landscape)
      top: 3.5em

    @media (min-width: #{variables.$break-sm})
      top: 4.5em

    p
      margin: 1em 0

      &:first-child
        margin-top: 0

      &:last-child
        margin-bottom: 0

    strong
      font-weight: bold

    li
      margin-left: 1em

    ul
      li
        list-style: disc

    ol
      li
        list-style: decimal

  hr
    background: none

  // NOTE: Fixes an unhelpful style from scss-reset/reset
  .MuiDivider-vertical
    width: auto


.Farmhand.notification-container
  margin-top: 8em
  padding-top: 0

  @media (min-width: #{variables.$break-md})
    margin-top: 4em
    margin-right: 4em

  .MuiCollapse-wrapperInner
    width: 100%

  .MuiCollapse-wrapper
    margin-bottom: 0