@layer modules {
  .calendar-day-add {
    opacity: 0;
    transition: opacity 120ms ease-in-out;
  }

  .calendar-day-cell:hover .calendar-day-add,
  .calendar-day-add:hover,
  .calendar-day-add:focus,
  .calendar-day-add:focus-visible {
    opacity: 1;
  }
}

/*
  Booking calendar interactions driven by calendar_controller.js:

  - Day selection: the controller toggles a `data-selected` attribute on the
    clicked day button.
  - Time slots: the controller builds `.booking-slot` buttons at runtime.
  - Dialog visibility: the controller toggles the `hidden` utility
    (display: none). `hidden` lives in @layer utilities, which outranks this
    @layer modules rule, so it correctly hides the dialog.
*/

@layer modules {
  .booking-day[data-selected] {
    background-color: var(--color-gray-100);
    box-shadow: 0 0 0 2px var(--color-blue-500);
  }

  /* Built at runtime by calendar_controller.js. */
  .booking-slot {
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
    cursor: pointer;

    &:hover {
      background-color: var(--color-gray-100);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .booking-dialog {
    display: flex;
  }
}