@use "@s360-base-theme/ui-core/text-styles";
@use "s360-scss-toolkit";

figure {
  display: var(--figure--display, block);
  height: var(--figure--height, auto);
  width: var(--figure--width, auto);
  position: var(--figure--position, relative);

  &:has(figcaption) {
    --figure--display: table;
    --figure--width: 100%;
  }

  figcaption {
    @extend %text-style-caption;

    display: var(--figcaption--display, table-caption);
    caption-side: var(--figcaption--caption-side, bottom);
    line-height: var(--figcaption--line-height);
  }
}
