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

@include tools.layer('components')
  .v-date-picker-controls
    display: flex
    align-items: center
    justify-content: space-between
    font-size: .875rem
    height: $date-picker-controls-height
    padding: $date-picker-controls-padding

    .v-btn
      text-transform: none
      font-weight: 400
      line-height: initial
      letter-spacing: initial

      > .v-btn__append > .v-icon
        // matching VBtn for icon rotation
        transition-property: transform
        transition-duration: 0.28s
        transition-timing-function: settings.$standard-easing

    .v-date-picker--months &
      .v-date-picker-controls__only-month-btn
        > .v-btn__append > .v-icon
          transform: rotate(180deg)

    .v-date-picker--year &
      .v-date-picker-controls__mode-btn
        transform: rotate(180deg)
      .v-date-picker-controls__year-btn,
      .v-date-picker-controls__only-year-btn
        > .v-btn__append > .v-icon
          transform: rotate(180deg)

    &__date
      margin-inline-end: 4px

    &__month,
    &__year
      display: flex

      @include tools.rtl()
        flex-direction: row-reverse

    & &__month-btn,
    & &__year-btn
      padding: 0 12px

    & &__only-month-btn,
    & &__only-year-btn
      padding-inline: $date-picker-controls-docked-toggle-btn-padding

      // just lower than default
      min-width: 40px

      > .v-btn__append
        margin-inline: $date-picker-controls-docked-toggle-append-margin-inline

  .v-date-picker__title
    display: inline-block