.date-picker-container{@apply relative max-w-full mx-auto;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"year year year" "left-arrow scroll-area right-arrow";align-items:center;gap:.5rem;position:relative;min-height:120px}.date-picker-year-display{grid-area:year;justify-self:center;width:100%}.date-picker-nav-left{grid-area:left-arrow;justify-self:start}.date-picker-nav-right{grid-area:right-arrow;justify-self:end}.date-picker-scroll{grid-area:scroll-area;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden}.date-picker-scroll::-webkit-scrollbar{display:none}.date-picker-track{@apply flex gap-3;scroll-behavior:smooth;min-width:max-content}.date-picker-item{@apply cursor-grab;touch-action:pan-y pinch-zoom}.date-picker-item:active{@apply cursor-grabbing;}.date-picker-item{@apply relative;}.date-picker-item:hover{@apply transform scale-105;}.month-label{@apply w-full;white-space:nowrap}.date-picker-nav{@apply opacity-0 transition-opacity duration-200;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;align-self:center}.date-picker-container:hover .date-picker-nav{@apply opacity-100;}.hover-scroll-area{pointer-events:auto;background:transparent;transition:background-color .2s ease}.hover-scroll-area:hover{background:#0000000d}.dark .hover-scroll-area:hover{background:#ffffff0d}.date-picker-scroll{cursor:grab}.date-picker-scroll:active{cursor:grabbing!important}.date-picker-scroll.dragging{cursor:grabbing!important;-webkit-user-select:none;user-select:none}@media (max-width: 640px){.date-picker-container{gap:.25rem}.date-picker-item{@apply min-w-[50px] h-14 px-2;}.date-picker-item span:first-child{@apply text-xs;}.date-picker-item span:last-child{@apply text-base;}.month-label{@apply text-xs;}.hover-scroll-area{display:none}.date-picker-nav{@apply p-1;}.date-picker-nav svg{@apply w-4 h-4;}}.date-picker-scroll *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.date-picker-item-wrapper{position:relative;display:grid;grid-template-rows:auto auto;gap:.25rem;align-items:center}.month-row{height:1.5rem;display:flex;align-items:center;justify-content:center;width:60px;min-width:60px;max-width:60px}.date-row{display:flex;align-items:center;justify-content:center}.month-label{width:100%;pointer-events:none;z-index:10;text-align:center;white-space:nowrap;font-size:.75rem}