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

/* Themes */

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

theme(v-picker-title, "v-picker__title")

v-picker-body($material)
  background: $material.picker.body

theme(v-picker-body, 'v-picker__body')

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

.v-picker--full-width
  display: flex

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

.v-picker__title__btn
  transition: $primary-transition

  &:not(.v-picker__title__btn--active)
    opacity: .6
    cursor: pointer

    &:hover:not(:focus)
      opacity: 1

.v-picker__title__btn--readonly
  pointer-events: none


.v-picker__title__btn--active
    opacity: 1

.v-picker__body
  height: auto
  overflow: hidden
  position: relative
  z-index: 0

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

  > div
    width: 100%

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

.v-picker--landscape
  .v-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

  .v-picker__body,
  .v-picker__actions
    margin-left: 170px