@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: "header" "body"
    grid-template-columns: minmax(0, 1fr)
    overflow: hidden
    @include tools.elevation($picker-elevation)
    @include tools.rounded($picker-border-radius)

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

    &.v-picker--landscape
      grid-template-columns: auto 1fr
      grid-template-areas: "header body" "header body"

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

  .v-picker__body
    grid-area: body
    overflow: hidden
    position: relative
    display: flex
    justify-content: center
    flex-wrap: wrap

  .v-picker__header-wrapper
    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--divided
    .v-picker__header
      border-bottom-color: $picker-border-color
      border-bottom-style: $picker-border-style
      border-bottom-width: $picker-border-thin-width

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