@import "../../../styles/variables.scss";

:host {
  ::ng-deep .cal-day-view,
  ::ng-deep .cal-week-view {
    .cal-hour-rows {
      width: 100%;
      border: solid 1px #e1e1e1;
      overflow-x: scroll;
      position: relative;
    }

    .cal-hour:nth-child(even) {
      background-color: $off-white;
    }
    .cal-hour:nth-child(odd) {
      background-color: $white;
    }

    .cal-hour-segment {
      height: 30px;
    }

    .cal-hour-segment::after {
      content: "\00a0";
    }

    .cal-hour:not(:last-child) .cal-hour-segment,
    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
      border-bottom: thin dashed #e1e1e1;
    }

    .cal-time {
      font-weight: bold;
      padding-top: 5px;
      width: 70px;
      text-align: center;
      color: $grey;
    }

    .cal-hour-segment.cal-after-hour-start {
      .cal-time {
        display: none;
      }
    }

    .cal-hour-segment:hover,
    .cal-drag-over .cal-hour-segment {
      background-color: #ededed;
    }
  }
}