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

/* Lazy Video Loading Styles */
[data-controller="lazy-video"] {
  position: relative;
}

/* Loading indicator is hidden by default, shown only when loading class is added */
[data-controller="lazy-video"] .loading-indicator {
  display: none !important;
}

[data-controller="lazy-video"].loading .loading-indicator {
  display: flex !important;
}

/* Smooth transitions for video loading */
[data-controller="lazy-video"] [data-lazy-video-target="placeholder"] {
  transition: opacity 0.3s ease-in-out;
}

[data-controller="lazy-video"] [data-lazy-video-target="video"] {
  transition: opacity 0.3s ease-in-out;
}

/* Video styling to maintain aspect ratio and object fit */
[data-controller="lazy-video"] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}