// Variables for colors and sizes
$border-color: #ddd;
$event-bg-color: #265573, #a7e4f2, #f2811d, #f24607, #a62508;
$event-border-color: darken(nth($event-bg-color,1),20%);
$event-border-width: 1px;
$event-color: #fff, #000, #fff, #fff, #fff;
$hour-line-color: #999;
$column-line-color: #e9e9e9;
$time-color: #666;
$text-color: #333;
$header-bg-color: #f2f2f2;
$slot-height: 6rem;
$animation-duration: .25s;
$row-amount: 96;

@mixin animate-zoom {
  transition: height $animation-duration ease-in-out, line-height $animation-duration ease-in-out, grid-template-rows $animation-duration ease-in-out;
}

:root {
  --slot-height: #{$slot-height};
}

.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: var(--slot-height);
    position: relative;
    padding-inline-end: 8px;
    text-align: right;
    @include animate-zoom;

    &: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: var(--slot-height);
      @include animate-zoom;

      &: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-columns {
      display: flex;
      align-items: flex-start;
    }

    .daily-grid-column {
      flex: 1 0 0;
      grid-column-gap: 3px;
      z-index: 2;
      position: relative;
      padding: 0 10px;
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: repeat($row-amount, calc(var(--slot-height) / (#{$row-amount} / 24)));
      @include animate-zoom;

      &:nth-child(even) {
        background-color: #f7f7f7;
      }

      .cell-placeholder {
        line-height: calc(var(--slot-height) / 4);
        @include animate-zoom;
        z-index: 1;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #f0f0f0;
        border: #e0e0e0 $event-border-width solid;
        padding: 3px;
        color: #555;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        cursor: pointer;

        &:hover {
          opacity: .8;
        }
      }

      .event-cell {
        line-height: calc(var(--slot-height) / 4);
        @include animate-zoom;
        z-index: 3;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: nth($event-bg-color, 1);
        border: darken(nth($event-bg-color,1),20%) $event-border-width solid;
        padding: 3px;
        color: nth($event-color, 1);
        font-size: 12px;
        //display: flex;
      }
      .event-title {
        margin: -3px -3px 5px;
        padding: 0 3px;
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        /*&:after {
          content: ",";
          margin-inline-end: 4px;
        }*/
      }

      @for $i from 1 through length($event-bg-color) {
        &:nth-child(#{length($event-bg-color)}n+#{$i}) .event-cell {
          background: lighten(nth($event-bg-color, $i), 15%);
          border-color: darken(nth($event-bg-color,$i),20%);
          color: nth($event-color,$i);

          .event-title {
            background: nth($event-bg-color, $i);

          }
        }
      }
    }
  }
}