libs/barista-components/timeline-chart/src/timeline-chart.scss
@use 'sass:math';
@import '../../core/src/style/variables';

$dt-timeline-chart-tick-color: $gray-300;
$dt-timeline-chart-bar-1-color: $blue-300;
$dt-timeline-chart-timing-marker-color: $gray-640;
$dt-timeline-chart-key-timing-marker-color: $blue-500;
$dt-timeline-chart-marker-bubble-size: 16px;
$dt-timeline-chart-marker-stroke-width-size: 2px;

:host {
  display: block;
}

.dt-timeline-chart-wrapper {
  padding-top: 28px;
  padding-bottom: 28px;
}

.dt-timeline-chart-bar-container {
  display: flex;
  width: 100%;
  border-top: 1px solid $dt-timeline-chart-tick-color;
  border-bottom: 1px solid $dt-timeline-chart-tick-color;
  height: 46px;
  padding-top: 17px;
}

.dt-timeline-chart-bar {
  display: block;
  height: 12px;
  position: relative;
  z-index: 1;
  background: $dt-timeline-chart-bar-1-color;
}

.dt-timeline-chart-tick-container {
  display: block;
  position: relative;
  z-index: 0;
}

.dt-timeline-chart-tick {
  display: block;
  position: absolute;
  height: 62px;
  bottom: 0;
  z-index: 0;
  font-size: 12px;
  padding-left: 4px;
  &::before {
    display: block;
    content: '';
    width: 2px;
    height: 50px;
    background: $dt-timeline-chart-tick-color;
    bottom: 0;
    left: 0;
    position: absolute;
  }
}

.dt-timeline-chart-timing-marker-container {
  display: block;
  position: relative;
  z-index: 0;
}

.dt-timeline-chart-timing-marker {
  display: block;
  position: absolute;
  width: $dt-timeline-chart-marker-stroke-width-size;
  height: 58px + $dt-timeline-chart-marker-bubble-size;
  background: $dt-timeline-chart-timing-marker-color;
}

.dt-timeline-chart-legend-symbol,
.dt-timeline-chart-timing-marker-bubble,
.dt-timeline-chart-key-timing-marker-bubble {
  display: block;
  width: $dt-timeline-chart-marker-bubble-size;
  height: $dt-timeline-chart-marker-bubble-size;
  border-radius: 50%;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  line-height: $dt-timeline-chart-marker-bubble-size;
  text-align: center;
  cursor: default;
}

.dt-timeline-chart-legend-symbol,
.dt-timeline-chart-timing-marker-bubble {
  background: $dt-timeline-chart-timing-marker-color;
}

.dt-timeline-chart-timing-marker-bubble {
  position: absolute;
  bottom: 0;
  left: math.div($dt-timeline-chart-marker-bubble-size, -2) +
    math.div($dt-timeline-chart-marker-stroke-width-size, 2);
}

.dt-timeline-chart-key-timing-marker-container {
  display: block;
  position: relative;
  z-index: 1;
}

.dt-timeline-chart-key-timing-marker {
  display: block;
  position: absolute;
  width: 0;
  height: 62px + $dt-timeline-chart-marker-bubble-size;
  bottom: 0;
  border-left: $dt-timeline-chart-marker-stroke-width-size dashed
    $dt-timeline-chart-key-timing-marker-color;
}

.dt-timeline-chart-key-timing-marker-bubble {
  background: $dt-timeline-chart-key-timing-marker-color;
  position: absolute;
  top: 0;
  left: math.div($dt-timeline-chart-marker-bubble-size, -2) -
    math.div($dt-timeline-chart-marker-stroke-width-size, 2);
}

.dt-timeline-chart-key-timing-marker-label {
  display: block;
  position: absolute;
  top: -2px;
  left: 12px;
  font-size: 12px;
  white-space: nowrap;
  color: $dt-timeline-chart-key-timing-marker-color;
}

.dt-timeline-chart-key-timing-marker-label-left
  .dt-timeline-chart-key-timing-marker-label {
  left: auto;
  right: 12px;
}

.dt-timeline-chart-legend {
  margin-top: 20px;
}

::ng-deep .dt-timeline-chart-overlay-panel {
  display: block;
  max-width: 300px;
}

::ng-deep .dt-timeline-chart-overlay-title {
  display: block;
  font-weight: bold;
}

::ng-deep .dt-timeline-chart-overlay-text {
  display: block;
}
