@amsterdam/design-system-css/dist/date-picker/date-picker.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-date-picker{display:inline-flex;flex-direction:column;font-family:var(--ams-date-picker-font-family);font-size:var(--ams-date-picker-font-size);font-weight:var(--ams-date-picker-font-weight);gap:var(--ams-date-picker-gap);inline-size:var(--ams-date-picker-inline-size);line-height:var(--ams-date-picker-line-height);max-inline-size:100%}.ams-date-picker__header{align-items:center;display:flex}.ams-date-picker__caption{margin-inline:auto;text-align:center}.ams-date-picker__body{display:grid;grid-template-columns:repeat(7, 1fr)}.ams-date-picker__row{display:grid;grid-column:1/-1;grid-template-columns:repeat(7, 1fr)}.ams-date-picker__weekday{text-align:center}.ams-date-picker__day{border-style:none;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;background-color:rgba(0,0,0,0);color:var(--ams-date-picker-day-color);cursor:var(--ams-date-picker-day-cursor);font-family:inherit;font-size:inherit;font-weight:inherit;inline-size:100%;line-height:inherit;outline-offset:var(--ams-date-picker-day-outline-offset);text-align:center}.ams-date-picker__day:not([aria-disabled=true]):hover{background-color:var(--ams-date-picker-day-hover-background-color);color:var(--ams-date-picker-day-hover-color)}.ams-date-picker__day--current{font-weight:var(--ams-date-picker-day-current-font-weight)}.ams-date-picker__cell[aria-selected=true] .ams-date-picker__day{background-color:var(--ams-date-picker-day-selected-background-color);color:var(--ams-date-picker-day-selected-color)}.ams-date-picker__cell[aria-selected=true] .ams-date-picker__day:hover{background-color:var(--ams-date-picker-day-selected-hover-background-color)}@media(forced-colors: active){.ams-date-picker__cell[aria-selected=true] .ams-date-picker__day,.ams-date-picker__cell[aria-selected=true] .ams-date-picker__day *,.ams-date-picker__cell[aria-selected=true] .ams-date-picker__day:hover{background-color:Highlight;color:HighlightText}}.ams-date-picker__day[aria-disabled=true]{color:var(--ams-date-picker-day-disabled-color);cursor:var(--ams-date-picker-day-disabled-cursor);text-decoration-line:var(--ams-date-picker-day-disabled-text-decoration-line)}/*# sourceMappingURL=date-picker.css.map */