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

/*
Copy protect

The copy protect module.

Weight: -97

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

/*
Modifiers

The copy protect 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--copy-protect-true - Enable copy protection

Style guide: #{settings.$prefix}-pict.copy-protect.builtin
*/
.#{settings.$prefix}-pict--copy-protect {
  &-true {
    --src-pointer-events: none;
  }
}