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

$appBarOffset: 135px
$bottomControlsOffset: 260px
$horizontalQuickSelectOffest: 80px
$obscuringPortraitUiVerticalOffset: $appBarOffset + $horizontalQuickSelectOffest
$obscuringLandscapeUiVerticalOffset: $appBarOffset + $bottomControlsOffset

.Field
  margin: 0 auto

  @media (orientation: portrait)
    margin-bottom: 10.5em

    @media (min-width: #{variables.$break-sm})
      &[data-purchased-field="0"]
        max-width: calc(100vh * (6/10) - #{$obscuringPortraitUiVerticalOffset})

      &[data-purchased-field="1"]
        max-width: calc(100vh * (8/12) - #{$obscuringPortraitUiVerticalOffset})

      &[data-purchased-field="2"]
        max-width: calc(100vh * (10/16) - #{$obscuringPortraitUiVerticalOffset})

      &[data-purchased-field="3"]
        max-width: calc(100vh * (12/18) - #{$obscuringPortraitUiVerticalOffset})

  @media (orientation: landscape)
    margin: 5em auto

    @media (min-height: #{variables.$break-large-phone})
      margin-top: auto

    @media (min-height: #{variables.$break-sm})
      &[data-purchased-field="0"]
        max-width: calc(100vh * (10/6) - #{$obscuringLandscapeUiVerticalOffset})

      &[data-purchased-field="1"]
        max-width: calc(100vh * (12/8) - #{$obscuringLandscapeUiVerticalOffset})

      &[data-purchased-field="2"]
        max-width: calc(100vh * (16/10) - #{$obscuringLandscapeUiVerticalOffset})

      &[data-purchased-field="3"]
        max-width: calc(100vh * (18/12) - #{$obscuringLandscapeUiVerticalOffset})

  .row
    display: flex
    flex-direction: row
    width: 100%

    @media (orientation: landscape)
      flex-direction: column-reverse

  .react-transform-component
    overflow: visible
    width: auto

  // backgronud-size controls scaling of the dirt background image. The formula
  // for each step:
  // 100% * (1 / number of field columns) * (proportion of dirt image size to crop image size)
  .react-transform-element
    display: block
    height: auto
    width: auto

    .row-wrapper
      background-image: url('../../img/ui/dirt.png')
      border: solid 1px #000
      background-repeat: repeat
      background-size: calc(100% * (1 / 6) * 1.5)
      image-rendering: pixelated

      display: flex
      flex-direction: column

      @media (orientation: landscape)
        flex-direction: row
        margin-right: variables.$field-space-for-right-side-controls

  &[data-purchased-field="1"]
    .react-transform-element
      background-size: calc(100% * (1 / 8) * 1.5)

  &[data-purchased-field="2"]
    .react-transform-element
      background-size: calc(100% * (1 / 10) * 1.5)

  &[data-purchased-field="3"]
    .react-transform-element
      background-size: calc(100% * (1 / 12) * 1.5)

  .slider-wrapper
    background: rgba(128, 128, 128, 0.5)
    border-radius: 2em
    bottom: 7.5em
    left: 50%
    padding: 0 1em
    position: fixed
    transform: translateX(-50%)
    transition: left variables.$duration-entering-screen variables.$easing-ease-out
    width: 250px

    @media (orientation: portrait)
      bottom: 13.5em

      .menu-open &
        display: none

    .menu-open &
      left: calc(50vw + variables.$sidebar-width / 2)

  .zoom-controls
    position: fixed
    display: flex
    flex-direction: column
    bottom: 1em

    @media (orientation: portrait)
      .menu-open &
        display: none

    &.zoom-in-wrapper
      right: 0.5em

      @media (orientation: portrait)
        right: 0.25em

      @media (orientation: landscape)
        bottom: 5.5em

    &.zoom-out-wrapper
      @media (orientation: portrait)
        left: 0.5em

      @media (orientation: landscape)
        right: 0.5em

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

    button
      margin: 0.5em

  .MuiFormControl-root
    align-items: center
    display: flex
    padding: 1em 0 0