.time-slot {
  background-image: linear-gradient(to right, rgba(255, 170, 100, 0.25) var(--pr), transparent var(--pr));
  --pr:             0%;
}


#calendar-container {
  display:        flex;
  overflow-x:     auto;
  flex-direction: row-reverse;
  flex-wrap:      nowrap;
  max-width:      max-content;
  padding-bottom: 10px;
  gap:            35px;
}

/* based on https://jonathanlahijani.com/posts/htmx-event-calendar/ */
/* calendar styles */
.calendar {
  .calendar-weekdays, .calendar-month-grid {
    display:               grid;
    min-width:             350px;
    margin:                0;
    padding:               0;
    list-style:            none;
    grid-template-columns: repeat(7, 1fr);
    grid-gap:              6px;
  }

  .calendar-month-grid .calendar-day {
    display:          flex;
    min-height:       50px;
    background-color: #f0f0f0;

    > label {
      flex-grow: 1;
      padding:   10px;
      cursor:    pointer;

      > input[type=radio] {
        position:   absolute;
        appearance: none;
      }

      &:has(input:checked) {
        outline: 4px solid blue;
      }
    }

    &.calendar-day-open {
      background-color: lightgreen;
    }

    &.calendar-day-reserved {
      background-color: green;
    }

    &.calendar-day-today .day-number {
      font-weight: bolder;
    }
  }
}

.flash-alert-fade-out {
  animation: flashAlertFadeOut 0.5s ease-in-out 2.5s forwards;
}

@keyframes flashAlertFadeOut {
  to { opacity: 0; transform: translateY(-100%); pointer-events: none; }
}