time-spanner {
  display: block;
  user-select: none;

  & > svg {
    border: 1px var(--global-theme-color-light, #3fbeb4) solid;
    box-shadow: none;
    width: 100%;
  }

  .specified-time-line {
    pointer-events: none;
  }

  .brush {
    .extent {
      fill: #A7DEEE;
      fill-opacity: .5;
      shape-rendering: crispEdges;
      stroke-width: 0;
    }

    .resize {
      rect {
        fill: var(--global-theme-color-light, #00C8C1);
      }

      line {
        shape-rendering: crispEdges;
        stroke-width: 1px;
        stroke: white;
      }

      text {
        font-size: .9em;
        dominant-baseline: middle;
        pointer-events: none;

        tspan {
          fill: #808080;
        }
      }

      &.w text {
        transform: translate(12px, -.5em);
      }

      &.e text {
        transform: translate(-74px, -.5em);
      }

      .resize text .date {
        font-size: .82em;
      }
    }

    &.text-hidden {
      .resize.w text {
        transform: translate(-74px, -.5em);
      }

      .resize.e text {
        transform: translate(12px, -.5em);
      }
    }
  }

  &[color-type=moon] {
    g {
      rect:nth-child(2) {
        fill: rgba(0,200,193,0.15);
      }
    }

    tspan {
      fill: rgba(255,255,255, .6);
    }
  }
}