@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

.v-picker.v-sheet
  @include tools.elevation($picker-elevation)
  @include tools.rounded($picker-border-radius)

  display: grid
  grid-auto-rows: min-content
  grid-template-areas: "title" "header" "body"
  overflow: hidden

  &.v-picker--with-actions
    grid-template-areas: "title" "header" "body" "actions"

.v-picker__body
  grid-area: body

.v-picker__header
  grid-area: header

.v-picker__actions
  grid-area: actions
  padding: 0 12px 12px 12px
  display: flex
  align-items: center
  justify-content: flex-end

  .v-btn
    min-width: 48px

    &:not(:last-child)
      margin-inline-end: 8px

.v-picker--landscape
  grid-template-areas: "title" "header body" "header body"

.v-picker--landscape.v-picker--with-actions
  grid-template-areas: "title" "header body" "header actions"

.v-picker-title
  text-transform: uppercase
  font-size: .75rem
  grid-area: title
  padding-inline: 24px 12px
  padding-top: 16px
  padding-bottom: 16px
  font-weight: 600
  letter-spacing: .1666666667em