:root {
  --event-border-radius: 6px;
}

event {
  background-color: color-mix(in srgb, var(--event-bg-color) 25%, var(--view-bg-color));
  border-radius: var(--event-border-radius);
  color: var(--view-fg-color);
  font-size: 0.9rem;
  outline: 0 solid transparent;
  outline-offset: 5px;
  transition: var(--focus-ring-transition);
}

event:focus:focus-visible {
  outline-color: rgb(from var(--accent-color) r g b / var(--dim-opacity));
  outline-offset: 0;
  outline-width: 2px;
}

event.slanted {
  border-radius: 0 0 0 0;
}

event.slanted-start,
event.slanted-end:dir(rtl) {
  border-radius: 0 var(--event-border-radius) var(--event-border-radius) 0;
}

event.slanted-end,
event.slanted-start:dir(rtl) {
  border-radius: var(--event-border-radius) 0 0 var(--event-border-radius);
}

event widget.content {
  margin: 4px;
}

event widget.edge {
  background-color: var(--event-bg-color);
  min-width: 6px;
}

event.slanted widget.edge,
event.slanted-start widget.edge {
  background-color: transparent;
}

weekgrid event {
  margin: 1px;
}

calendar-view.month-view event {
  margin: 0 1px 0 1px;
}