@use 'sass:math';

.c-timesystem-axis {
  $h: 30px;
  height: $h;

  svg {
    $lineC: $colorInteriorBorder; //rgba($colorBodyFg, 0.3) !important;
    text-rendering: geometricPrecision;
    width: 100%;
    height: 100%;

    .domain {
      stroke: $lineC;
    }

    .tick {
      line {
        stroke: $lineC;
      }

      text {
        // Tick labels
        fill: $colorBodyFg;
        paint-order: stroke;
        font-weight: bold;
      }
    }
  }

  &__mb-line {
    $c: $colorTimeRealtimeBtnBgMajor;
    $w: 13px;
    $wHalf: math.floor(math.div($w, 2));
    //$h: 5px;
    //$hHalf: math.floor(math.div($h, 2));
    $transform: translateX(($wHalf - 1) * -1);

    border-right: 2px dashed $c;
    pointer-events: none;
    width: 1px;
    position: absolute;
    z-index: 10;

    &:before,
    &:after {
      //background: $c;
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      transform: $transform;
      border-left: $wHalf solid transparent;
      border-right: $wHalf solid transparent;
      border-top: $wHalf solid $c;
    }

    &:after {
      bottom: 0;
      transform: $transform rotate(180deg);
    }

    &.hidden {
      display: none;
    }

  }
}
