@use '../mixins/typo';

.sbb-figure {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  margin: 0;

  :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
  }

  :is(figcaption, .sbb-caption) {
    grid-row: 2;
    grid-column: 1;
    padding-block-start: var(--sbb-spacing-fixed-4x);
    color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
    line-height: var(--sbb-typo-line-height-text);
    letter-spacing: var(--sbb-typo-letter-spacing-text);
    font-size: var(--sbb-text-font-size-xs);
  }

  // Utility classes for placing elements over an image (eg. 'sbb-figure-overlap-start-start')
  :is(
    .sbb-figure-overlap-start-start,
    .sbb-figure-overlap-start-end,
    .sbb-figure-overlap-end-start,
    .sbb-figure-overlap-end-end
  ) {
    display: flex;
    gap: var(--sbb-spacing-fixed-1x);
    flex-wrap: wrap;
    margin: var(--sbb-spacing-responsive-xxxs);

    // Chips or other image overlaying element should stay in light mode as the image stays in light mode as well.
    color-scheme: only light;
    position: relative;
    order: 1; // Alternative to z-index
    grid-row: 1;
    grid-column: 1;
  }

  $alignments: start, end;
  @each $row-alignment in $alignments {
    @each $column-alignment in $alignments {
      .sbb-figure-overlap-#{$row-alignment}-#{$column-alignment} {
        place-self: #{$row-alignment} #{$column-alignment};
        justify-content: #{$column-alignment};
      }
    }
  }
}

// Utility classes for the aspect ratio (eg. 'sbb-image-16-9')
$aspects-ratio: (
  'free': 'auto',
  '1-1': '1 / 1',
  '1-2': '1 / 2',
  '2-1': '2 / 1',
  '2-3': '2 / 3',
  '3-2': '3 / 2',
  '3-4': '3 / 4',
  '4-3': '4 / 3',
  '4-5': '4 / 5',
  '5-4': '5 / 4',
  '9-16': '9 / 16',
  '16-9': '16 / 9',
);
@each $name, $ratio in $aspects-ratio {
  :is(sbb-image, img).sbb-image-#{$name} {
    --sbb-image-aspect-ratio: #{$ratio};
  }
}

// Utility classes for the border radius (eg. 'sbb-image-border-radius-none')
$border-radius: (
  'default': 'var(--sbb-border-radius-4x)',
  'none': '0',
  'round': 'var(--sbb-border-radius-infinity)',
);
@each $name, $radius in $border-radius {
  :is(img, sbb-image).sbb-image-border-radius-#{$name} {
    border-radius: #{$radius};
  }
}