/*
 * 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.
*/

:root {
  --ui-motion-fast: 140ms;
  --ui-motion-normal: 180ms;
  --ui-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-pressable {
  transform-origin: center;
  transition:
    transform var(--ui-motion-fast) var(--ui-motion-ease-out),
    background-color var(--ui-motion-fast) var(--ui-motion-ease-out),
    border-color var(--ui-motion-fast) var(--ui-motion-ease-out),
    color var(--ui-motion-fast) var(--ui-motion-ease-out),
    box-shadow var(--ui-motion-fast) var(--ui-motion-ease-out),
    opacity var(--ui-motion-fast) var(--ui-motion-ease-out);
}

.ui-pressable:not(:disabled):not([aria-busy="true"]):active {
  transform: scale(0.97);
}

.ui-appear-transition {
  transition:
    opacity var(--ui-motion-normal) var(--ui-motion-ease-out),
    transform var(--ui-motion-normal) var(--ui-motion-ease-out),
    filter var(--ui-motion-fast) var(--ui-motion-ease-out);
}

.ui-appear-from {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  filter: blur(2px);
}

.ui-appear-to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

dialog.ui-modal::backdrop {
  background-color: rgb(0 0 0 / 0%);
  backdrop-filter: blur(0);
  transition:
    background-color var(--ui-motion-normal) var(--ui-motion-ease-out),
    backdrop-filter var(--ui-motion-normal) var(--ui-motion-ease-out);
}

dialog.ui-modal .ui-modal-panel {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  filter: blur(2px);
  transition:
    opacity var(--ui-motion-normal) var(--ui-motion-ease-out),
    transform var(--ui-motion-normal) var(--ui-motion-ease-out),
    filter var(--ui-motion-fast) var(--ui-motion-ease-out);
}

dialog.ui-modal[data-state="open"]::backdrop {
  background-color: rgb(0 0 0 / 60%);
  backdrop-filter: blur(2px);
}

dialog.ui-modal[data-state="open"] .ui-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.carousel-track {
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}

.carousel-track::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.rating-number-input[type="number"]::-webkit-outer-spin-button,
.rating-number-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rating-number-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.rating-adjust-button {
  transition:
    transform 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.rating-adjust-button:not(:disabled):hover {
  background: color-mix(
    in oklab,
    theme("colors.neutral.900") 55%,
    theme("colors.cyan.400") 20%
  );
  border-color: theme("colors.cyan.400");
  box-shadow: 0 0 0 1px
    color-mix(in oklab, theme("colors.cyan.400") 65%, transparent 35%);
}

.rating-adjust-button:not(:disabled):active {
  transform: translateY(1px);
  background: color-mix(
    in oklab,
    theme("colors.neutral.900") 45%,
    theme("colors.cyan.400") 25%
  );
  border-color: color-mix(
    in oklab,
    theme("colors.cyan.400") 75%,
    transparent 25%
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, theme("colors.cyan.400") 70%, transparent 30%);
}

@keyframes auth-step-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.auth-step-enter {
  animation: auth-step-enter 200ms var(--ui-motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .ui-pressable,
  .ui-appear-transition {
    transition-duration: 1ms;
  }

  .ui-pressable:not(:disabled):not([aria-busy="true"]):active {
    transform: none;
  }

  .ui-appear-from,
  .ui-appear-to {
    transform: none;
    filter: none;
  }

  dialog.ui-modal::backdrop,
  dialog.ui-modal .ui-modal-panel {
    transition-duration: 1ms;
  }

  .auth-step-enter {
    animation: none;
  }
}