/*
========================================
ASPECT
----------------------------------------
usage:
  .add-aspect-[key]
----------------------------------------
output:
  aspect-ratio: [value];
----------------------------------------
example:
  .add-aspect-16x9 {
    height: inherit;
    padding: inherit;
    aspect-ratio: 1.7777777778;
    max-width: 100%;
  }
----------------------------------------
*/
@use "sass:map";
@use "uswds-core/src/styles/settings" as *;
@use "uswds-core/src/styles/variables/aspect-ratios" as *;
@use "uswds-core/src/styles/mixins/general/add-aspect" as *;

$add-aspect: (
  add-aspect: (
    base: "add-aspect",
    modifiers: null,
    values: (
      9x16: (
        slug: "9x16",
        isReadable: true,
      ),
      1x1: (
        slug: "1x1",
        isReadable: true,
      ),
      4x3: (
        slug: "4x3",
        isReadable: true,
      ),
      16x9: (
        slug: "16x9",
        isReadable: true,
      ),
      2x1: (
        slug: "2x1",
        isReadable: true,
      ),
    ),
    settings: $add-aspect-settings-complete,
    property: "position",
    type: "object",
  ),
);

@each $aspect-key in map.keys($project-aspect-ratios) {
  .add-aspect-#{$aspect-key} {
    @include add-aspect($aspect-key, "image");
  }
}

// Safari and firefox require a width attribute on img elements for aspect-ratio to work
// using :where() to reduce specificity in case a width utility class is added
@supports (aspect-ratio: 1) {
  :where(img[class*="add-aspect-"]) {
    width: min-content;
  }
}