.event-preview-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: light-dark(var(--color-white), var(--color-zinc-900));
  border-bottom: 1px solid
    light-dark(var(--color-gray-200), var(--color-zinc-800));

  &:hover {
    background-color: light-dark(var(--color-blue-50), var(--color-blue-950));
  }
}

.event-preview {
  display: flex;
  gap: 1ch;
  height: 7ch;
  padding: 1ch;
  word-wrap: break-word;
}

.event-preview__emoji {
  width: 2ch;
  flex-shrink: 0;
  text-align: center;
}

.event-preview__content {
  flex: 1;
  min-width: 0;
}

.event-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5ch;
}

.event-preview__title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary, inherit);
}

.event-preview__time {
  font-size: var(--text-sm);
  color: light-dark(var(--color-gray-400), var(--color-zinc-500));
  white-space: nowrap;
  flex-shrink: 0;
}

.event-preview__body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: light-dark(var(--color-gray-700), var(--color-zinc-400));
}

.event-detail {
  padding: 0;
}

.event-detail__meta {
  display: flex;
  justify-content: space-between;
  padding: 0 1ch;
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
  color: light-dark(var(--color-gray-500), var(--color-zinc-400));
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
}

.event-detail__body {
  margin: 0;
  padding: 2ch 1ch 2ch 1ch;
  background-color: light-dark(var(--color-white), var(--color-zinc-900));
  color: light-dark(var(--color-gray-950), var(--color-blue-50));
}

.event-properties__list {
  margin: 0;
  border-bottom: 1px solid var(--border-color);
}

.event-properties__title {
  margin: 0;
  padding: 0 1ch;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
  color: light-dark(var(--color-gray-500), var(--color-zinc-400));
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
}

.event-properties__item {
  padding: 1ch 1ch;
  background-color: light-dark(var(--color-white), var(--color-zinc-900));

  &:nth-child(even) {
    background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
  }
}

.event-properties__item-key {
  font-weight: 700;
}

.event-properties__item-value {
  margin: 0 0 0 1ch;
}

.event-preview--new-event {
  animation: newEventHighlight 3000ms ease-out forwards;
}

@keyframes newEventHighlight {
  from {
    background-color: light-dark(
      var(--color-yellow-100),
      var(--color-blue-800)
    );
  }
  to {
    background-color: transparent;
  }
}

.events__end-of-feed {
  height: 1px;
  background-color: light-dark(var(--color-gray-300), var(--color-zinc-700));
  margin-bottom: 12ch;
  font-style: italic;
  text-align: center;
  color: light-dark(var(--color-gray-400), var(--color-zinc-500));
}

.jump-bar {
  position: sticky;
  top: 4.5ch;
  z-index: 1;
  padding: 0 1ch;
  background-color: light-dark(var(--color-gray-50), var(--color-black));
  color: light-dark(var(--color-blue-700), var(--color-blue-400));
  border-top: 1px solid light-dark(var(--color-gray-300), var(--color-blue-400));
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 -1px 4px light-dark(var(--color-gray-400), transparent);

  cursor: pointer;

  &:hover {
    background-color: light-dark(var(--color-blue-50), var(--color-blue-950));
    border-color: light-dark(var(--color-blue-800), var(--color-blue-300));
  }

  &:active {
    background-color: light-dark(var(--color-blue-100), var(--color-blue-900));
    border-color: light-dark(var(--color-blue-900), var(--color-blue-200));
    outline: 3px solid light-dark(var(--color-blue-200), var(--color-blue-800));
  }

  &:focus {
    outline: 3px solid light-dark(var(--color-blue-200), var(--color-blue-800));
    border-color: light-dark(var(--color-blue-800), var(--color-blue-300));
  }
}

.day-delimiter {
  color: light-dark(var(--color-gray-500), var(--color-zinc-500));
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
  border-bottom: 1px solid
    light-dark(var(--color-gray-200), var(--color-zinc-950));
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: lowercase;
  text-align: center;
}

.day-delimiter__label {
  white-space: nowrap;
}

.seen-delimiter {
  height: 1px;
  background: light-dark(var(--color-red-600), var(--color-red-400));
}