_patterns_image.scss

/*
  @classreference
  image-container:
    Image container:
      .p-image-container:
        Main element of the image component.
      "&.is-cover":
        Cover variant, to be used to set the `.p-image-container__image` within to cover the container.
      "&.is-highlighted":
        Highlighted variant, to be used to highlight contents.
      .p-image-container--16-9:
        Wraps contents in a container with an aspect ratio of 16:9.
      .p-image-container--3-2:
        Wraps contents in a container with an aspect ratio of 3:2.
      .p-image-container--2-3:
        Wraps contents in a container with an aspect ratio of 2:3.
      .p-image-container--cinematic:
        Wraps contents in a container with an aspect ratio of 2.4:1.
      .p-image-container--square:
        Wraps contents in a container with an aspect ratio of 1:1.
      .p-image-container--(16-9|3-2|2-3|cinematic|square)-on-(small|medium|large):
        Wraps contents in a container with the specified aspect ratio on the specified breakpoint.
    Image:
      .p-image-container__image:
        Image element within an image container.
*/

@use 'sass:color';
@import 'settings';

// Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
$aspect-ratios: (
  '16-9': calc(16 / 9),
  '3-2': calc(3 / 2),
  '2-3': calc(2 / 3),
  'cinematic': 2.4,
  'square': 1,
);

@mixin aspect-ratio-classes {
  @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
    .p-image-container--#{$aspect-ratio} {
      aspect-ratio: $aspect-ratio-value;
    }
  }

  @each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
    $min-width: map-get($breakpoint-bounds-pair, min);
    $max-width: map-get($breakpoint-bounds-pair, max);

    @if $min-width and $max-width {
      @media ($min-width <= width < $max-width) {
        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
            aspect-ratio: $aspect-ratio-value;
          }
        }
      }
    } @else if $min-width {
      @media (width >= $min-width) {
        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
            aspect-ratio: $aspect-ratio-value;
          }
        }
      }
    } @else if $max-width {
      @media (width < $max-width) {
        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
            aspect-ratio: $aspect-ratio-value;
          }
        }
      }
    }
  }
}

@mixin vf-p-image {
  .p-image-container,
  [class^='p-image-container--'] {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;

    // If there is a child lazyloaded image, don't let it affect the layout
    & > .lazyloaded {
      display: contents;
    }

    &.is-highlighted {
      background: $colors--theme--background-alt;
    }

    .p-image-container__image {
      // max height prevents the image from stretching the container
      // when the aspect ratio is set, and object-fit ensures the aspect ratio
      // of the image content is maintained
      max-height: 100%;
      object-fit: contain;
    }

    &.is-cover {
      .p-image-container__image {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
    }
  }

  @include aspect-ratio-classes;

  // Deprecated; will be removed in v5
  .p-image--bordered {
    border: {
      color: $colors--theme--border-low-contrast;
      style: solid;
      width: 1px;
    }
  }

  // Deprecated; will be removed in v5
  .p-image--shadowed {
    box-shadow: $box-shadow;
  }
}