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

event {
    margin: 1px;
    font-size: 0.9rem;
    background-color: var(--event-bg-color);
}

event.timed {
  background-color: color-mix(in srgb, var(--event-bg-color) 17%, transparent);
}

event widget.content {
    margin: 4px;
}

event.timed widget.edge {
  background-color: var(--event-bg-color);
}

event.timed,
event:not(.slanted):not(.slanted-start):not(.slanted-end) {
    border-radius: var(--event-border-radius);
}

event.timed widget.edge {
    border-radius: var(--event-border-radius);
    min-width: 5px;
}

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

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

event:not(.timed).color-dark {
    /* Keep in symc with the dark style's event.timed colors */
    color: @light_1;
    outline-color: rgba(0, 0, 0, 0.3);
}

event.timed,
event:not(.timed).color-light {
    color: alpha(@dark_5, 0.8);
    outline-color: rgba(255, 255, 255, 0.5);
}

event.slanted {
  background-color: transparent;
  background-image: linear-gradient(100deg, /* left edge */
                                    transparent 5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px),
                    linear-gradient(280deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
  background-size: 50% 100%, 50% 100%, 50% 100%, 50% 100%;
  background-position: left bottom, right bottom, left bottom, right bottom;
  background-repeat: no-repeat;
  background-origin: padding-box, padding-box, border-box, border-box;
  background-clip: padding-box, padding-box, border-box, border-box;
}

event.slanted:backdrop {
  background-image: linear-gradient(100deg, /* left edge */
                                    transparent 5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color) 17px),
                    linear-gradient(280deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}

event.slanted:dir(rtl) {
  background-image: linear-gradient(80deg, /* left edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color) 9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px),
                    linear-gradient(260deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}

event.slanted:dir(rtl):backdrop {
  background-image: linear-gradient(80deg, /* left edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px),
                    linear-gradient(260deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}

event.slanted-start {
  background-color: transparent;
  background-image: linear-gradient(100deg, /* left edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color) 9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
  background-position: left bottom, left bottom;
  background-size: 100% 100%, 100% 100%;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

event.slanted-start:backdrop {
  background-image: linear-gradient(100deg, /* left edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}

event.slanted-start:dir(rtl) {
  background-image: linear-gradient(260deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color) 17px);
  background-position: right bottom, right bottom;
}

event.slanted-start:dir(rtl):backdrop {
  background-image: linear-gradient(260deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}

event.slanted-end {
  background-color: transparent;
  background-image: linear-gradient(280deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
  background-position: right bottom, right bottom;
  background-size: 100% 100%, 100% 100%;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

event.slanted-end:backdrop {
  background-image: linear-gradient(280deg, /* right edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}

event.slanted-end:dir(rtl) {
  background-image: linear-gradient(80deg, /* left edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
  background-position: left bottom, left bottom;
}

event.slanted-end:dir(rtl):backdrop {
  background-image: linear-gradient(80deg, /* left edge */
                                    transparent  5px,
                                    var(--event-bg-color) 6px,
                                    var(--event-bg-color)	9px,
                                    transparent 10px,
                                    transparent 16px,
                                    var(--event-bg-color)	17px);
}