@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/style.css

@@ -0,0 +1,1126 @@
+.dropdown{
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.calendarDropdownContent{
+  display:flex;
+  flex-direction:column;
+}
+.timePickerWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.timePickerWrapper[data-fit-to-container]{
+  min-width:100%;
+  height:100%;
+}
+.dropdown{
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.timePickerDropdownContent{
+  display:flex;
+  flex-direction:column;
+}
+
+.timePickerBaseLimited[data-size=s]{
+  height:257px;
+}
+.timePickerBaseLimited[data-size=m]{
+  height:265px;
+}
+.timePickerBaseLimited[data-size=l]{
+  height:337px;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.root[data-fit-to-container]{
+  min-width:100%;
+  height:100%;
+}
+
+.dateWrapper{
+  display:flex;
+  height:100%;
+}
+
+.calendarWrapper{
+  display:flex;
+  flex-direction:column;
+}
+.calendarWrapper[data-fit-to-container]{
+  width:100%;
+}
+
+.body{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+}
+.body[data-size=s]{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  width:232px;
+  min-height:224px;
+}
+.body[data-size=m]{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  width:232px;
+  min-height:224px;
+}
+.body[data-size=l]{
+  min-width:296px;
+  min-height:280px;
+  padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  width:296px;
+  min-height:280px;
+}
+.body[data-fit-to-container]{
+  width:100%;
+}
+
+.divider{
+  flex-shrink:0;
+  height:auto;
+}
+
+.verticalDividerWrap{
+  flex-shrink:0;
+  align-self:stretch;
+}
+
+.leftPanel{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+}
+
+.leftPanelHeader{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.leftPanelHeader[data-size=s]{
+  padding-left:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  height:var(--sn-calendar-anatomy-size-s-header-height, var(--sn-primitive-dimension-32, 32px));
+}
+.leftPanelHeader[data-size=m]{
+  padding-left:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-calendar-anatomy-size-m-header-height, var(--sn-primitive-dimension-40, 40px));
+}
+.leftPanelHeader[data-size=l]{
+  padding-left:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  padding-right:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-calendar-anatomy-size-l-header-height, var(--sn-primitive-dimension-56, 56px));
+}
+
+.presetsList{
+  width:144px;
+}
+.inline{
+  display:flex;
+  flex-direction:column;
+}
+
+.divider{
+  flex-shrink:0;
+}
+
+.actions{
+  padding-left:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-top:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingTop, var(--sn-primitive-dimension-8, 8px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingBottom, var(--sn-primitive-dimension-4, 4px));
+}
+.grid{
+  display:grid;
+  width:100%;
+  height:100%;
+}
+.header{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:space-between;
+  box-sizing:border-box;
+}
+.header[data-size=s]{
+  padding-left:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  height:var(--sn-calendar-anatomy-size-s-header-height, var(--sn-primitive-dimension-32, 32px));
+}
+.header[data-size=m]{
+  padding-left:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-calendar-anatomy-size-m-header-height, var(--sn-primitive-dimension-40, 40px));
+}
+.header[data-size=l]{
+  padding-left:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  padding-right:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-calendar-anatomy-size-l-header-height, var(--sn-primitive-dimension-56, 56px));
+}
+
+.scrollControlWrapper{
+  display:flex;
+  align-items:center;
+}
+@charset "UTF-8";
+.stateLayer{
+  position:absolute;
+  width:100%;
+  height:100%;
+  visibility:initial;
+}
+
+.focusLayer{
+  position:absolute;
+  inset:0;
+  display:none;
+  width:100%;
+  height:100%;
+  border:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  border-radius:0;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:0 solid transparent;
+  background-color:transparent;
+}
+.container[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container:focus-visible{
+  outline:none;
+}
+.container:focus-visible .focusLayer{
+  display:initial;
+}
+.container:not([data-disabled]){
+  cursor:pointer;
+}
+.container:not([data-disabled]) .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container:not([data-disabled]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.container:not([data-disabled]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container:not([data-disabled]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container:not([data-disabled]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container:not([data-disabled]){
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=borderOnBackground], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=activatedOnBackground], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=versionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyVersionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=inversionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyInversionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container:not([data-disabled]):not([data-another])[data-checked]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.container:not([data-disabled]):not([data-another])[data-range-position=in]{
+  background-color:transparent;
+}
+.container:not([data-disabled])[data-another][data-checked][data-range-position=start], .container:not([data-disabled])[data-another][data-checked][data-range-position=end], .container:not([data-disabled])[data-another][data-checked][data-range-position=start-end]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.label{
+  text-align:center;
+}
+.label[data-another]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.label[data-another][data-checked]:not([data-range-position=in], [data-range-position=out]){
+  color:var(--sn-theme-color-available-onComplementary, #ffffff);
+}
+.label[data-disabled]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.label:not([data-disabled], [data-another])[data-checked]:not([data-range-position=in]){
+  color:var(--sn-theme-color-available-onComplementary, #ffffff);
+}
+.label:not([data-disabled], [data-another])[data-checked][data-range-position=in]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.label:not([data-disabled], [data-another])[data-checked][data-range-position=in][data-holiday]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+.label:not([data-disabled], [data-another]):not([data-checked]){
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.label:not([data-disabled], [data-another]):not([data-checked])[data-holiday]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+@media (hover: hover){
+  .label:not([data-disabled], [data-another]):not([data-holiday]){
+    color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  }
+  .label:not([data-disabled], [data-another])[data-holiday]{
+    color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+  }
+}
+
+.marker{
+  position:absolute;
+  right:0;
+  bottom:-2px;
+  left:0;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:center;
+}
+
+.markerLine{
+  flex-shrink:0;
+}
+.markerLine[data-holiday]{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.markerLine[data-checked]:not([data-range-position=in]){
+  background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.markerLine[data-checked][data-range-position=in]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.markerLine[data-checked][data-range-position=in][data-holiday]{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.markerLine:not([data-checked]){
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.markerLine:not([data-checked])[data-holiday]{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+
+.labelWrapper{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.root:not([data-visible]){
+  pointer-events:none;
+  visibility:hidden;
+}
+.root:not([data-visible]) .stateLayer{
+  display:none;
+}
+.root[data-disabled] .stateLayer{
+  display:none;
+}
+.root[data-size=s]{
+  min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+}
+.root[data-size=s] .container{
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=s] .container[data-range-position=start]{
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=s] .container[data-range-position=in]{
+  border-radius:0;
+}
+.root[data-size=s] .container[data-range-position=end]{
+  border-radius:0 var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.root[data-size=s] .container[data-range-position=out], .root[data-size=s] .container[data-range-position=start-end]{
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=s] .labelWrapper{
+  padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.root[data-size=s] .label{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-size=s] .markerLine{
+  height:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  width:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-12, 12px));
+}
+.root[data-size=m]{
+  min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+}
+.root[data-size=m] .container{
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=m] .container[data-range-position=start]{
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=m] .container[data-range-position=in]{
+  border-radius:0;
+}
+.root[data-size=m] .container[data-range-position=end]{
+  border-radius:0 var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.root[data-size=m] .container[data-range-position=out], .root[data-size=m] .container[data-range-position=start-end]{
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=m] .labelWrapper{
+  padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.root[data-size=m] .label{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.root[data-size=m] .markerLine{
+  height:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  width:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=l]{
+  min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+}
+.root[data-size=l] .container{
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .container[data-range-position=start]{
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .container[data-range-position=in]{
+  border-radius:0;
+}
+.root[data-size=l] .container[data-range-position=end]{
+  border-radius:0 var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.root[data-size=l] .container[data-range-position=out], .root[data-size=l] .container[data-range-position=start-end]{
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .labelWrapper{
+  padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+.root[data-size=l] .label{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.root[data-size=l] .markerLine{
+  height:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  width:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-20, 20px));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-another]) .container{
+    background-color:transparent;
+  }
+  .root:hover:not([data-disabled], [data-another]) .label:not([data-holiday]){
+    color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  }
+  .root:hover:not([data-disabled], [data-another]) .label[data-holiday]{
+    color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+  }
+  .root:hover:not([data-disabled], [data-another]) .markerLine:not([data-holiday]){
+    background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  }
+  .root:hover:not([data-disabled], [data-another]) .markerLine[data-holiday]{
+    background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+  }
+}
+.calendarHeader{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+
+.headerRow{
+  display:grid;
+  grid-template-columns:1fr auto 1fr;
+  align-items:center;
+  width:100%;
+}
+
+.headerSlotStart{
+  display:flex;
+  justify-content:flex-start;
+  min-width:0;
+}
+
+.headerSlotCenter{
+  display:flex;
+  justify-content:center;
+  min-width:0;
+}
+
+.headerSlotEnd{
+  display:flex;
+  justify-content:flex-end;
+  min-width:0;
+}
+
+.weekRow{
+  display:grid;
+  grid-template-columns:repeat(7, minmax(0, 1fr));
+}
+.footer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  width:100%;
+}
+
+.selectedRow{
+  display:flex;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  align-items:baseline;
+  justify-content:space-between;
+  width:100%;
+}
+
+.selectedLabel{
+  flex:1 1 auto;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+
+.selectedValue{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:right;
+  white-space:nowrap;
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.block{
+  display:flex;
+  flex-direction:column;
+}
+
+.caption{
+  padding:var(--sn-primitive-dimension-6, 6px) 0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:center;
+}
+.block[data-size=s] .caption{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.block[data-size=m] .caption{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.block[data-size=l] .caption{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+
+.grid{
+  display:grid;
+}
+.block[data-size=s] .grid{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.block[data-size=m] .grid{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.block[data-size=l] .grid{
+  min-width:296px;
+  min-height:280px;
+  padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+.scrollHost{
+  width:100%;
+  height:100%;
+}
+
+.virtualContainer{
+  position:relative;
+  width:100%;
+}
+
+.virtualRow{
+  position:absolute;
+  top:0;
+  left:0;
+  transform:translateY(var(--virtual-row-offset, 0));
+  width:100%;
+}
+.label{
+  display:block;
+  width:100%;
+  text-align:center;
+}
+.label[data-size=s]{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.label[data-size=m]{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.label[data-size=l]{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.divider{
+  flex-shrink:0;
+  height:auto;
+}
+
+.root{
+  display:inline-flex;
+  flex-direction:column;
+  height:100%;
+}
+
+.listTimeDesktop{
+  display:flex;
+  flex-grow:1;
+}
+.listTimeDesktop[data-size=s]{
+  min-width:160px;
+  height:224px;
+  padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.listTimeDesktop[data-size=m]{
+  min-width:192px;
+  height:224px;
+  padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.listTimeDesktop[data-size=l]{
+  min-width:224px;
+  height:280px;
+  padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+.listTimeDesktop:not([data-fixed-width])[data-fit-to-container]{
+  width:100%;
+}
+
+.timeListColumn{
+  flex:1;
+}
+.timeListColumn [role=menuitem]{
+  align-items:center;
+}
+.timeListColumn [role=menuitem][data-size=s]{
+  min-height:calc(224px / 7);
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.timeListColumn [role=menuitem][data-size=m]{
+  min-height:calc(224px / 7);
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.timeListColumn [role=menuitem][data-size=l]{
+  min-height:calc(280px / 7);
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+
+.header{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+}
+.header[data-size=s]{
+  padding-left:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  height:var(--sn-calendar-anatomy-size-s-header-height, var(--sn-primitive-dimension-32, 32px));
+}
+.header[data-size=m]{
+  padding-left:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-calendar-anatomy-size-m-header-height, var(--sn-primitive-dimension-40, 40px));
+}
+.header[data-size=l]{
+  padding-left:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  padding-right:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-calendar-anatomy-size-l-header-height, var(--sn-primitive-dimension-56, 56px));
+}
+
+.time{
+  display:flex;
+  align-items:center;
+  height:var(--sn-primitive-dimension-24, 24px);
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  text-align:center;
+}
+.time[data-size=s]{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+.time[data-size=m]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.time[data-size=l]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+@charset "UTF-8";
+.root{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.root[data-size=s]{
+  gap:var(--sn-calendar-anatomy-size-s-timePicker-gap, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-calendar-anatomy-size-s-timePicker-padding, var(--sn-primitive-dimension-8, 8px));
+}
+.root[data-size=m]{
+  gap:var(--sn-calendar-anatomy-size-m-timePicker-gap, var(--sn-primitive-dimension-32, 32px));
+  padding:var(--sn-calendar-anatomy-size-m-timePicker-padding, var(--sn-primitive-dimension-8, 8px));
+}
+.root[data-size=l]{
+  gap:var(--sn-calendar-anatomy-size-l-timePicker-gap, var(--sn-primitive-dimension-40, 40px));
+  padding:var(--sn-calendar-anatomy-size-l-timePicker-padding, var(--sn-primitive-dimension-8, 8px));
+}
+
+.selectedTime{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+}
+
+.root[data-size=s] .selectedTime{
+  gap:var(--sn-calendar-anatomy-size-s-timePicker-selectedTime-gap, var(--sn-primitive-dimension-8, 8px));
+}
+
+.root[data-size=m] .selectedTime{
+  gap:var(--sn-calendar-anatomy-size-m-timePicker-selectedTime-gap, var(--sn-primitive-dimension-8, 8px));
+}
+
+.root[data-size=l] .selectedTime{
+  gap:var(--sn-calendar-anatomy-size-l-timePicker-selectedTime-gap, var(--sn-primitive-dimension-8, 8px));
+}
+
+.dateLabel{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  text-align:center;
+}
+.root[data-size=s] .dateLabel{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+.root[data-size=m] .dateLabel{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-size=l] .dateLabel{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+
+.timeRow{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.timeMain{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.root[data-size=s] .timeMain{
+  font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-s, var(--sn-brand-font-fontWeight-light-regular-display-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-by40, 48px)));
+  font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px)));
+  letter-spacing:var(--sn-regular-display-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize40, 20px));
+}
+.root[data-size=m] .timeMain{
+  font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-m, var(--sn-brand-font-fontWeight-light-regular-display-m, var(--sn-primitive-font-fontWeightValue-650, 650))));
+  line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-by48, 60px)));
+  font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px)));
+  letter-spacing:var(--sn-regular-display-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize48, 24px));
+}
+.root[data-size=l] .timeMain{
+  font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-l, var(--sn-brand-font-fontWeight-light-regular-display-l, var(--sn-primitive-font-fontWeightValue-700, 700))));
+  line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-by64, 72px)));
+  font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-64, 64px)));
+  letter-spacing:var(--sn-regular-display-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize56, 28px));
+}
+
+.timeSeconds{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.root[data-size=s] .timeSeconds{
+  font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-s, var(--sn-brand-font-fontWeight-light-regular-display-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-by40, 48px)));
+  font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px)));
+  letter-spacing:var(--sn-regular-display-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize40, 20px));
+}
+.root[data-size=m] .timeSeconds{
+  font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-m, var(--sn-brand-font-fontWeight-light-regular-display-m, var(--sn-primitive-font-fontWeightValue-650, 650))));
+  line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-by48, 60px)));
+  font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px)));
+  letter-spacing:var(--sn-regular-display-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize48, 24px));
+}
+.root[data-size=l] .timeSeconds{
+  font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-l, var(--sn-brand-font-fontWeight-light-regular-display-l, var(--sn-primitive-font-fontWeightValue-700, 700))));
+  line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-by64, 72px)));
+  font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-64, 64px)));
+  letter-spacing:var(--sn-regular-display-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize56, 28px));
+}
+
+.drum{
+  display:flex;
+  flex-direction:row;
+  align-items:stretch;
+  width:100%;
+}
+.root[data-size=s] .drum{
+  max-width:240px;
+}
+.root[data-size=m] .drum{
+  max-width:240px;
+}
+.root[data-size=l] .drum{
+  max-width:300px;
+}
+
+.column{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  flex:1 1 0%;
+  min-width:0;
+  -webkit-touch-callout:none;
+}
+
+.wheelViewport{
+  touch-action:none;
+  position:relative;
+  overflow:hidden;
+  box-sizing:border-box;
+  width:100%;
+}
+.wheelFadingWrapper{
+  position:relative;
+  overflow:hidden;
+  width:100%;
+  height:100%;
+}
+
+.wheelFadeTop,
+.wheelFadeBottom{
+  pointer-events:none;
+  position:absolute;
+  z-index:2;
+  right:0;
+  left:0;
+  height:40%;
+}
+
+.wheelFadeTop{
+  top:0;
+  background:linear-gradient(to bottom, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
+}
+
+.wheelFadeBottom{
+  bottom:0;
+  background:linear-gradient(to top, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
+}
+
+.wheelSlotLines{
+  pointer-events:none;
+  position:absolute;
+  z-index:3;
+  top:50%;
+  right:0;
+  left:0;
+  transform:translateY(-50%);
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  height:var(--wheel-item, 40px);
+}
+
+.wheelSlotLine{
+  height:0;
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+
+.wheelTrack{
+  will-change:transform;
+  position:relative;
+  z-index:0;
+  transform:translate3d(0, var(--wheel-translate), 0);
+}
+
+.wheelRow{
+  flex-shrink:0;
+  width:100%;
+  height:var(--wheel-item);
+}
+
+.itemCell{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+}
+.root[data-size=s] .itemCell{
+  min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=m] .itemCell{
+  min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .itemCell{
+  min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:initial;
+}
+.stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+
+.itemLabel{
+  position:relative;
+  text-align:center;
+}
+.root[data-size=s] .itemCell .itemLabel{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-size=m] .itemCell .itemLabel{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.root[data-size=l] .itemCell .itemLabel{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.itemCellSelected .itemLabel{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.itemCell:not(.itemCellSelected) .itemLabel{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.cell{
+  pointer-events:none;
+}