.q-datetime-input
  min-width $datetime-input-min-width

.q-datetime
  max-width 100vw
  border 1px solid $grey-4
  display inline-block

  &.type-date
    width 320px
  &.type-time
    width 250px
  &.type-datetime
    width 320px

.q-datetime-content
  height 200px
  position relative

.q-datetime-inner
  font-size 21px
  overflow hidden
  perspective 1200px
  height 100%
  text-align right
  position relative
  padding 0

.q-datetime-col
  display block
  overflow visible
  transform-style preserve-3d
  position relative
  max-height 100%

.q-datetime-col-wrapper, .q-datetime-item
  transform-style preserve-3d
  transition all .2s ease-out

body.desktop .q-datetime-col-wrapper
  cursor pointer

.q-datetime-col-divider
  max-height 100%
  width 10px

.q-datetime-col-month
  width 117px
  text-align left
.q-datetime-col-day
  width 37px
.q-datetime-col-year
  width 61px
.q-datetime-col-hour
  width 37px
.q-datetime-col-minute
  width 37px

.q-datetime-item
  font-size 85%
  height 36px
  line-height 36px
  color rgba(0, 0, 0, .87)
  position absolute
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  left 0
  top 0
  width 100%
  backface-visibility hidden
  transform-origin center center -110px

.q-datetime-mask
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  height 100%
  width 100%
  background linear-gradient(to top, white, transparent 50%, white)
  pointer-events none

.q-datetime-highlight
  height 36px
  position absolute
  left 0
  right 0
  width 100%
  top 50%
  margin-top -18px
  pointer-events none
  border-top 1px solid $grey-5
  border-bottom 1px solid $grey-5

.q-datetime-range
  &.row
    .q-datetime-range-left
      border-top-right-radius 0
      border-bottom-right-radius 0
    .q-datetime-range-right
      border-top-left-radius 0
      border-bottom-left-radius 0
  &.column > div + div
    margin-top $datetime-range-space