.EventCard {
  border-radius: var(--radius-4);
  background-color: var(--event-background);
  position: relative;

  &[data-dragging],
  &[data-resizing] {
    opacity: 0.5;
  }

  &:hover .TimeGridEventResizeHandler {
    opacity: 1;
  }
}

.EventTitle {
  margin: 0;
  color: var(--event-primary-text);
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
}

.EventTime {
  color: var(--event-secondary-text);
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
}

.EventCard.Draggable {
  cursor: grab;
}

.EventCard.Recurrent {
  background: repeating-linear-gradient(
    -45deg,
    rgb(var(--event-color-4-rgb), 0.5) 0 12px,
    var(--event-color-3) 12px 22.5px
  );
  background-color: var(--event-color-3);
}

.EventCard--regular {
  position: absolute;
  left: calc(2px + ((100% - var(--space-3)) / var(--columns-count)) * (var(--first-index) - 1));
  right: calc(
    ((100% - var(--space-3)) * (var(--columns-count) - var(--last-index))) / var(--columns-count) +
      var(--space-1) + var(--space-3)
  );
  top: var(--y-position);
  bottom: calc(100% - var(--y-position) - var(--height));
  z-index: 2;
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-3);
}

.EventCard--regular.UnderHourEventCard {
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--event-secondary-text);
}

.UnderHourEventCard {
  margin: 0.5px 0;
}

.UnderHourEvent .EventTitle {
  margin-inline-end: var(--space-1);
  white-space: nowrap;
}

.Under30MinutesEvent {
  line-height: 0;
}

.Under30MinutesEvent .EventTitle {
  font-size: var(--font-size-1);
  line-height: 10px;
}

.Under30MinutesEvent .EventTime {
  font-size: 10px;
  line-height: 10px;
}

.EventCard:focus-visible {
  outline: 2px solid var(--event-color-5);
  outline-offset: var(--outline-focus-offset);
}

.EventCard[role='button'] {
  cursor: pointer;
}

.EventCard--regular::before {
  content: '';
  position: absolute;
  top: var(--space-2);
  left: 0;
  width: 3px;
  height: min(38px, calc(100% - calc(var(--space-2) * 2)));
  border-radius: var(--radius-1);
  background: var(--regular-line-bg);
  pointer-events: none;
}

.TimeGridEventResizeHandler {
  position: absolute;
  height: 4px;
  left: 0;
  right: 0;
  z-index: 3;
  cursor: ns-resize;
  opacity: 0;

  &[data-start] {
    top: 0;
  }

  &[data-end] {
    bottom: 0;
  }
}