.calendar__view {
  /* Default is horizontal view */
  display: flex;
  position: relative;
  flex-direction: row;
  gap: 0;

  &.calendar__view--vert {
    flex-direction: column;
  }

  .calendar__events-section {
    width: 100%;

    header.calendar__events-section-header {
      align-items: center;
      display: flex;
      justify-content: flex-start;
      white-space: nowrap;
    }
  }

  ul.list#shift-bookings-list {
    max-height: 100vh;
  }

  ul.list#shift-bookings-list, ul.list#preview-shift-bookings-list {
    container-type: inline-size;
    container-name: shift-bookings-list;
    padding: 0.25rem;

    .card.card--shift-booking {
      flex-direction: row;

      .card__datetime {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: center;
        max-width: 12rem;
        min-width: 12rem;

        .date-display {
          flex-direction: row;
        }

        .datetime__info {
          flex-wrap: wrap;
          justify-content: center;
        }
      }

      .card__details {
        display: flex;
        border-left: 1px solid var(--light-gray);
        flex: 1;
        flex-direction: column;
        gap: 0.5rem;
        min-width: var(--container-s);
        padding-left: calc(1rem - 1px);
        position: relative;

        .card__label {
          --card-label-color: var(--theme-color-darker);
          --card-label-after-size: 2px;
          height: 2rem;
          position: relative;
          top: calc(0.5rem * -1); /* Card top padding + border */
          width: fit-content;
          z-index: 1;

          &::after {
            border-bottom: calc(var(--card-label-after-size) * 2) solid var(--card-label-color);
            border-left: var(--card-label-after-size) solid transparent;
            border-right: var(--card-label-after-size) solid transparent;
            content: '';
            height: var(--card-label-after-size);
            left: 50%;
            position: absolute;
            top: calc((var(--card-label-after-size) * 2) * -1);
            transform: translateX(-50%);
            width: calc(100% + (var(--card-label-after-size) * 2));
            z-index: 0; /* Must be less than .card__label */
          }

          & > span {
            background-color: color-mix(in srgb, var(--card-label-color), white 90%);
            border: 1px solid var(--card-label-color);
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            display: inline-block;
            color: var(--card-label-color);
            font-weight: bold;
            font-size: 0.875rem;
            margin-bottom: calc((0.5rem + 0px) * -1);
            padding: calc(0.5rem - 2px) calc(1rem - 1px) calc(0.5rem - 1px);
            position: relative;
            text-align: center;
            top: calc((var(--card-label-after-size) * 2) * -1);
            width: fit-content;
            z-index: 1;
          }

          &.card__label--none, &.card__label--unavailable {
            --card-label-color: var(--ink-gray);
          }

          &.card__label--notice, &.card__label--open, &.card__label--offer {
            --card-label-color: var(--brand-blue-darker);
          }

          &.card__label--success, &.card__label--booked, &.card__label--worked {
            --card-label-color: var(--success-dark);
          }

          &.card__label--warning, &.card__label--pending, &.card__label--requested {
            --card-label-color: var(--warning-dark);
          }

          &.card__label--danger, &.card__label--cancelled {
            --card-label-color: var(--danger-dark);
          }
        }
      }
    }

    @container shift-bookings-list (max-width: 540px) {
      .card.card--shift-booking {
        flex-direction: column;
        gap: 0.5rem;
        min-width: unset;
        padding-top: 1rem;

        .card__datetime {
          min-width: unset;
          max-width: unset;

          .date-display {}

          .datetime__wrapper {
            display: inline-flex;
            flex-direction: column;
          }
        }

        .card__details {
          border-left: unset;
          min-width: unset;
          padding-left: 0;

          .card__label {
            left: calc(1rem * -1);
            top: 0;

            &::after {
              border-right: calc(var(--card-label-after-size) * 2) solid var(--card-label-color);
              border-bottom: var(--card-label-after-size) solid transparent;
              border-top: var(--card-label-after-size) solid transparent;
              height: calc(2rem + (var(--card-label-after-size) * 2));
              left: 0;
              top: 50%;
              transform: translate(-100%, -50%);
              width: calc(-100% + (var(--card-label-after-size) * 2));
            }

            & > span {
              border-radius: 0 var(--border-radius) var(--border-radius) 0;
              left: calc((var(--card-label-after-size) * 2) * -1);
              top: 0;
            }
          }
        }
      }
    }
  }

  .date-display {
    align-items: center;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
    text-align: center;

    & > span {
      height: fit-content;
    }

    span.date-display__weekday, span.date-display__month {
      font-size: 0.75rem;
      line-height: 1rem;
      white-space: nowrap;
    }

    span.date-display__weekday {
      font-weight: 500;
    }

    span.date-display__month, &.date-display__day {
      font-weight: 600;
    }

    span.date-display__day {
      font-size: 1.25rem;
    }
  }
}