/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.timelineRuler {
  height: var(--timeline-ruler-height);
}

.timelineRulerContainer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  overflow: hidden;
  height: 20px;
  padding: 0;
  margin: 0;
  color: var(--grey-50);
  cursor: default;
  font-size: 9px;
  line-height: 20px;
  list-style: none;
  user-select: none;
}

/**
 * The notch is a 1px wide span with a gradient. It has a text numeric label that is
 * then overflows to the left of the line.
 */
.timelineRulerNotch {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 1px;
  margin-left: -1px;
  background: linear-gradient(
    transparent,
    var(--grey-30) 19px,
    var(--grey-30) 20px,
    #d7d7db66 0
  );
  text-align: right;
  white-space: nowrap;
}

.timelineRulerNotchText {
  position: absolute;
  right: 0;
  padding-right: 5px;
}

@media (forced-colors: active) {
  /* The background gradient we use to display the notch are not visible in HCM.
     We need to use a plain color. */
  .timelineRulerNotch {
    background-color: CanvasText;
  }

  /* With the background-color, the span text get CanvasText backplating, which
     makes the text disappear. Opt-out of forced-colors to remove the backplating */
  .timelineRulerNotchText {
    color: CanvasText;
    forced-color-adjust: none;
  }
}
