//Aspect Ratios
@use 'sass:map';
@use 'sass:list';
@use 'sass:string';

$aspect-ratios-map: (
  '16:9': (
    '16/9',
    '56.25%',
  ),
  '2:1': (
    '2/1',
    '50%',
  ),
  '1:2': (
    '1/2',
    '200%',
  ),
  '4:3': (
    '4/3',
    '75%',
  ),
  '3:4': (
    '3/4',
    '133.33%',
  ),
  '1:1': (
    '1/1',
    '100%',
  ),
);

@mixin aspect-ratio($ratio: '16:9') {
  $aspect-ratios: map.get($aspect-ratios-map, '16:9');
  $aspect-ratio: list.nth($aspect-ratios, 1);
  $padding-top: list.nth($aspect-ratios, 2);

  @if map.has-key($aspect-ratios-map, $ratio) {
    $aspect-ratios: map.get($aspect-ratios-map, $ratio);
    $aspect-ratio: list.nth($aspect-ratios, 1);
    $padding-top: list.nth($aspect-ratios, 2);
  } @else {
    @warn 'aspect-ratio(): "#{$ratio}" is not a supported aspect ratio. Fallback to 16:9.';
  }

  aspect-ratio: #{$aspect-ratio};
  display: block;
  max-height: 100%;
  max-width: 100%;
  position: relative;

  @supports not (aspect-ratio: string.unquote($aspect-ratio)) {
    padding-top: #{$padding-top};
  }
}

// Object fit
@mixin object-fit($fit: 'cover') {
  display: block;
  height: 100%;
  object-fit: #{$fit};
  object-position: 50% 50%;
  width: 100%;
}