@event-calendar/core 4.7.0 → 5.0.0

package/dist/index.css

@@ -1,780 +1,676 @@
 /*!
- * EventCalendar v4.7.0
+ * EventCalendar v5.0.0
  * https://github.com/vkurko/calendar
  */
 .ec {
-  /* HSL */
-  color-scheme: light;
-  --ec-h: 0;
-  --ec-s: 0%;
-  --ec-l-300: 91.00%;
-  --ec-l-500: 83.50%;
-  --ec-l-600: 78.40%;
-  --ec-l-700: 71.40%;
-  --ec-bg-fallback-color: #fff;
-  --ec-hs: var(--ec-h), var(--ec-s);
-  /* Main color */
-  --ec-color-300: hsl(var(--ec-hs), var(--ec-l-300));
-  --ec-color-500: hsl(var(--ec-hs), var(--ec-l-500));
-  --ec-color-600: hsl(var(--ec-hs), var(--ec-l-600));
-  --ec-color-700: hsl(var(--ec-hs), var(--ec-l-700));
-  /* General props */
-  --ec-border-color: var(--ec-color-500);
-  --ec-accent-color: var(--ec-color-600);
-  /* Buttons */
-  --ec-button-bg-color: var(--ec-bg-color);
-  --ec-button-border-color: var(--ec-color-600);
-  --ec-button-text-color: var(--ec-text-color);
-  --ec-button-active-bg-color: var(--ec-color-300);
-  --ec-button-active-border-color: var(--ec-color-700);
-  --ec-button-active-text-color: var(--ec-button-text-color);
-  /* Events */
-  --ec-event-bg-color: #039be5;
-  --ec-event-text-color: #fff;
-  --ec-bg-event-color: var(--ec-color-500);
-  --ec-bg-event-opacity: 0.3;
-  /* Days */
-  --ec-list-day-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
-  --ec-today-bg-color: rgba(255, 220, 40, .15);
-  --ec-highlight-color: rgba(188, 232, 241, .3);
-  /* Popup */
-  --ec-popup-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
-  /* Now Indicator */
-  --ec-now-indicator-color: #ea4335;
-}
-.ec-dark .ec {
-  color-scheme: dark;
-  --ec-h: 215;
-  --ec-s: 15%;
-  --ec-l-300: 25.50%;
-  --ec-l-500: 42.40%;
-  --ec-l-600: 49.80%;
-  --ec-l-700: 57.30%;
-  --ec-bg-fallback-color: #22272e;
-}
-@media (prefers-color-scheme: dark) {
-  .ec-auto-dark .ec {
-    color-scheme: dark;
-    --ec-h: 215;
-    --ec-s: 15%;
-    --ec-l-300: 25.50%;
-    --ec-l-500: 42.40%;
-    --ec-l-600: 49.80%;
-    --ec-l-700: 57.30%;
-    --ec-bg-fallback-color: #22272e;
-  }
-}
-
-.ec-timeline .ec-container {
-  display: flex;
-  flex: 1 1 0%;
-  min-height: 0;
-}
-.ec-timeline .ec-main {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  position: relative;
-}
-.ec-timeline .ec-content {
-  flex-direction: column;
-}
-.ec-timeline .ec-body {
-  flex: 1 1 auto;
-  overflow: auto;
-}
-.ec-timeline .ec-body .ec-content {
-  min-height: 100%;
-  min-width: max-content;
-  position: relative;
-}
-.ec-timeline .ec-body .ec-days {
-  flex-shrink: 0;
-}
-.ec-timeline .ec-body .ec-days:not(:last-child) {
-  flex-grow: 0;
-}
-.ec-timeline .ec-header {
-  overflow: hidden;
-}
-.ec-timeline .ec-header .ec-days {
-  min-width: max-content;
-}
-.ec-timeline .ec-header .ec-day {
-  flex-basis: auto;
-  display: flex;
-  flex-direction: column;
-}
-.ec-timeline .ec-header .ec-day:first-child .ec-day-head,
-.ec-timeline .ec-header .ec-day:first-child .ec-time:first-child {
-  border: none;
-}
-.ec-timeline .ec-day {
-  border: none;
-}
-.ec-timeline .ec-day-head {
-  border-style: none none none solid;
-}
-.ec-timeline .ec-times {
-  display: flex;
-  border-top: 1px solid var(--ec-border-color);
-}
-.ec-timeline .ec-time {
-  border-left: 1px solid var(--ec-border-color);
-  box-sizing: border-box;
-  font-size: 0.95em;
-  min-height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ec-timeline .ec-time.ec-minor {
-  visibility: hidden;
-}
-.ec-timeline .ec-time, .ec-timeline .ec-line {
-  width: 72px;
-}
-.ec-timeline .ec-events {
-  position: relative;
-  height: 100%;
-  margin: 0;
-}
-.ec-timeline .ec-event {
-  position: absolute;
-}
-.ec-timeline .ec-bg-event {
-  height: 100%;
-  z-index: auto;
-}
-.ec-timeline .ec-lines {
-  display: flex;
-}
-.ec-timeline .ec-line:not(:first-child):after {
-  content: "";
-  position: absolute;
-  height: 100%;
-  border-left: 1px solid var(--ec-border-color);
-  pointer-events: none;
-}
-.ec-timeline .ec-line.ec-minor:after {
-  border-left-style: dotted;
-}
-.ec-timeline .ec-sidebar {
-  padding: 0;
-  border: 1px solid var(--ec-border-color);
-  border-right-style: none;
+    color-scheme: light;
+
+    /* Main colors */
+    --ec-color-400: oklch(70.8% 0 0);
+    --ec-color-300: oklch(87% 0 0);
+    --ec-color-200: oklch(92.2% 0 0);
+    --ec-color-100: oklch(97% 0 0);
+    --ec-color-50: oklch(98.5% 0 0);
+
+    /* General props */
+    --ec-bg-color: #fff;
+    --ec-text-color: currentcolor;
+    --ec-border-color: var(--ec-color-300);
+
+    /* Buttons */
+    --ec-button-bg-color: var(--ec-bg-color);
+    --ec-button-border-color: var(--ec-border-color);
+    --ec-button-text-color: var(--ec-text-color);
+    --ec-button-active-bg-color: var(--ec-color-200);
+    --ec-button-active-border-color: var(--ec-color-400);
+    --ec-button-active-text-color: var(--ec-button-text-color);
+
+    /* Days */
+    --ec-today-bg-color: oklch(98.7% 0.026 102.212);
+    --ec-highlight-color: oklch(98.4% 0.019 200.873);
+
+    /* Events */
+    --ec-event-bg-color: oklch(70.7% 0.165 254.624);
+    --ec-event-text-color: #fff;
+    --ec-bg-event-color: var(--ec-color-300);
+    --ec-bg-event-opacity: 0.3;
+    --ec-event-col-gap: .375rem;
+
+    /* Now Indicator */
+    --ec-now-indicator-color: oklch(63.7% 0.237 25.331);
+
+    /* Popup */
+    --ec-popup-bg-color: var(--ec-bg-color);
+
+    .ec-dark & {
+        color-scheme: dark;
+        --ec-color-400: oklch(43.9% 0 0);
+        --ec-color-300: oklch(37.1% 0 0);
+        --ec-color-200: oklch(26.9% 0 0);
+        --ec-color-100: oklch(20.5% 0 0);
+        --ec-color-50: oklch(14.5% 0 0);
+        --ec-bg-color: var(--ec-color-100);
+        --ec-today-bg-color: oklch(28.6% 0.066 53.813);
+        --ec-highlight-color: oklch(30.2% 0.056 229.695);
+        --ec-bg-event-opacity: 0.5;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .ec-auto-dark & {
+            color-scheme: dark;
+            --ec-color-400: oklch(43.9% 0 0);
+            --ec-color-300: oklch(37.1% 0 0);
+            --ec-color-200: oklch(26.9% 0 0);
+            --ec-color-100: oklch(20.5% 0 0);
+            --ec-color-50: oklch(14.5% 0 0);
+            --ec-bg-color: var(--ec-color-100);
+            --ec-today-bg-color: oklch(28.6% 0.066 53.813);
+            --ec-highlight-color: oklch(30.2% 0.056 229.695);
+            --ec-bg-event-opacity: 0.5;
+        }
+    }
 }
-.ec-timeline .ec-sidebar .ec-sidebar-title {
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--ec-border-color);
-  box-sizing: content-box;
-}
-.ec-timeline .ec-sidebar .ec-content {
-  flex: 1;
-  overflow: hidden;
-}
-.ec-timeline .ec-sidebar .ec-resource {
-  padding: 0 8px;
-  flex-shrink: 0;
-}
-.ec-timeline .ec-sidebar .ec-resource:not(:last-child) {
-  flex-grow: 0;
-  border-bottom: 1px solid var(--ec-border-color);
-}
-.ec-timeline .ec-sidebar .ec-resource:last-child {
-  flex-basis: 100% !important;
-}
-.ec-timeline .ec-sidebar .ec-resource span {
-  padding-top: 8px;
-  height: fit-content;
-}
-
-.ec-time-grid .ec-body .ec-event {
-  position: absolute;
-}
-.ec-time-grid .ec-body .ec-event-title {
-  position: sticky;
-  top: 0;
-}
-.ec-time-grid .ec-body .ec-resizer {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 50%;
-  max-height: 8px;
-  cursor: ns-resize;
-}
-.ec-time-grid .ec-body .ec-resizer.ec-start {
-  bottom: auto;
-  top: 0;
-}
-.ec-time-grid .ec-bg-event {
-  width: 100%;
-  z-index: 1;
-}
-.ec-time-grid .ec-time {
-  position: relative;
-  line-height: 24px;
-  top: -12px;
-  text-align: right;
-}
-.ec-time-grid .ec-time.ec-minor {
-  visibility: hidden;
-}
-.ec-time-grid .ec-header .ec-time,
-.ec-time-grid .ec-all-day .ec-time {
-  visibility: hidden;
-  overflow-y: hidden;
-  height: 0;
-}
-.ec-time-grid .ec-time,
-.ec-time-grid .ec-line {
-  height: 24px;
-}
-.ec-time-grid .ec-lines {
-  width: 8px;
-}
-.ec-time-grid .ec-line:not(:first-child):after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  border-bottom: 1px solid var(--ec-border-color);
-  pointer-events: none;
-}
-.ec-time-grid .ec-line.ec-minor:after {
-  border-bottom-style: dotted;
-}
-.ec-time-grid .ec-sidebar-title {
-  visibility: hidden;
-  overflow-y: hidden;
-  height: 0;
-  text-align: right;
-}
-.ec-time-grid .ec-all-day .ec-sidebar-title {
-  visibility: visible;
-  height: auto;
-  padding: 8px 0;
-}
-
-.ec-day-grid .ec-body {
-  flex: 1 1 auto;
-}
-.ec-day-grid .ec-body .ec-day {
-  min-height: 5em;
-  position: relative;
-}
-.ec-day-grid .ec-content {
-  flex-direction: column;
-  height: 100%;
-}
-.ec-day-grid .ec-uniform .ec-content {
-  overflow: hidden;
-}
-.ec-day-grid .ec-uniform .ec-days {
-  flex: 1 1 0%;
-  min-height: 0;
-}
-.ec-day-grid .ec-uniform .ec-day {
-  min-height: 0;
-}
-.ec-day-grid .ec-day:first-child {
-  border-left: none;
-}
-.ec-day-grid .ec-day-head {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  border: none;
-  padding: 4px 4px 3px;
-}
-.ec-day-grid .ec-day-foot {
-  position: absolute;
-  bottom: 0;
-  padding: 2px;
-  font-size: 0.85em;
-}
-.ec-day-grid .ec-day-foot a {
-  cursor: pointer;
-}
-
-/* Grid */
-.ec-days,
-.ec-day,
-.ec-resource {
-  flex: 1 1 0;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.ec {
-  display: flex;
-  flex-direction: column;
-  color: var(--ec-text-color);
-  background-color: var(--ec-bg-color);
-  -webkit-tap-highlight-color: transparent;
-  /* Scrollbar */
-}
-.ec ::-webkit-scrollbar {
-  background-color: transparent;
-}
-.ec ::-webkit-scrollbar-thumb {
-  border: 4px solid transparent;
-  box-shadow: none;
-  background-color: var(--ec-border-color);
-  background-clip: padding-box;
-  border-radius: 8px;
-  min-height: 40px;
-}
-.ec :hover::-webkit-scrollbar-thumb {
-  background-color: var(--ec-accent-color);
-}
-
-.ec-hidden-scroll {
-  display: none;
-  overflow-y: scroll;
-  visibility: hidden;
-  flex-shrink: 0;
+.ec-day {
+    --ec-day-bg-color: var(--ec-bg-color);
+    background-color: var(--ec-day-bg-color);
+
+    &.ec-today {
+        --ec-day-bg-color: var(--ec-today-bg-color);
+    }
+
+    &.ec-highlight {
+        --ec-day-bg-color: var(--ec-highlight-color);
+    }
+
+    .ec-time-grid .ec-body & {
+        background-image:
+                linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px),
+                linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px);
+        background-size:
+                100% 100%,
+                100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
+                2px 100%,
+                100% var(--ec-slot-height);
+    }
+
+    .ec-timeline:not(.ec-month-view) .ec-body & {
+        background-image:
+                linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
+                linear-gradient(to right, var(--ec-border-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
+                linear-gradient(to right, var(--ec-border-color) 1px, transparent 1px);
+        background-size:
+                100% 100%,
+                calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%,
+                100% 2px,
+                var(--ec-slot-width) 100%;
+    }
+
+    .ec-day-grid & {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-block-size: 5em;
+    }
+
+    .ec-day-grid .ec-uniform & {
+        min-block-size: auto;
+    }
 }
-.ec-with-scroll .ec-hidden-scroll {
-  display: block;
+.ec-day-head {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    padding: .375rem;
+
+    .ec-day.ec-other-month & time {
+        opacity: .3;
+    }
+
+    .ec-list & {
+        background-color: var(--ec-day-bg-color);
+        border-block-end: 1px solid var(--ec-border-color);
+        flex-direction: unset;
+        margin: 0 0 -1px;
+        padding: .5em 1.5em;
+        position: sticky;
+        inset-block-start: 0;
+        z-index: 2;
+    }
+}
+.ec-day-foot {
+    padding: .18rem;
+    font-size: .85em;
+
+    a {
+        cursor: pointer;
+    }
+}
+.ec-disabled {
+    position: relative;
+    &:after {
+        content: '';
+        position: absolute;
+        inset: 0 0 0 0;
+        background-color: var(--ec-bg-event-color);
+        opacity: var(--ec-bg-event-opacity);
+    }
 }
-
 /* Toolbar */
 .ec-toolbar {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1em;
-}
-.ec-toolbar > * {
-  margin-bottom: -0.5em;
-}
-.ec-toolbar > * > * {
-  margin-bottom: 0.5em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-block-end: 1em;
+
+    > * {
+        display: inline-flex;
+        flex-wrap: wrap;
+        column-gap: .75rem;
+        row-gap: .5rem;
+    }
 }
-.ec-toolbar > * > *:not(:last-child) {
-  margin-right: 0.75em;
-}
-
 .ec-title {
-  margin: 0;
+    margin: 0;
 }
-
 .ec-button {
-  background-color: var(--ec-button-bg-color);
-  border: 1px solid var(--ec-button-border-color);
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-}
-.ec-button:not(:disabled) {
-  color: var(--ec-button-text-color);
-  cursor: pointer;
-}
-.ec-button:not(:disabled):hover, .ec-button.ec-active {
-  background-color: var(--ec-button-active-bg-color);
-  border-color: var(--ec-button-active-border-color);
-  color: var(--ec-button-active-text-color);
-  z-index: 1;
-}
-
-.ec-expander {
-  margin-right: 0.25em;
-  width: 1.25em;
-}
-.ec-expander .ec-button {
-  line-height: normal;
-  padding: 0;
-  aspect-ratio: 1;
-  height: 1.25em;
+    background-color: var(--ec-button-bg-color);
+    border: 1px solid var(--ec-button-border-color);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+
+    &:not(:disabled) {
+        color: var(--ec-button-text-color);
+        cursor: pointer;
+    }
+
+    &:not(:disabled):hover,
+    &.ec-active {
+        background-color: var(--ec-button-active-bg-color);
+        border-color: var(--ec-button-active-border-color);
+        color: var(--ec-button-active-text-color);
+        z-index: 1;  /* make all borders visible */
+    }
 }
-
 .ec-button-group {
-  display: inline-flex;
-}
-.ec-button-group .ec-button:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-left: -1px;
-}
-.ec-button-group .ec-button:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+    display: inline-flex;
+    vertical-align: top;
 
-.ec-icon {
-  display: inline-block;
-  width: 1em;
-}
-.ec-icon.ec-prev:after, .ec-icon.ec-next:after {
-  content: "";
-  position: relative;
-  width: 0.5em;
-  height: 0.5em;
-  border-top: 2px solid currentcolor;
-  border-right: 2px solid currentcolor;
-  display: inline-block;
-}
-.ec-icon.ec-prev:after {
-  transform: rotate(-135deg) translate(-2px, 2px);
-}
-.ec-icon.ec-next:after {
-  transform: rotate(45deg) translate(-2px, 2px);
-}
-
-/* Header */
-.ec-header,
-.ec-all-day,
-.ec-body,
-.ec-days,
-.ec-day,
-.ec-day-head {
-  border: 1px solid var(--ec-border-color);
-}
+    .ec-button:not(:first-child) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+        margin-inline-start: -1px;
+    }
 
-.ec-header {
-  display: flex;
-  flex-shrink: 0;
-}
-.ec-header .ec-resource {
-  flex-direction: column;
+    .ec-button:not(:last-child) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
 }
-.ec-header .ec-resource .ec-days {
-  border-top-style: solid;
-}
-.ec-header .ec-days {
-  border-bottom: none;
-}
-.ec-header .ec-day {
-  min-height: 24px;
-  line-height: 24px;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* All Day */
-.ec-all-day {
-  flex-shrink: 0;
-  border-top: none;
-}
-.ec-all-day .ec-days {
-  border-bottom: none;
-}
-.ec-all-day .ec-day {
-  padding-bottom: 4px;
-  position: relative;
-}
-
-/* Body */
-.ec-body {
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.ec:not(.ec-list) .ec-body {
-  border-top: none;
+.ec-icon {
+    display: inline-block;
+    width: 1em;
+
+    &.ec-prev:after,
+    &.ec-next:after {
+        content: '';
+        position: relative;
+        inline-size: .5em;
+        block-size: .5em;
+        border-block-start: 2px solid currentcolor;
+        border-inline-end: 2px solid currentcolor;
+        display: inline-block;
+    }
+
+    &.ec-prev:after {
+        transform: rotate(-135deg) translate(-2px, 2px);
+    }
+
+    &.ec-next:after {
+        transform: rotate(45deg) translate(-2px, 2px);
+    }
 }
-
 .ec-sidebar {
-  flex: 0 0 auto;
-  width: auto;
-  max-width: 100%;
-  padding: 0 4px 0 8px;
-  display: flex;
-  flex-direction: column;
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    background-color: var(--ec-bg-color);
+    border-inline-end: 1px solid var(--ec-border-color);
+    margin-inline-end: -1px;
+    text-align: end;
+    overflow: clip;
+
+    .ec-header & {
+        padding-block: .375rem;
+    }
+
+    .ec-time-grid & {
+        padding-inline: .75rem;
+    }
+
+    .ec-time-grid .ec-body & {
+        background-image:
+                linear-gradient(to left, transparent .375rem, var(--ec-bg-color) .375rem),
+                linear-gradient(var(--ec-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px),
+                linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px);
+        background-size:
+                100% 100%,
+                100% 100%,
+                100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
+                2px 100%,
+                100% var(--ec-slot-height);
+    }
+
+    .ec-timeline .ec-body & {
+        grid-area: 1 / 1 / -1 / 2;
+        display: grid;
+        grid-template-rows: subgrid;
+        background-color: var(--ec-border-color);
+    }
+}
+.ec-row-head {
+    display: flex;
+    background-color: var(--ec-bg-color);
+    padding: .375em .75rem;
+    min-block-size: 1.5em;
 }
-
-.ec-content {
-  display: flex;
-}
-.ec-list .ec-content {
-  flex-direction: column;
-}
-
-.ec-resource {
-  display: flex;
-}
-
-.ec-days {
-  display: flex;
-  border-style: none none solid;
-}
-.ec-days:last-child {
-  border-bottom: none;
-}
-.ec-day-grid .ec-days, .ec-resource .ec-days {
-  flex: 1 0 auto;
-}
-
-.ec-day {
-  border-style: none none none solid;
-}
-.ec-day.ec-today {
-  background-color: var(--ec-today-bg-color);
-}
-.ec-day.ec-highlight {
-  background-color: var(--ec-highlight-color);
-}
-.ec-day.ec-disabled {
-  position: relative;
-}
-.ec-day.ec-disabled:after {
-  content: "";
-  position: absolute;
-  inset: 0 0 0 0;
-  background-color: var(--ec-bg-event-color);
-  opacity: 0.3;
-}
-.ec-day.ec-other-month .ec-day-head time {
-  opacity: 0.3;
-}
-.ec-list .ec-day {
-  border: none;
+.ec-expander {
+    margin-right: .25em;
+    width: 1.25em;
+
+    .ec-button {
+        line-height: normal;
+        padding: 0;
+        aspect-ratio: 1;
+        height: 1.25em;
+    }
+}
+.ec-slot {
+    white-space: nowrap;
+
+    .ec-time-grid & {
+        block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
+        position: relative;
+        inset-block-start: -.5em;
+    }
+
+    .ec-timeline & {
+        grid-column: span var(--ec-slot-label-periodicity);
+        font-size: .95em;
+        padding: .18rem 0;
+        overflow: clip;
+        text-overflow: ellipsis;
+    }
+}
+.ec-slots {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--ec-slot-width);
+    text-align: center;
+
+    --ec-day-bg-color: var(--ec-bg-color);
+    background-color: var(--ec-day-bg-color);
+
+    &.ec-today {
+        --ec-day-bg-color: var(--ec-today-bg-color);
+    }
+
+    &.ec-highlight {
+        --ec-day-bg-color: var(--ec-highlight-color);
+    }
+
+    background-image:
+            linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
+            linear-gradient(to right, var(--ec-border-color) 1px, transparent 1px);
+    background-size:
+            100% 100%,
+            calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%;
 }
+.ec-events {
+    grid-area: 1 / 2 / -1 / -1;
+    display: grid;
+    grid-template: subgrid / subgrid;
+    isolation: isolate;
+    pointer-events: none;
 
-.ec-list .ec-day-head {
-  background-color: var(--ec-list-day-bg-color);
-  border-style: solid none;
-  margin: -1px 0 0;
-  padding: 8px 14px;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-.ec-list .ec-day.ec-today .ec-day-head:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background-color: var(--ec-today-bg-color);
-}
-.ec-list .ec-day:first-child .ec-day-head {
-  border-top: none;
-}
-.ec-list .ec-day-side {
-  float: right;
+    .ec-day-grid & {
+        grid-column-start: 1;
+    }
 }
-.ec-list .ec-no-events {
-  text-align: center;
-  padding: 5em 0;
-}
-
-.ec-events {
-  margin: 0 6px 0 0;
+.ec-event {
+    display: flex;
+    position: relative;
+    padding: 2px;
+    color: var(--ec-event-text-color);
+    box-sizing: border-box;
+    box-shadow: 0 0 1px 0 var(--ec-border-color);
+    background-color: var(--ec-event-bg-color);
+    border-radius: 3px;
+    font-size: .85em;
+    line-height: 1.5;
+    z-index: 1;
+    pointer-events: all;
+    inline-size: calc(100% - var(--ec-event-col-gap));
+
+    .ec-time-grid & {
+        grid-row: 1;
+    }
+
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        block-size: fit-content;
+        margin-block-end: var(--ec-event-col-gap);
+    }
+
+    .ec-list & {
+        flex-direction: row;
+        padding: .5em 1.5em;
+        color: inherit;
+        background-color: var(--ec-day-bg-color);
+        border-radius: 0;
+    }
+
+    &.ec-preview {
+        z-index: 1000;
+        user-select: none;
+        opacity: .8;
+    }
+
+    &.ec-pointer {
+        color: inherit;
+        pointer-events: none;
+        user-select: none;
+        z-index: 0;
+        box-shadow: none;
+    }
 }
-.ec-time-grid .ec-events, .ec-events.ec-preview {
-  position: relative;
+.ec-bg-event {
+    grid-row: 1;
+    position: relative;
+    background-color: var(--ec-bg-event-color);
+    opacity: var(--ec-bg-event-opacity);
 }
-.ec-day-grid .ec-events, .ec-all-day .ec-events {
-  display: flow-root;
+.ec-draggable {
+    cursor: pointer;
+    user-select: none;
 }
-
-.ec-event {
-  display: flex;
-  padding: 2px;
-  color: var(--ec-event-text-color);
-  box-sizing: border-box;
-  box-shadow: 0 0 1px 0 var(--ec-border-color);
-  background-color: var(--ec-event-bg-color);
-  border-radius: 3px;
-  font-size: 0.85em;
-  line-height: 1.5;
-  z-index: 1;
-}
-.ec-day-grid .ec-event, .ec-all-day .ec-event {
-  position: relative;
-}
-.ec-list .ec-event {
-  flex-direction: row;
-  padding: 8px 14px;
-  color: inherit;
-  background-color: transparent;
-  border-radius: 0;
-}
-.ec-event.ec-preview {
-  position: absolute;
-  z-index: 1000;
-  width: 100%;
-  user-select: none;
-  opacity: 0.8;
-}
-.ec-event.ec-pointer {
-  color: inherit;
-  pointer-events: none;
-  user-select: none;
-  position: absolute;
-  z-index: 0;
-  box-shadow: none;
-  display: flex;
+.ec-ghost {
+    opacity: .5;
+    user-select: none;
+    pointer-events: none;
 }
-
 .ec-event-body {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.ec-day-grid .ec-event-body, .ec-all-day .ec-event-body, .ec-timeline .ec-event-body {
-  flex-direction: row;
-}
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
 
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        flex-direction: row;
+    }
+}
 .ec-event-tag {
-  width: 4px;
-  border-radius: 2px;
-  margin-right: 8px;
+    inline-size: 4px;
+    border-radius: 2px;
+    margin-inline-end: 8px;
 }
-
 .ec-event-time {
-  overflow: hidden;
-  white-space: nowrap;
-  margin: 0 0 1px 0;
-  flex-shrink: 0;
-  max-height: 100%;
-}
-.ec-day-grid .ec-event-time, .ec-timeline .ec-event-time {
-  margin: 0 3px 0 0;
-  max-width: 100%;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0 0 1px 0;
+    flex-shrink: 0;
+    max-block-size: 100%;
+
+    .ec-day-grid &,
+    .ec-timeline & {
+        margin: 0 3px 0 0;
+        max-inline-size: 100%;
+        text-overflow: ellipsis;
+    }
 }
-
 .ec-event-title {
-  overflow: hidden;
-  margin: unset;
-  font-weight: inherit;
-}
-.ec-day-grid .ec-event-title, .ec-all-day .ec-event-title, .ec-timeline .ec-event-title {
-  min-height: 1.5em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    margin: 0;
+    font-weight: inherit;
+
+    .ec-time-grid & {
+        position: sticky;
+        inset-block-start: var(--ec-header-height);
+    }
+
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        min-block-size: 1.5em;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: sticky;
+        inset-inline-start: calc(var(--ec-sidebar-width) + .18em);
+    }
+
+    .ec-list & {
+        font-size: 1rem;
+    }
 }
-.ec-list .ec-event-title {
-  font-size: 1rem;
-}
-
-.ec-draggable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.ec-ghost {
-  opacity: 0.5;
-  user-select: none;
-  pointer-events: none;
-}
-
-.ec-bg-events {
-  position: relative;
-}
-.ec-day-grid .ec-bg-events, .ec-all-day .ec-bg-events {
-  position: absolute;
-  inset: 0;
+.ec-resizer {
+    position: absolute;
+    user-select: none;
+
+    .ec-time-grid .ec-body & {
+        inset: auto 0 0 0;
+        block-size: 50%;
+        max-block-size: 8px;
+        cursor: ns-resize;
+
+        &.ec-start {
+            inset: 0 0 auto 0;
+        }
+    }
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        inset: 0 0 0 auto;
+        inline-size: 50%;
+        max-inline-size: 8px;
+        cursor: ew-resize;
+
+        &.ec-start {
+            inset: 0 auto 0 0;
+        }
+    }
 }
-
-.ec-bg-event {
-  position: absolute;
-  background-color: var(--ec-bg-event-color);
-  opacity: var(--ec-bg-event-opacity);
+.ec-dragging, .ec-dragging * {
+    cursor: pointer!important;
 }
-.ec-day-grid .ec-bg-event, .ec-all-day .ec-bg-event {
-  height: 100%;
-  z-index: auto;
+.ec-resizing-y, .ec-resizing-y * {
+    cursor: ns-resize!important;
 }
-
-.ec-time {
-  white-space: nowrap;
+.ec-resizing-x, .ec-resizing-x * {
+    cursor: ew-resize!important;
 }
-
-.ec-popup {
-  position: absolute;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  width: 110%;
-  min-width: 180px;
-  z-index: 1010;
-  padding: 8px 10px 14px;
-  background-color: var(--ec-popup-bg-color);
-  border: 1px solid var(--ec-border-color);
-  border-radius: 6px;
-  outline: 1px solid transparent;
-  box-shadow: 0 1px 3px 0 hsla(var(--ec-hs), 50%, 0.15), 0 4px 8px 3px hsla(var(--ec-hs), 50%, 0.15);
-}
-.ec-popup .ec-day-head {
-  text-align: left;
-  display: flex;
-  justify-content: space-between;
-}
-.ec-popup .ec-day-head a {
-  cursor: pointer;
-  font-size: 1.5em;
-  line-height: 0.8;
-}
-.ec-popup .ec-events {
-  margin: 0;
-  min-height: 0;
-  overflow: auto;
-}
-
-.ec-extra {
-  position: relative;
-  height: 100%;
-  overflow: hidden;
-  margin-left: -6.5px;
-  user-select: none;
+.ec-no-events {
+    text-align: center;
+    padding: 5em 0;
+    background-color: var(--ec-bg-color);
 }
-
 .ec-now-indicator {
-  position: absolute;
-  z-index: 1005;
-  pointer-events: none;
-}
-.ec-time-grid .ec-now-indicator {
-  width: 100%;
-  border-top: var(--ec-now-indicator-color) solid 2px;
-}
-.ec-timeline .ec-now-indicator {
-  border-left: var(--ec-now-indicator-color) solid 2px;
-  will-change: transform;
+    grid-row: 2;
+    position: relative;
+    pointer-events: none;
+    will-change: inset;
+
+    .ec-time-grid & {
+        inline-size: 100%;
+        block-size: 0;
+        border-block-start: var(--ec-now-indicator-color) solid 2px;
+    }
+
+    .ec-timeline & {
+        inline-size: 0;
+        border-inline-start: var(--ec-now-indicator-color) solid 2px;
+
+        &:before {
+            inset-block-start: calc(var(--ec-header-height) - 6.5px);
+            z-index: 2;
+        }
+    }
+
+    &:before {
+        background: var(--ec-now-indicator-color);
+        border-radius: 50%;
+        content: "";
+        display: block;
+        block-size: 12px;
+        inline-size: 12px;
+        margin: -7px 0 0 -7px;
+        position: sticky;
+        inset-inline-start: calc(var(--ec-sidebar-width) - 6.5px);
+        z-index: 1;
+    }
 }
-.ec-now-indicator:before {
-  background: var(--ec-now-indicator-color);
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-top: -7px;
-  width: 12px;
-}
-.ec-timeline .ec-now-indicator:before {
-  margin-left: -7px;
+.ec-popup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    block-size: max-content;
+    inline-size: 110%;
+    min-block-size: 6em;
+    min-inline-size: 10em;
+    padding: .375rem .75rem .75rem;
+    background-color: var(--ec-popup-bg-color);
+    border: 1px solid var(--ec-border-color);
+    border-radius: .25rem;
+    box-shadow: var(--ec-color-300) 0 10px 15px -3px, var(--ec-color-300) 0 4px 6px -4px;
+
+    .ec-day-head {
+        flex-direction: row;
+        padding-inline: 0;
+
+        a {
+            cursor: pointer;
+            font-size: 1.5em;
+            line-height: .8;
+        }
+    }
+
+    .ec-events {
+        --ec-event-col-gap: 0;
+        display: block;
+    }
 }
-
-.ec-resizer {
-  position: absolute;
-  user-select: none;
+.ec {
+    display: flex;
+    flex-direction: column;
+}
+.ec-main {
+    display: grid;
+    gap: 1px;
+    background-color: var(--ec-border-color);
+    border: 1px solid var(--ec-border-color);
+    overflow: auto;
+    /*scrollbar-width: thin;*/
+
+    .ec-time-grid & {
+        grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
+        grid-template-rows: repeat(2, max-content);
+    }
+
+    .ec-day-grid & {
+        --ec-row-height: auto;
+        grid-template-columns: repeat(var(--ec-grid-cols), minmax(0, 1fr));
+        grid-template-rows: max-content repeat(var(--ec-grid-rows), var(--ec-row-height));
+
+        &.ec-uniform {
+            --ec-row-height: minmax(0, 1fr);
+            overflow: hidden;
+            flex-grow: 1;
+        }
+    }
+
+    .ec-timeline & {
+        grid-template-columns: max-content repeat(var(--ec-grid-cols), min-content);
+        grid-template-rows: max-content repeat(calc(var(--ec-grid-rows) - 1), auto) minmax(auto, 1fr);
+        flex-grow: 1;
+    }
+
+    .ec-timeline.ec-month-view & {
+        grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
+    }
+
+    .ec-list & {
+
+    }
 }
-.ec-day-grid .ec-resizer, .ec-all-day .ec-resizer, .ec-timeline .ec-resizer {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 50%;
-  max-width: 8px;
-  cursor: ew-resize;
+.ec-header {
+    grid-area: 1 / 1 / 2 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    gap: 1px;
+    background-color: var(--ec-border-color);
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 2;
+    border-block-end: 1px solid var(--ec-border-color);
+    margin-block-end: -1px;
+}
+.ec-grid {
+    grid-area: 1 / 1 / -1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    gap: 1px;
+
+    .ec-body & {
+        grid-template-rows: subgrid;
+    }
+
+    .ec-time-grid &,
+    .ec-timeline & {
+        grid-column-start: 2;
+    }
 }
-.ec-day-grid .ec-resizer.ec-start, .ec-all-day .ec-resizer.ec-start, .ec-timeline .ec-resizer.ec-start {
-  right: auto;
-  left: 0;
+.ec-all-day {
+    grid-area: 2 / 1 / auto / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    min-block-size: var(--ec-slot-height);
+}
+.ec-col-group {
+    grid-column: span  var(--ec-col-group-span);
+}
+.ec-col-group,
+.ec-col-head {
+    text-align: center;
+    padding: .375rem .18em;
+    background-color: var(--ec-bg-color);
+    overflow: clip;
+    text-overflow: ellipsis;
+
+    &.ec-today {
+        background-color: var(--ec-today-bg-color);
+    }
+
+    &.ec-highlight {
+        background-color: var(--ec-highlight-color);
+    }
+}
+.ec-col-group > *,
+.ec-timeline .ec-col-head > * {
+    position: sticky;
+    inset-inline-start: calc(var(--ec-sidebar-width) + .18em);
 }
-
-.ec-dragging, .ec-dragging * {
-  cursor: pointer !important;
+.ec-body {
+    grid-area: 2 / 1 / -1 / -1;
+    display: grid;
+    grid-template: subgrid / subgrid;
 }
-
-.ec-resizing-y, .ec-resizing-y * {
-  cursor: ns-resize !important;
+.ec-hidden {
+    visibility: hidden;
 }
-
-.ec-resizing-x, .ec-resizing-x * {
-  cursor: ew-resize !important;
-}