$d3-scrollable-color: rgba(0, 0, 0, 0.8) !default;

.d3-scrollable-timeline {
  display: block;

  svg {
    transition: height 0.7s ease;

    .axis text {
      font: 12px sans-serif;
      fill: $d3-scrollable-color;
    }

    .ticks text,
    .ticks path,
    .axis path {
      display: none;
    }

    .ticks,
    .axis {
      text {
        user-select: none;
      }

      line {
        fill: none;
        stroke: $d3-scrollable-color;
        shape-rendering: crispEdges;
        stroke-width: 1px;
      }
    }

    .center {
      fill: none;
      stroke: $d3-scrollable-color;
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }

    .category {
      .line,
      .indicator {
        fill: none;
        stroke: transparentize($d3-scrollable-color, 0.3);
        shape-rendering: crispEdges;
        stroke-width: 2px;
      }

      .indicator {
        stroke-width: 4px;
        stroke: $d3-scrollable-color;
        transition: all 0.2s ease;
      }

      .label {
        font: 12px sans-serif;
        fill: $d3-scrollable-color;
      }
    }

    .category,
    .ticks,
    .axis {
      transition: all 0.2s ease;
    }
  }
}