//* WeekView
//================================================== *

$week-view-cell-height: 25px;

.week-view {
  background-color: $calendar-bg-color;
  border: 1px solid $calendar-line-color;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;

  &.is-borderless {
    border: none;
  }

  .week-view-header {
    background-color: $calendar-bg-color;
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;

    .calendar-toolbar {
      background-color: $calendar-bg-color;
    }
  }

  th.week-view-header-cell {
    background-clip: padding-box;
    border-top: 0;
    font-size: $ids-size-font-md;
    height: 2.4rem;
    line-height: 2.4rem;
    text-align: left;
    z-index: 3;
  }

  // Style todays date
  .week-view-header-wrapper.is-today {
    color: $ids-color-brand-primary-base;
    font-weight: $ids-number-font-weight-bold;
  }

  // Times on the right
  .week-view-header-wrapper {
    padding: 4px 5px 0 4px;
    border-bottom: 4px solid transparent;

    .week-view-header-day-of-week {
      display: block;
      line-height: 2.5rem;
      text-align: center;

      &.is-emphasis {
        font-size: 2rem;
      }
    }
  }

  // All day section
  .week-view-all-day-wrapper {
    border-top: 1px solid $calendar-line-color;
    height: 44px;
    position: relative;

    &.is-disabled {
      background-color: $calendar-disabled-bg-color;
      opacity: 0.5;
    }

    .calendar-event {
      height: 20px;
      top: 1px;

      .calendar-event-content {
        line-height: normal;
        white-space: nowrap;
      }

      &.calendar-event-start {
        border-radius: 3px 0 0 3px;
      }

      &.calendar-event-continue {
        border-left: 0;
        border-radius: 0;
        left: -1px;
        width: calc(100% + 1px);

        .calendar-event-icon {
          display: none;
        }

        .calendar-event-title {
          color: transparent;
        }
      }

      &.calendar-event-ends {
        border-left: 0;
        border-radius: 0 3px 3px 0;
        color: transparent;
        left: -1px;
        width: calc(100% + 1px);

        .calendar-event-icon {
          display: none;
        }

        .calendar-event-title {
          color: transparent;
        }
      }
    }
  }

  th:nth-child(1) .week-view-all-day-wrapper {
    border-top-color: transparent;
    padding: 5px;
  }

  .week-view-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;

    .week-view-allday-row {
      height: 4rem;
    }

    .week-view-hour-row,
    .week-view-half-hour-row {
      height: 2.5rem;
    }

    // Borders
    th,
    td {
      border-bottom: 1px solid $calendar-line-color;
      border-right: 1px solid $calendar-line-color;
      height: $week-view-cell-height;
    }

    th.week-view-header-cell {
      .week-view-header-wrapper.is-today {
        height: calc(100% - 49px);
        min-height: 58px;

        span.week-view-header-day-of-week.is-emphasis {
          background-color: $calendar-current-day-bg-color;
          width: 30px;
          height: 30px;
          border-radius: 15px;
          line-height: 1.5;
          color: $ids-color-palette-white;
          margin: 0 auto;
        }
      }
    }

    td {
      &.is-selected {
        background-color: $calendar-selected-bg-color;
      }

      &:focus {
        -webkit-box-shadow: inset 0 0 0 1px $calendar-selected-border-color;
        -moz-box-shadow: inset 0 0 0 1px $calendar-selected-border-color;
        box-shadow: inset 0 0 0 1px $calendar-selected-border-color;
        outline: 0;
      }

      &:hover {
        background-color: $calendar-hover-bg-color;
      }
    }

    // Legend Row with times
    th:nth-child(1) {
      font-size: $ids-size-font-xs;
      width: 60px;
    }

    // First column padding
    tr td:nth-child(1) {
      font-size: $ids-size-font-xs;

      .week-view-cell-wrapper {
        padding: 0 5px;
      }
    }

    // Alternate row style
    tr:nth-child(odd) td:not(.is-focused) {
      border-bottom: 1px solid $calendar-line-color-light;
    }
  }

  // Header Section Container with All Day events
  .week-view-container {
    background-color: $calendar-bg-color;
    flex-shrink: 0;

    th {
      background-color: $calendar-bg-color;
      position: -webkit-sticky;
      position: sticky;
      top: 50px;
    }

    .week-view-allday-row th {
      top: 25px;
    }
  }

  &.toolbar-hidden {
    .week-view-container .week-view-header-cell {
      top: 0;
    }

    &.is-borderless .week-view-container .week-view-header-cell {
      border-top: 1px solid $calendar-line-color;
    }
  }

  .week-view-cell-wrapper {
    height: $week-view-cell-height;
    min-width: 50px;
    padding: 0;
    position: relative;

    &.is-disabled {
      background-color: $calendar-disabled-bg-color;
      opacity: 0.5;
    }
  }

  // Moving time marker
  .week-view-time-marker {
    border: 1px solid $ids-color-brand-primary-base;
    display: block;
    height: 1px;
    margin-top: -2px;
    position: relative;
    top: -5px;
    width: 100%;
    z-index: 2;
  }

  // Adjust the calendar events
  .calendar-event {
    bottom: 0;
    height: $week-view-cell-height + 1;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
    width: 100%;
    z-index: 1;

    &.reduced-padding .calendar-event-content {
      padding: 0 5px;
    }

    &.is-cutoff {
      border-radius: 3px 3px 0 0;
    }

    .calendar-event-content {
      white-space: initial;
    }

    &.is-ellipsis .calendar-event-content {
      white-space: nowrap;
    }
  }

  // Adjust the day Version
  &.is-day-view {
    th.week-view-header-cell {
      .week-view-header-wrapper.is-today {
        span.week-view-header-day-of-week.is-emphasis {
          width: 25px;
          height: 25px;
          border-radius: 15px;
          line-height: 1.5;
          color: $ids-color-palette-white;
          margin: 0 auto;
          margin-bottom: 2px;
          font-size: 1.6rem;
          text-indent: 1px;
        }

        span.week-view-header-day-of-week {
          color: $calendar-current-day-bg-color;
        }
      }
    }
  }
}

.week-view.stacked-view {
  overflow: hidden;

  .week-view-container {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    overflow: auto;
    height: 100%;
  }

  .week-view-stacked-header,
  .week-view-stacked-body,
  .week-view-stacked-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: $calendar-bg-color;
  }

  .week-view-header-cell,
  .week-view-body-cell {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;

    &:not(:last-child) {
      border-inline-end: 1px solid $calendar-line-color;
    }
  }

  .week-view-stacked-header {
    position: sticky;
    align-self: flex-start;
    top: 0;
    width: 100%;
    border-bottom: 1px solid $calendar-line-color;
    z-index: 2;
  }

  .week-view-stacked-body {
    flex-grow: 1;

    .week-view-body-cell {
      padding: 0 2px;
    }

    // Stacked Calendar Events
    .calendar-event {
      display: block;
      position: relative;
      margin-block: 4px;
      min-height: 52px;
      height: unset;
    }
  }

  .week-view-stacked-footer {
    position: sticky;
    bottom: 0;
    min-height: 24px;
    border-top: 1px solid $calendar-line-color;
    z-index: 2;

    .week-view-footer-cell {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
}

html[dir='rtl'] {
  .week-view {
    .week-view-table-header th {
      text-align: right;
    }

    .calendar-event .calendar-event-content {
      text-align: right;
    }
  }

  .week-view .week-view-all-day-wrapper .calendar-event.calendar-event-start {
    border-radius: 3px;
  }
}