@use '../../styles/settings'

.v-date-picker-header
  display: grid
  grid-template-areas: "prepend content append"
  grid-template-columns: min-content minmax(0, 1fr) min-content
  overflow: hidden
  padding-inline: 24px 12px
  padding-bottom: 12px

.v-date-picker-header__append
  grid-area: append

.v-date-picker-header__prepend
  grid-area: prepend
  padding-inline-start: 8px

.v-date-picker-header__content
  align-items: center
  display: inline-flex
  font-size: 32px
  line-height: 40px
  grid-area: content
  justify-content: space-between

  .v-date-picker-header--clickable &
    &:not(:hover)
      opacity: .7

  .v-date-picker--month &
    opacity: 1

  .v-date-picker--year &
    cursor: pointer

.date-picker-header-transition,
.date-picker-header-reverse-transition
  &-enter-active
    transition-duration: 0.3s
    transition-timing-function: settings.$standard-easing

  &-leave-active
    transition-duration: 0.3s
    transition-timing-function: settings.$standard-easing

.date-picker-header-transition
  &-enter-from
    transform: translate(0, 100%)

  &-leave-to
    opacity: 0
    transform: translate(0, -100%)

.date-picker-header-reverse-transition
  &-enter-from
    transform: translate(0, -100%)

  &-leave-to
    opacity: 0
    transform: translate(0, 100%)