/*! formstone v2.2.1 [background.scss] 2026-03-16 | GPL-3.0 License | formstone.it */
/**
 * $module background
 * $description Simple modal dialog component
 */

/**
 * Default transition duration for background media transitions
 * $type {time}
 * $default 0.15s
 */
$fs-background-duration: 0.15s;

/**
 * Primary background component
 * Creates a full-frame background with support for images, videos, and YouTube embeds
 *
 * $selector .fs-background
 * $modifier .fs-background-loaded - Applied when media has loaded
 * $modifier .fs-background-lazy - Applied when lazy loading is enabled
 * $example
 *   <div class="fs-background">
 *     <!-- Content here -->
 *   </div>
 */
.fs-background {
  /**
   * Transition duration for opacity changes
   * Overridable via custom property
   * $type {time}
   */
  --fs-background-duration: $fs-background-duration;

  @media (prefers-reduced-motion) {

    & {
      --fs-background-duration: 0s;
    }
  }

  //

  position: relative;

  &,
  &-container,
  &-media {
    transition: none;
  }

  /**
   * Container element for background media
   * Uses CSS Grid to stack multiple media layers
   *
   * $selector .fs-background-container
   */
  &-container {
    display: grid;
    grid-template-areas: 'fs-background-stack';

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
  }

  /**
   * Media element for background content
   * Handles images, videos, and embeds with proper sizing and positioning
   *
   * $selector .fs-background-media
   */
  &-media {
    grid-area: fs-background-stack;

    min-height: 0;
    min-width: 0;

    z-index: 1;

    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity var(--fs-background-duration) linear;

    img,
    video,
    iframe {
      width: 100%;
      height: 100%;

      display: block;
      -webkit-user-drag: none;
    }

    video {
      object-fit: cover;
      object-position: center;
    }

    iframe {
      z-index: 0;
    }
  }


  &-image,
  &-video {
    width: 100%;
    height: 100%;
  }

  /**
   * Image background media type
   * $selector .fs-background-image
   */
  &-image {}

  /**
   * Video background media type
   * $selector .fs-background-video
   */
  &-video {}

  /**
   * Embedded media type (YouTube)
   * Maintains 16:9 aspect ratio and centers content
   * $selector .fs-background-embed
   */
  &-embed {
    aspect-ratio: 16 / 9;

    align-self: center;
    justify-self: center;

    // min-height: calc(100% + 120px); // Hiding youtube info requires extra zoom
    min-height: 100%;
    min-width: 100%;

    &:after {
      width: 100%;
      height: 100%;

      position: absolute;
      inset: 0;
      z-index: 1;

      content: '';
    }
  }
}