$event-marker-line-width: 1px;
$event-marker-triangle: 8px;
$event-marker-triangle-offset: 6px;
$event-marker-line-shadow: 1px;
$event-marker-z-index: 2;

.event-marker--line {
  position: absolute;
  height: 100%;
  width: $event-marker-line-width;
  top: 0px;
  opacity: 0.5;
  z-index: $event-marker-z-index;

  // Psuedo elements
  &:after,
  &:before {
    content: '';
    position: absolute;
    left: 0;
    height: calc(100% + #{$event-marker-triangle-offset});
    bottom: 0;
  }

  // Visible Line
  &:after {
    left: 0;
    z-index: $event-marker-z-index + 1;
    width: $event-marker-line-width;
  }

  // Shadow
  &:before {
    width: $event-marker-line-width + ($event-marker-line-shadow * 2);
    background-color: rgba($g0-obsidian, 0.8);
    opacity: 0;
    z-index: $event-marker-z-index;
    left: -$event-marker-line-shadow;
  }

  &:hover,
  &:hover:before {
    opacity: 1;
  }
}

.event-marker--line-rect {
  width: 4px;
  border-radius: 2px 2px 0 0;
  height: 20px;
  color: white;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%) rotate(360deg);
  z-index: $event-marker-z-index + 1;
}

// Color Variations
@mixin eventMarkerColorizer($color) {
  @extend .event-marker--line;

  &:after,
  .event-marker--line-rect {
    background-color: $color;
  }
}

.event-marker--line__crit {
  @include eventMarkerColorizer($c-fire);
}

.event-marker--line__warn {
  @include eventMarkerColorizer($c-thunder);
}

.event-marker--line__ok {
  @include eventMarkerColorizer($c-viridian);
}

.event-marker--line__info {
  @include eventMarkerColorizer($c-ocean);
}

.event-marker--line__unknown {
  @include eventMarkerColorizer($c-amethyst);
}
.event-marker--vis-selector {
  position: absolute;
  cursor: default;
  right: -30px;
  bottom: -$event-marker-height*2.1;
  font-size: $ix-text-base;
}

.event-marker--vis-icon {
  margin: $ix-marg-a;
  font-weight: bold;
  font-size: $event-marker-height;
}
