/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modal-dialog-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes modal-dialog-out {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

.modal-backdrop { animation: modal-fade-in   0.15s ease-out; }
.modal-dialog   { animation: modal-dialog-in 0.2s  ease-out; }

/* A modal leaves the way it came in, eased in rather than out. modal_controller
   adds the class and empties the frame once this has played. */
.modal-backdrop.is-closing               { animation: modal-fade-out   0.15s ease-in forwards; }
.modal-backdrop.is-closing .modal-dialog { animation: modal-dialog-out 0.15s ease-in forwards; }

/* The panels under the bell and the avatar grow out of their button and shrink
   back into it. Transitions rather than keyframes, so a second click half-way
   turns them around from where they are. Still driven by the hidden attribute:
   allow-discrete keeps the panel on screen until it has faded out, and
   @starting-style gives the fade-in its first frame. */
.dropdown-panel {
  --dropdown-scale: 0.97;
  transform-origin: top right;
  transition-property: opacity, scale, display;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

.dropdown-panel[hidden] {
  opacity: 0;
  scale: var(--dropdown-scale);
  pointer-events: none;
  transition-timing-function: ease-in;
}

@starting-style {
  .dropdown-panel:not([hidden]) { opacity: 0; scale: var(--dropdown-scale); }
}

/* Less motion keeps the fades, which still say "opened" and "closed", and
   drops the slide and the scale. */
@media (prefers-reduced-motion: reduce) {
  .modal-dialog                            { animation-name: modal-fade-in; }
  .modal-backdrop.is-closing .modal-dialog { animation-name: modal-fade-out; }
  .dropdown-panel                          { --dropdown-scale: 1; }
}

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* A break in the middle of a working day is not the same thing as an evening:
   the hatch says the time is blocked out rather than simply outside the hours.
   Colour alone would have to carry it otherwise, and two greys a step apart is
   not a difference anyone reads at a glance. */
.bg-break-hatch {
  background-color: var(--color-break);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    rgb(255 255 255 / 0.65) 5px 10px
  );
}