@ardium-ui/ui 5.0.0-alpha.74 → 5.0.0-alpha.76

package/prebuilt-themes/default/calendar.css

@@ -25,370 +25,370 @@
   --ard-calendar-entry-disabled-opacity: 50%;
 }
 
-.ard-calendar {
-  min-width: calc(var(--ard-calendar-grid-size) * 7 + var(--ard-calendar-grid-gap) * 6);
-  user-select: none;
-  padding: var(--ard-calendar-padding, 0 0.375rem 0.375rem 0.375rem);
-  box-sizing: content-box;
-}
-.ard-calendar.ard-color-none {
-  --ard-cmpcl--bg: var(--ard-bg);
-  --ard-cmpcl--bg-colored: var(--ard-bg-alt);
-  --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
-  --ard-cmpcl--bg-header: var(--ard-bg-filled);
-  --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
-  --ard-cmpcl--on-bg: var(--ard-text);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: var(--ard-text);
-  --ard-cmpcl--border-light: var(--ard-text2);
-  --ard-cmpcl--content: var(--ard-text);
-  --ard-cmpcl--content-light: var(--ard-text-alt);
-  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
-}
-.ard-calendar.ard-color-primary {
-  --ard-cmpcl--bg: rgb(var(--ard-primary-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
-  --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-primary-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
-  --ard-cmpcl--content: rgb(var(--ard-primary-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
-}
-.ard-calendar.ard-color-secondary {
-  --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-secondary-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
-  --ard-cmpcl--content: rgb(var(--ard-secondary-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
-}
-.ard-calendar.ard-color-warn {
-  --ard-cmpcl--bg: rgb(var(--ard-warn-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-warn-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
-  --ard-cmpcl--content: rgb(var(--ard-warn-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
-  --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
-}
-.ard-calendar.ard-color-danger {
-  --ard-cmpcl--bg: rgb(var(--ard-danger-700));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
-  --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-danger-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
-  --ard-cmpcl--content: rgb(var(--ard-danger-900));
-  --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
-  --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
-}
-.ard-calendar.ard-color-success {
-  --ard-cmpcl--bg: rgb(var(--ard-success-700));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-success-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-success-100));
-  --ard-cmpcl--content: rgb(var(--ard-success-900));
-  --ard-cmpcl--content-light: rgb(var(--ard-success-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-success-700);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
-}
-.ard-calendar.ard-color-info {
-  --ard-cmpcl--bg: rgb(var(--ard-info-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-info-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-info-100));
-  --ard-cmpcl--content: rgb(var(--ard-info-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-info-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-info-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
-}
-.ard-calendar.ard-color-currentColor {
-  --ard-cmpcl--bg: var(--ard-bg);
-  --ard-cmpcl--bg-colored: currentColor;
-  --ard-cmpcl--on-bg: currentColor;
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--border: currentColor;
-  --ard-cmpcl--border-light: currentColor;
-  --ard-cmpcl--content: currentColor;
-  --ard-cmpcl--content-light: currentColor;
-  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: currentColor;
-  --ard-cmpcl--overlay-colored-light: currentColor;
-}
-.ard-calendar .ard-calendar__top-toolbar .ard-calendar__calendar-header {
-  display: grid;
-  grid-template-columns: 1fr 5fr 1fr;
-  align-items: center;
-  justify-items: center;
-  width: 100%;
-  padding: var(--ard-calendar-header-padding, 0.75rem 0);
-}
-.ard-calendar .ard-calendar__top-toolbar .ard-calendar__calendar-header .ard-dropdown-arrow {
-  width: var(--ard-dropdown-button-size);
-  height: var(--ard-dropdown-button-size);
-  border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
-  position: relative;
-  border-bottom-color: var(--ard-detail);
-  border-right-color: var(--ard-detail);
-  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
-  box-sizing: border-box;
-}
-.ard-calendar .ard-years-view .ard-dropdown-arrow {
-  rotate: 180deg;
-}
-.ard-calendar .ard-calendar__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, var(--ard-calendar-grid-size, 2.25rem));
-  gap: var(--ard-calendar-grid-gap, 0.25rem);
-  align-items: center;
-  padding: var(--ard-calendar-weekday-padding, 0 0 0.5rem 0);
-}
-.ard-calendar .ard-calendar__weekdays .ard-calendar__weekday {
-  text-align: center;
-  font-size: var(--ard-calendar-weekday-font-size, 0.875rem);
-  font-weight: var(--ard-calendar-weekday-font-weight, 500);
-  color: var(--ard-calendar-weekday-color, var(--ard-text));
-}
-.ard-calendar .ard-calendar__days-grid {
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(7, var(--ard-calendar-grid-size));
-  position: relative;
-  outline: none;
-  gap: var(--ard-calendar-grid-gap, 0.25rem);
-}
-.ard-calendar .ard-calendar__days-grid > * {
-  width: var(--ard-calendar-grid-size);
-  max-width: var(--ard-calendar-grid-size);
-  height: var(--ard-calendar-grid-size);
-  max-height: var(--ard-calendar-grid-size);
-  box-sizing: border-box;
-}
-.ard-calendar .ard-calendar__days-grid.ard-reserve-top-row {
-  padding-top: calc(var(--ard-calendar-grid-size) + var(--ard-calendar-grid-gap));
-}
-.ard-calendar .ard-calendar__days-grid .ard-calendar__floating-month {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: var(--ard-calendar-floating-month-transform, none);
-  width: 100%;
-  box-sizing: border-box;
-  aspect-ratio: 7;
-  padding: var(--ard-calendar-floating-month-padding, 0 0 0 1rem);
-  display: flex;
-  align-items: center;
-  font-size: var(--ard-calendar-floating-month-font-size, 0.875rem);
-  font-weight: var(--ard-calendar-floating-month-font-weight, 500);
-  color: var(--ard-calendar-floating-month-color, var(--ard-text3));
-  letter-spacing: 0.5px;
-}
-.ard-calendar .ard-calendar__simple-grid {
-  border-top: 1px solid var(--ard-detail-ultralight);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(6, var(--ard-calendar-grid-size));
-  position: relative;
-  outline: none;
-  padding: 0;
-  gap: var(--ard-calendar-grid-gap, 0.25rem);
-}
-.ard-calendar .ard-calendar__simple-grid > * {
-  max-width: 100%;
-  box-sizing: border-box;
-}
-.ard-calendar .ard-calendar__entry {
-  z-index: 1;
-  cursor: pointer;
-  outline: none;
-  padding: var(--ard-calendar-entry-padding, 0);
-  box-sizing: border-box;
-}
-.ard-calendar .ard-calendar__entry .ard-calendar__entry-button {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--ard-calendar-entry-font-size, 0.875rem);
-  font-weight: var(--ard-calendar-entry-font-weight, 400);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--ard-calendar-entry-border-radius, 9999px);
-  position: relative;
-  cursor: pointer;
-  outline: none;
-  box-sizing: border-box;
-}
-.ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-focus-overlay {
-  position: absolute;
-  top: calc(-1 * 0px);
-  bottom: calc(-1 * 0px);
-  left: calc(-1 * 0px);
-  right: calc(-1 * 0px);
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  z-index: -1;
-  background: var(--ard-cmpcl--overlay);
-  transition: border-color 0.1s ease, opacity 0.1s ease;
-}
-.ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
-  position: absolute;
-  top: calc(-1 * 0px);
-  bottom: calc(-1 * 0px);
-  left: calc(-1 * 0px);
-  right: calc(-1 * 0px);
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  z-index: -1;
-  opacity: 1;
-  left: calc(var(--ard-calendar-grid-gap, 0.25rem) / -2 - 1px);
-  right: calc(var(--ard-calendar-grid-gap, 0.25rem) / -2 - 1px);
-  border: var(--ard-calendar-entry-range-overlay-border-width, 1px) var(--ard-calendar-entry-range-overlay-border-style, dashed) transparent;
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-empty {
-  cursor: default;
-}
-.ard-calendar .ard-calendar__entry.ard-calendar-today .ard-calendar__entry-button {
-  border-color: var(--ard-calendar-entry-today-border-color, var(--ard-detail));
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range .ard-range-overlay {
-  opacity: 1;
-  border-top-color: var(--ard-cmpcl--bg-colored);
-  border-bottom-color: var(--ard-cmpcl--bg-colored);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-start .ard-range-overlay {
-  border-left-color: var(--ard-cmpcl--bg-colored);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-highlighted .ard-range-overlay {
-  border-right-color: var(--ard-cmpcl--bg-colored);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted .ard-focus-overlay {
-  opacity: var(--ard-calendar-entry-highlighted-overlay-opacity, 20%);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay {
-  left: 0;
-  border-top-left-radius: var(--ard-calendar-entry-border-radius);
-  border-bottom-left-radius: var(--ard-calendar-entry-border-radius);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted:not(.ard-calendar__entry-selected-in-range) .ard-range-overlay {
-  right: 0;
-  border-top-right-radius: var(--ard-calendar-entry-border-radius);
-  border-bottom-right-radius: var(--ard-calendar-entry-border-radius);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-in-range .ard-range-overlay {
-  opacity: var(--ard-calendar-entry-selected-range-overlay-opacity, 12%);
-  background-color: var(--ard-cmpcl--bg-colored);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-calendar__entry-button {
-  color: var(--ard-cmpcl--on-bg-colored);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-focus-overlay {
-  opacity: var(--ard-calendar-entry-selected-overlay-opacity, 100%);
-  background: var(--ard-cmpcl--bg-colored);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected.ard-calendar-today .ard-focus-overlay {
-  border: var(--ard-calendar-entry-today-selected-border, 2px solid var(--ard-bg));
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled {
-  pointer-events: none;
-  opacity: var(--ard-calendar-entry-disabled-overlay-opacity, 50%);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled .ard-calendar__entry-button {
-  cursor: default;
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled .ard-focus-overlay {
-  background: var(--ard-cmpcl--overlay);
-}
-.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled.ard-calendar__entry-highlighted .ard-focus-overlay {
-  opacity: var(--ard-calendar-entry-disabled-highlighted-overlay-opacity, 15%);
-}
-.ard-calendar .ard-years-view .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay,
-.ard-calendar .ard-months-view .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
-  left: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
-  right: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
-  border: none;
-}
-.ard-calendar .ard-years-view .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay,
-.ard-calendar .ard-months-view .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay {
-  left: 0;
-}
-.ard-calendar .ard-years-view .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay,
-.ard-calendar .ard-months-view .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay {
-  right: 0;
-}
-
-.ard-readonly .ard-calendar,
-.ard-disabled .ard-calendar {
-  pointer-events: none;
-}
-
-.ard-disabled .ard-calendar {
-  opacity: var(--ard-calendar-entry-disabled-opacity, 50%);
+@layer ard-theme {
+  .ard-calendar {
+    min-width: calc(var(--ard-calendar-grid-size) * 7 + var(--ard-calendar-grid-gap) * 6);
+    user-select: none;
+    padding: var(--ard-calendar-padding, 0 0.375rem 0.375rem 0.375rem);
+    box-sizing: content-box;
+  }
+  .ard-calendar.ard-color-none {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: var(--ard-bg-alt);
+    --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
+    --ard-cmpcl--bg-header: var(--ard-bg-filled);
+    --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+    --ard-cmpcl--on-bg: var(--ard-text);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: var(--ard-text);
+    --ard-cmpcl--border-light: var(--ard-text2);
+    --ard-cmpcl--content: var(--ard-text);
+    --ard-cmpcl--content-light: var(--ard-text-alt);
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+  }
+  .ard-calendar.ard-color-primary {
+    --ard-cmpcl--bg: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-primary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--content: rgb(var(--ard-primary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+  }
+  .ard-calendar.ard-color-secondary {
+    --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+    --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+  }
+  .ard-calendar.ard-color-warn {
+    --ard-cmpcl--bg: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-warn-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--content: rgb(var(--ard-warn-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+  }
+  .ard-calendar.ard-color-danger {
+    --ard-cmpcl--bg: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-danger-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--content: rgb(var(--ard-danger-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+    --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+  }
+  .ard-calendar.ard-color-success {
+    --ard-cmpcl--bg: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-success-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+    --ard-cmpcl--content: rgb(var(--ard-success-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+  }
+  .ard-calendar.ard-color-info {
+    --ard-cmpcl--bg: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-info-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+    --ard-cmpcl--content: rgb(var(--ard-info-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+  }
+  .ard-calendar.ard-color-currentColor {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: currentColor;
+    --ard-cmpcl--on-bg: currentColor;
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--border: currentColor;
+    --ard-cmpcl--border-light: currentColor;
+    --ard-cmpcl--content: currentColor;
+    --ard-cmpcl--content-light: currentColor;
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: currentColor;
+    --ard-cmpcl--overlay-colored-light: currentColor;
+  }
+  .ard-calendar .ard-calendar__top-toolbar .ard-calendar__calendar-header {
+    display: grid;
+    grid-template-columns: 1fr 5fr 1fr;
+    align-items: center;
+    justify-items: center;
+    width: 100%;
+    padding: var(--ard-calendar-header-padding, 0.75rem 0);
+  }
+  .ard-calendar .ard-calendar__top-toolbar .ard-calendar__calendar-header .ard-dropdown-arrow {
+    width: var(--ard-dropdown-button-size);
+    height: var(--ard-dropdown-button-size);
+    border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
+    position: relative;
+    border-bottom-color: var(--ard-detail);
+    border-right-color: var(--ard-detail);
+    transform: rotate(45deg) translate(-17.67771%, -17.67771%);
+    box-sizing: border-box;
+  }
+  .ard-calendar .ard-years-view .ard-dropdown-arrow {
+    rotate: 180deg;
+  }
+  .ard-calendar .ard-calendar__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, var(--ard-calendar-grid-size, 2.25rem));
+    gap: var(--ard-calendar-grid-gap, 0.25rem);
+    align-items: center;
+    padding: var(--ard-calendar-weekday-padding, 0 0 0.5rem 0);
+  }
+  .ard-calendar .ard-calendar__weekdays .ard-calendar__weekday {
+    text-align: center;
+    font-size: var(--ard-calendar-weekday-font-size, 0.875rem);
+    font-weight: var(--ard-calendar-weekday-font-weight, 500);
+    color: var(--ard-calendar-weekday-color, var(--ard-text));
+  }
+  .ard-calendar .ard-calendar__days-grid {
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(7, var(--ard-calendar-grid-size));
+    position: relative;
+    outline: none;
+    gap: var(--ard-calendar-grid-gap, 0.25rem);
+  }
+  .ard-calendar .ard-calendar__days-grid > * {
+    width: var(--ard-calendar-grid-size);
+    max-width: var(--ard-calendar-grid-size);
+    height: var(--ard-calendar-grid-size);
+    max-height: var(--ard-calendar-grid-size);
+    box-sizing: border-box;
+  }
+  .ard-calendar .ard-calendar__days-grid.ard-reserve-top-row {
+    padding-top: calc(var(--ard-calendar-grid-size) + var(--ard-calendar-grid-gap));
+  }
+  .ard-calendar .ard-calendar__days-grid .ard-calendar__floating-month {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: var(--ard-calendar-floating-month-transform, none);
+    width: 100%;
+    box-sizing: border-box;
+    aspect-ratio: 7;
+    padding: var(--ard-calendar-floating-month-padding, 0 0 0 1rem);
+    display: flex;
+    align-items: center;
+    font-size: var(--ard-calendar-floating-month-font-size, 0.875rem);
+    font-weight: var(--ard-calendar-floating-month-font-weight, 500);
+    color: var(--ard-calendar-floating-month-color, var(--ard-text3));
+    letter-spacing: 0.5px;
+  }
+  .ard-calendar .ard-calendar__simple-grid {
+    border-top: 1px solid var(--ard-detail-ultralight);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(6, var(--ard-calendar-grid-size));
+    position: relative;
+    outline: none;
+    padding: 0;
+    gap: var(--ard-calendar-grid-gap, 0.25rem);
+  }
+  .ard-calendar .ard-calendar__simple-grid > * {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  .ard-calendar .ard-calendar__entry {
+    z-index: 1;
+    cursor: pointer;
+    outline: none;
+    padding: var(--ard-calendar-entry-padding, 0);
+    box-sizing: border-box;
+  }
+  .ard-calendar .ard-calendar__entry .ard-calendar__entry-button {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--ard-calendar-entry-font-size, 0.875rem);
+    font-weight: var(--ard-calendar-entry-font-weight, 400);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--ard-calendar-entry-border-radius, 9999px);
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+  }
+  .ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-focus-overlay {
+    position: absolute;
+    top: calc(-1 * 0px);
+    bottom: calc(-1 * 0px);
+    left: calc(-1 * 0px);
+    right: calc(-1 * 0px);
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: -1;
+    background: var(--ard-cmpcl--overlay);
+    transition: border-color 0.1s ease, opacity 0.1s ease;
+  }
+  .ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
+    position: absolute;
+    top: calc(-1 * 0px);
+    bottom: calc(-1 * 0px);
+    left: calc(-1 * 0px);
+    right: calc(-1 * 0px);
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: -1;
+    opacity: 1;
+    left: calc(var(--ard-calendar-grid-gap, 0.25rem) / -2 - 1px);
+    right: calc(var(--ard-calendar-grid-gap, 0.25rem) / -2 - 1px);
+    border: var(--ard-calendar-entry-range-overlay-border-width, 1px) var(--ard-calendar-entry-range-overlay-border-style, dashed) transparent;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-empty {
+    cursor: default;
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar-today .ard-calendar__entry-button {
+    border-color: var(--ard-calendar-entry-today-border-color, var(--ard-detail));
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range .ard-range-overlay {
+    opacity: 1;
+    border-top-color: var(--ard-cmpcl--bg-colored);
+    border-bottom-color: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-start .ard-range-overlay {
+    border-left-color: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-highlighted .ard-range-overlay {
+    border-right-color: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted .ard-focus-overlay {
+    opacity: var(--ard-calendar-entry-highlighted-overlay-opacity, 20%);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay {
+    left: 0;
+    border-top-left-radius: var(--ard-calendar-entry-border-radius);
+    border-bottom-left-radius: var(--ard-calendar-entry-border-radius);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted:not(.ard-calendar__entry-selected-in-range) .ard-range-overlay {
+    right: 0;
+    border-top-right-radius: var(--ard-calendar-entry-border-radius);
+    border-bottom-right-radius: var(--ard-calendar-entry-border-radius);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-in-range .ard-range-overlay {
+    opacity: var(--ard-calendar-entry-selected-range-overlay-opacity, 12%);
+    background-color: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-calendar__entry-button {
+    color: var(--ard-cmpcl--on-bg-colored);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-focus-overlay {
+    opacity: var(--ard-calendar-entry-selected-overlay-opacity, 100%);
+    background: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected.ard-calendar-today .ard-focus-overlay {
+    border: var(--ard-calendar-entry-today-selected-border, 2px solid var(--ard-bg));
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled {
+    pointer-events: none;
+    opacity: var(--ard-calendar-entry-disabled-overlay-opacity, 50%);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled .ard-calendar__entry-button {
+    cursor: default;
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled .ard-focus-overlay {
+    background: var(--ard-cmpcl--overlay);
+  }
+  .ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled.ard-calendar__entry-highlighted .ard-focus-overlay {
+    opacity: var(--ard-calendar-entry-disabled-highlighted-overlay-opacity, 15%);
+  }
+  .ard-calendar .ard-years-view .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay,
+  .ard-calendar .ard-months-view .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
+    left: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
+    right: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
+    border: none;
+  }
+  .ard-calendar .ard-years-view .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay,
+  .ard-calendar .ard-months-view .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay {
+    left: 0;
+  }
+  .ard-calendar .ard-years-view .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay,
+  .ard-calendar .ard-months-view .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay {
+    right: 0;
+  }
+  .ard-readonly .ard-calendar,
+  .ard-disabled .ard-calendar {
+    pointer-events: none;
+  }
+  .ard-disabled .ard-calendar {
+    opacity: var(--ard-calendar-entry-disabled-opacity, 50%);
+  }
 }
 
 /*# sourceMappingURL=calendar.css.map */