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

@include tools.layer('components')
  .v-picker.v-sheet
    display: grid
    grid-auto-rows: min-content
    grid-template-areas: "title" "header" "body"
    overflow: hidden
    @include tools.elevation($picker-elevation)
    @include tools.rounded($picker-border-radius)

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

  .v-picker__body
    grid-area: body
    overflow: hidden
    position: relative

  .v-picker__header
    grid-area: header

  .v-picker__actions
    grid-area: actions
    padding: $picker-actions-padding
    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: $picker-title-font-weight
    letter-spacing: .1666666667em