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

.QuickSelect
  bottom: 7.5em
  left: 50%
  max-width: calc(100% - 2em)
  position: fixed
  transform: translateX(-50%)

  &.MuiPaper-root // Specificity is needed for card-style overrides
    @include utils.card-style

  @media (orientation: landscape)
    bottom: auto

    @media (max-height: #{variables.$break-large-phone})
      top: 5em
      max-width: calc(100% - 12em)
      left: calc(50% - (#{variables.$field-space-for-right-side-controls} / 2))

    @media (min-height: #{variables.$break-large-phone})
      left: auto
      max-height: calc(100vh - 20em)
      min-width: 4em
      overflow: auto
      right: 0.75em
      top: 9em
      transform: none

    @media (max-width:  #{variables.$break-md})
      .menu-open &
        display: none

  .button-array
    display: flex
    flex-flow: row

    @media (orientation: landscape) and (min-height: #{variables.$break-large-phone})
      flex-flow: column

  @media (orientation: landscape) and (min-height: #{variables.$break-large-phone})
    bottom: 8em

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

  .MuiGrid-root
    border-radius: 0.25em
    overflow-x: scroll
    overflow-y: hidden
    padding: .5em
    position: relative

    @media (orientation: landscape) and (min-height: #{variables.$break-large-phone})
      overflow-x: hidden

    > *
      @media (orientation: landscape) and (min-height: #{variables.$break-large-phone})
        align-items: center
        width: 3em

    @media (orientation: landscape) and (min-height: #{variables.$break-large-phone})
      flex-direction: column

  .Toolbelt
    display: flex
    flex-flow: column
    justify-content: center

  .MuiButton-root
    padding: 0.5em
    min-width: 3.5em
    margin: 0 0.25em

    img
      @include utils.sprite-shadow

  .MuiDivider-root
    margin: 0 0.5em

    @media (orientation: landscape) and (min-height: #{variables.$break-large-phone})
      margin: 0 0 1em 0
      height: 1px
      width: 100%

  .MuiButton-containedPrimary
    background-color: #ffb913

    &:hover
      background-color: #e5a000

  .MuiButton-textPrimary
    &:hover
      background-color: #fff7e4

  .quantity
    background-color: rgba(0, 0, 0, 0.5)
    border-radius: 1em
    color: #fff
    font-size: 0.75em
    line-height: calc(0.75em - 1px)
    min-width: .5em
    padding: 0.5em
    position: absolute
    right: -2px
    top: -2px