// Variables for colors and sizes
$border-color: #ddd;
$event-bg-color: #007bff;
$event-border-color: darken($event-bg-color,20%);
$event-border-width: 1px;
$event-color: #fff;
$hour-line-color: #999;
$time-color: #666;
$text-color: #333;
$header-bg-color: #f2f2f2;
$slot-height: 3rem;
$cell-amount: 48;

.vr-daily-schedule {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: stretch;
  flex: 1 1 auto;

  .daily-timeline-container {
    height: auto;
    overflow-y: hidden;
    flex: none;
    display: flex;
    align-items: flex-start;
    min-width: 40px;
  }

  .daily-timeline {
    position: relative;
    background-color: #fff;
    box-sizing: border-box;
    margin-left: auto;
  }

  .daily-timeline-label-container {
    height: $slot-height;
    position: relative;
    padding-inline-end: 8px;
    text-align: right;

    &:first-child {
      .daily-timeline-label {
        display: none;
      }
    }
  }

  .daily-timeline-label {
    display: block;
    color: #70757a;
    font-size: 10px;
    position: relative;
    top: -6px;
  }

  .daily-grid-container {
    flex: 1 1 0;
    overflow-x: auto;
    overflow-y: scroll;
    display: flex;
    align-items: flex-start;
  }

  .daily-grid {
    border-bottom: $hour-line-color 1px solid;
    position: relative;
    min-width: 100%;
    flex: none;
    display: inline-flex;
    vertical-align: top;

    .line {
      height: $slot-height;

      &:after {
        content: "";
        border-bottom: $hour-line-color 1px solid;
        position: absolute;
        width: 100%;
        margin-top: -1px;
        z-index: 3;
        pointer-events: none;
        opacity: .5;
      }
    }
  }

  .daily-grid-cells-container {
    position: relative;
    padding: 0 12px;
    box-sizing: border-box;
    flex: 1 0 auto;
    width: 129px;
    min-width: 129px;
    border-right: white 1px solid;
    overflow: visible;

    .daily-grid-cells {
      grid-column-gap: 3px;
      z-index: 2;
      position: relative;
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: repeat($cell-amount, #{$slot-height / ($cell-amount / 24)});

      .event-cell {
        line-height: $slot-height / 4;
        z-index: 2;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: $event-bg-color;
        border: $event-border-color $event-border-width solid;
        padding: 3px;
        color: $event-color;
        font-size: 12px;
        display: flex;
      }
      .event-title {
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        &:after {
          content: ",";
          margin-inline-end: 4px;
        }
      }
    }
  }
}