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

/*
Fit

The fit module.

Weight: -96

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

/*
Modifiers

The fit 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--fit-width - Fit to width
#{settings.$prefix}-pict--fit-max-width - Fit to max-width

Style guide: #{settings.$prefix}-pict.fit.builtin
*/
.#{settings.$prefix}-pict--fit {
  &-width,
  &-max-width {
    .#{settings.$prefix}-pict__src:where(
        .#{settings.$prefix}-pict > .#{settings.$prefix}-pict__src
      ) {
      height: var(--src-height);
    }
  }

  &-width {
    --src-width: 100%;
    --src-height: auto;

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

  &-max-width {
    --src-max-width: 100%;
    --src-height: auto;
  }
}