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

body[data-native-app="true"] {
  --native-navigation-bar-height: 2.75rem;

  padding-top: calc(env(safe-area-inset-top, 0px) + var(--native-navigation-bar-height));
}

body[data-native-primary="true"] {
  --native-navigation-bar-height: 0px;
}

body[data-native-tab-bar="true"] {
  padding-bottom: max(5.25rem, calc(3.0625rem + env(safe-area-inset-bottom)));
}

.turbo-progress-bar {
  height: 3px;
  background-color: #1f4d3a;
}

turbo-frame {
  transition: opacity 150ms ease;
}

turbo-frame[busy] {
  pointer-events: none;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  turbo-frame {
    transition: none;
  }
}