@mixin styleEventLine($colorConst) {
    background-color: $colorConst !important;
    transition: box-shadow 250ms ease-out;
    &:hover,
    &[s-selected] {
        box-shadow: rgba($colorConst, 0.5) 0 0 0px 4px;
        transition: none;
        z-index: 2;
    }
}
@mixin styleEventLineExtended($colorConst) {
    background-color: $colorConst !important;
}

.c-events-tsv {
    $m: $interiorMargin;
    overflow: hidden;
    @include abs();

    &__container {
        // Holds event lines
        background-color: $colorPlotBg;
        position: absolute;
        top: $m; right: 0; bottom: $m; left: 0;
    }

    &__event-line {
        // Wraps an individual event line
        // Also holds the hover flyout element
        $c: $colorEventLine;
        $lineW: $eventLineW;
        $hitAreaW: 7px;
        $m: $interiorMarginSm;
        cursor: pointer;
        position: absolute;
        display: flex;
        top: $m; bottom: $m;
        width: $lineW;
        z-index: 1;

        @include styleEventLine($colorEventLine);
        &.is-event {
            &--purple {
                @include styleEventLine($colorEventPurpleLine);
            }
            &--red {
                @include styleEventLine($colorEventRedLine);
            }
            &--orange {
                @include styleEventLine($colorEventOrangeLine);
            }
            &--yellow {
                @include styleEventLine($colorEventYellowLine);
            }
        }

        &:before {
            // Extend hit area
            content: '';
            display: block;
            position: absolute;
            top: 0; bottom: 0;
            z-index: 0;
            width: $hitAreaW;
            transform: translateX(($hitAreaW - $lineW) * -0.5);
        }
    }
}

.c-events-canvas {
    pointer-events: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

// Extended event lines
.c-timeline__overlay-lines__extended-line-container {
    display: contents;
}

.c-timeline__event-line--extended {
    @include abs();
    width: $eventLineW;

    &.--hilite {
        opacity: 0.8;
        transition: none;
    }

    @include styleEventLineExtended($colorEventLine);
    &.is-event {
        &--purple {
            @include styleEventLineExtended($colorEventPurpleLine);
        }
        &--red {
            @include styleEventLineExtended($colorEventRedLine);
        }
        &--orange {
            @include styleEventLineExtended($colorEventOrangeLine);
        }
        &--yellow {
            @include styleEventLineExtended($colorEventYellowLine);
        }
    }
}

.c-events-tooltip {
    // Default to right of event line
    border-radius: 0 !important;
    //transform: translate(0, $interiorMargin);
}