.gantt-timeline {
  width: 100%;
  height: 64px;

  .days,
  .weeks,
  .months {
    height: 32px;
  }

  .days {
    &.is-background {
      background: url('../assets/checker32.png');
    }

    .day-week,
    .day-month {
      cursor: default;

      position: relative;

      display: inline-block;

      height: 32px;

      line-height: 32px;
      text-align: center;

      border-bottom: solid 1px #d9dfe2;

      div:not(.tooltip-line) {
        background: rgb(238 238 238 / 37%);
      }

      .tooltip-line {
        content: '';

        position: absolute;
        z-index: 1;
        right: 1px;

        width: 100%;
        height: 100%;
        min-height: 100vh;

        background-color: transparent;
      }
    }

    .day-week {
      &.active {
        .tooltip-line {
          content: '';

          position: absolute;
          z-index: 3;

          width: 3px;
          height: 100%;
          min-height: 100vh;
          margin-top: 32px;

          opacity: 0.8;
          background-color: #ff7f12;
        }
      }
    }

    .day-month {
      &.active {
        .tooltip-line {
          content: '';

          position: absolute;
          z-index: 3;
          transform: translate(-50%, 0);

          width: 3px;
          height: 100%;
          min-height: 100vh;

          opacity: 0.8;
          background-color: #ff7f12;
        }
      }
    }
  }

  .weeks {
    .week {
      display: inline-block;

      height: 32px;

      line-height: 32px;

      background: rgb(238 238 238 / 37%);
      border-bottom: 1px solid lightgray;

      .week-start-date {
        padding-left: 7px;
        font-size: 14px;
      }
    }
  }

  .months {
    text-align: center;

    .month {
      position: relative;

      display: inline-block;

      height: 32px;

      line-height: 32px;

      background: rgb(238 238 238 / 37%);
      border-bottom: 1px solid lightgray;

      .month-end-line {
        content: '';

        position: absolute;
        z-index: 1;
        right: 1px;

        width: 1px;
        height: 100%;
        min-height: calc(100vh + 32px);

        background-color: transparent;
        border-right: 1px solid lightgray;
      }

      .month-start-date {
        padding-left: 7px;
        font-size: 14px;
      }
    }
  }
}