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

/* Base */

@font-face {
  font-family: 'Klasik';
  src: url("/assets/Klasik-d4b51b11.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Shared: Sortable */

.sortable-chosen .sortable-item {
  background: #343438;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

.sortable-drag .sortable-item {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 14px 30px rgba(0, 0, 0, 0.2);
}

.sortable-ghost {
  opacity: 0.45;
}

/* Page: Daily Page */

/* Page: Daily Page - States */

.daily-page-frame[data-navigation-loading="true"] .daily-page-spinner {
  opacity: 1;
}

.daily-page-frame[data-navigation-loading="true"] .daily-page-surface {
  pointer-events: none;
}

.daily-page-frame[data-navigation-state="exiting"][data-navigation-direction="previous"] .daily-page-surface {
  animation: daily-page-exit-to-right 180ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.daily-page-frame[data-navigation-state="exiting"][data-navigation-direction="next"] .daily-page-surface {
  animation: daily-page-exit-to-left 180ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.daily-page-frame[data-navigation-state="entering"][data-navigation-direction="previous"] .daily-page-surface {
  animation: daily-page-enter-from-left 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-page-frame[data-navigation-state="entering"][data-navigation-direction="next"] .daily-page-surface {
  animation: daily-page-enter-from-right 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-page-frame[data-navigation-state="rendering"] .daily-page-surface {
  opacity: 0;
}

/* Page: Daily Page - Keyframes */

@keyframes daily-page-exit-to-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes daily-page-exit-to-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes daily-page-enter-from-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes daily-page-enter-from-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Page: Daily Page - Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .daily-page-surface {
    animation: none;
    transition: none;
    transform: none;
  }
}