@use "sass:map";
@use "../../settings";

/*
Aspect Ratio

The aspect ratio module.

Weight: -98

Style guide: #{settings.$prefix}-pict.aspect-ratio
*/

/*
Modifiers

The aspect ratio modifiers.

Weight: -100

Markup: <!-- with img element -->
<figure class="#{settings.$prefix}-pict  {{modifier_class}}">
  <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/400x300.png" alt="" width="400" height="300" loading="auto" />
</figure>
<!-- with breaking img element -->
<figure class="#{settings.$prefix}-pict  {{modifier_class}}">
  <img class="#{settings.$prefix}-pict__src" src="#" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="400" height="300" loading="auto" />
</figure>
<!-- with picture element -->
<picture class="#{settings.$prefix}-pict  {{modifier_class}}">
  <source media="(min-width: #{map.get(settings.$breakpoints, "mobile") + 1px})" srcset="https://placehold.co/800x600.png 800w, https://placehold.co/400x300.png 400w" sizes="400px" />
  <source media="(max-width: #{map.get(settings.$breakpoints, "mobile")})" srcset="https://placehold.co/600x600.png 600w, https://placehold.co/300x300.png 300w" sizes="300px" />
  <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/800x600.png" alt="" loading="auto" />
</picture>
<!-- with iframe player -->
<figure class="#{settings.$prefix}-pict  {{modifier_class}}">
  <iframe class="#{settings.$prefix}-pict__src" title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen  loading="auto"></iframe>
</figure>

#{settings.$prefix}-pict--aspect-ratio-1-1 - To 1:1
#{settings.$prefix}-pict--aspect-ratio-4-3 - To 4:3
#{settings.$prefix}-pict--aspect-ratio-16-9 - To 16:9

Style guide: #{settings.$prefix}-pict.aspect-ratio.builtin
*/
.#{settings.$prefix}-pict--aspect-ratio {
  &-1-1,
  &-4-3,
  &-16-9 {
    --max-width: 100%;
    --src-width: 100%;
    --src-height: auto;
    --src-object-fit: contain;

    .#{settings.$prefix}-pict__src:where(
        .#{settings.$prefix}-pict > .#{settings.$prefix}-pict__src
      ) {
      aspect-ratio: var(--src-aspect-ratio);
      width: var(--src-width);
      height: var(--src-height);
    }
  }

  &-1-1 {
    --src-aspect-ratio: 1/1;
  }

  &-4-3 {
    --src-aspect-ratio: 4/3;
  }

  &-16-9 {
    --src-aspect-ratio: 16/9;
  }
}