@use './typo';

// TODO(breaking-change): check which mixins can be inlined
@mixin figure {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  margin: 0;
}

@mixin figure-image {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
}

@mixin figure-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));
  @include typo.text-xs--regular;
}

@mixin figure-overlap-base {
  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;
}

@mixin figure-overlap($row-alignment, $column-alignment) {
  place-self: #{$row-alignment} #{$column-alignment};
  justify-content: #{$column-alignment};
}