@use '../../styles/tools'

.v-picker.v-sheet
  @include tools.elevation(2)
  @include tools.rounded(4px)

  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
    padding-inline-start: 8px
    padding-inline-end: 8px
    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
  color: rgb(var(--v-theme-on-surface), var(--v-disabled-opacity))
  padding-inline-start: 24px
  padding-inline-end: 12px
  padding-top: 16px
  padding-bottom: 16px
  font-weight: 600
  letter-spacing: .1666666667em