/** Calendar Navigation Styles */
export declare const calendarNavigationStyles = "\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: inherit;\n  user-select: none;\n  /* --ty-calendar-width is the public knob: set it on ty-calendar (or any\n     ancestor) and BOTH the nav and the day grid follow it, because custom\n     properties inherit through shadow boundaries. --nav-default-width can't\n     serve that role \u2014 it's declared on :host([data-size]) inside this shadow\n     root, and a declaration on the element always beats a value inherited\n     into it, so an outside override of it is silently dead. --nav-width\n     (set inline by the width attribute) still wins over both. */\n  width: var(--nav-width, var(--ty-calendar-width, var(--nav-default-width)));\n  box-sizing: border-box;\n}\n\n/* Navigation groups: left, center, right */\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n  /* Flex items default to min-width:auto, i.e. they refuse to shrink below\n     their content. A long month name (\"September 2026\") therefore widened\n     this group and shoved the arrow groups outward \u2014 the nav visibly\n     re-laid-out as you paged month to month. min-width:0 lets the centre\n     take exactly the leftover space, so the arrows stay pinned whatever the\n     label says, and an over-long label ellipsizes instead of pushing. */\n  min-width: 0;\n}\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* 14px uppercase at every size, not a per-size type scale: the label is the\n   widest thing in the bar and the only one whose width depends on the data\n   (\"May\" vs \"September\"), so scaling it up on lg was what made the arrows\n   shuffle around. Small caps read as chrome, stay legible, and leave the\n   centre column comfortably wider than the longest localized month name.\n   Ellipsis is a backstop for a narrow --nav-width, not the sizing strategy. */\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";