.month-calendar-container{width:100%;max-width:24rem;background-color:hsl(var(--background));border-radius:.5rem;border:1px solid hsl(var(--muted)/50%);padding:0 1rem}.month-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem .5rem;border-bottom:1px solid hsl(var(--muted)/50%)}.month-calendar-title{font-size:1.2rem;font-weight:500;background:none;border:none;cursor:pointer;padding:.5rem 1rem;border-radius:.25rem}.month-calendar-title:hover{color:hsl(var(--primary));transition:all .2s ease-in-out}.month-calendar-nav-button{background:none;border:none;cursor:pointer;padding:.2rem;display:flex;align-items:center;justify-content:center;border-radius:.25rem}.month-calendar-nav-button:hover{background-color:hsl(var(--muted-50));color:hsl(var(--primary));transition:all .2s ease-in-out}.month-calendar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:1rem .5rem}.month-calendar-item{aspect-ratio:1.8;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;background:none;font-size:.8rem;border-radius:.5rem;transition:all .2s ease-in-out}.month-calendar-item:not(:disabled):not(.selected):hover{border:1px solid hsl(var(--primary));color:hsl(var(--primary))}.month-calendar-item.selected{background-color:hsl(var(--primary));color:white}.month-calendar-item.selected:hover{background-color:hsl(var(--primary-200))}.month-calendar-item.disabled{color:hsl(var(--muted));cursor:not-allowed}.month-calendar-grid[data-view=years]{grid-template-columns:repeat(3,1fr)}