@import '../bootstrap'
@import '../theme'

/* Themes */

picker($material)
  color: $material.text.primary

  .picker__body
    background: $material.picker.body

dark(picker, 'picker')

picker-title($material)
  .picker__title
    background: $material.picker.title

theme(picker-title, "picker")

.picker
  border-radius: $card-border-radius
  contain: layout style
  display: inline-flex
  flex-direction: column
  vertical-align: top

  .card__row--actions
    border: none
    margin-top: -20px

.picker--full-width
  display: flex

.picker__title
  color: #fff
  border-top-left-radius: $card-border-radius
  border-top-right-radius: $card-border-radius
  padding: 16px

.picker__title__btn
  transition: $primary-transition

  &.active
    opacity: 1

  &:not(.active)
    opacity: .6
    cursor: pointer

    &:hover
      opacity: 1

.picker__body
  height: auto
  overflow: hidden
  position: relative

  flex: 1 0 auto
  display: flex
  flex-direction: column
  align-items: center

  > div
    width: 100%

    &.fade-transition-leave-active
      position: absolute

.picker--landscape
  .picker__title
    border-top-right-radius: 0
    border-bottom-right-radius: 0
    width: 170px
    position: absolute
    top: 0
    left: 0
    height: 100%
    z-index: 1

  .picker__body,
  .picker__actions
    margin-left: 170px