@import '../../../../styles/colors.css';

.EventItemTitle {
  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);
}

.EventItemTime {
  display: inline-block;
  color: var(--event-secondary-text);
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  white-space: nowrap;
  width: 150px;
}

.EventItemTime--compact {
  width: fit-content;
  margin-inline-end: var(--space-1);
}

.EventCard--compact {
  container-type: inline-size;
  border-radius: var(--radius-3);
  background-color: var(--event-background);
  cursor: pointer;
  height: fit-content;
}

.EventItemCardContent {
  margin: 0;
  height: var(--line-height-1);
  line-height: var(--line-height-1);
}

.EventItemCardWrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}
.EventItemCardWrapper--compact,
.EventItemCardWrapper--allDay {
  padding: 0 var(--space-1);
}

.EventItemCard.EventCard {
  padding: 0;
  border-radius: var(--radius-3);
}

.EventItemCard--compact,
.EventItemCard--allDay {
  padding: 0;
  border-radius: var(--radius-3);
}

.EventItemCard--compact:active,
.EventItemCard--regular:active {
  background-color: var(--interactive-active-bg);
}

.EventItemCard--compact:hover,
.EventItemCard--regular:hover {
  background-color: var(--interactive-hover-bg);
}

.EventItemCard--allDay {
  --event-background: var(--allDay-accepted-bg);
  color: var(--allDay-accepted-primary-text);
}