/*
  @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:math';
@import 'settings';

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

@mixin apply-aspect-ratio-styles($padding-value) {
  &::before {
    content: '';
    display: block;
    padding-bottom: $padding-value;
  }

  .p-image-container__image {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
    right: 0;
    top: 0;
  }
}

@mixin aspect-ratio-classes {
  @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
    $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
    .p-image-container--#{$aspect-ratio} {
      @include apply-aspect-ratio-styles($padding-percentage);
    }
  }

  // Responsive aspect ratios
  @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 {
          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
            @include apply-aspect-ratio-styles($padding-percentage);
          }
        }
      }
    } @else if $min-width {
      @media (width >= $min-width) {
        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
            @include apply-aspect-ratio-styles($padding-percentage);
          }
        }
      }
    } @else if $max-width {
      @media (width < $max-width) {
        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
            @include apply-aspect-ratio-styles($padding-percentage);
          }
        }
      }
    }
  }
}

@mixin vf-p-image {
  .p-image-container,
  [class*='p-image-container--'] {
    display: block;
    position: relative;
    width: 100%;

    .p-image-container__image {
      display: block;
      margin: auto;
    }

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

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

    &.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;
  }
}