@use "../functions" as *;
@use "../mixins/image" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/tokens" as *;

$thumbnail-tokens: () !default;

// scss-docs-start thumbnail-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$thumbnail-tokens: defaults(
  (
    --thumbnail-padding: .25rem,
    --thumbnail-bg: var(--bg-body),
    --thumbnail-border-width: var(--border-width),
    --thumbnail-border-color: var(--border-color),
    --thumbnail-border-radius: var(--border-radius),
    --thumbnail-box-shadow: var(--box-shadow-sm),
  ),
  $thumbnail-tokens
);
// scss-docs-end thumbnail-tokens

$figure-tokens: () !default;

// scss-docs-start figure-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$figure-tokens: defaults(
  (
    --figure-gap: calc(var(--spacer) * .5),
    --figure-caption-font-size: var(--font-size-sm),
    --figure-caption-color: var(--fg-3),
  ),
  $figure-tokens
);
// scss-docs-end figure-tokens

@layer content {
  // Responsive images (ensure images don't scale beyond their parents)
  //
  // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
  // We previously tried the "images are responsive by default" approach in Bootstrap v2,
  // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
  // which weren't expecting the images within themselves to be involuntarily resized.
  // See also https://github.com/twbs/bootstrap/issues/18178
  .img-fluid {
    @include img-fluid();
  }

  .img-thumbnail {
    @include tokens($thumbnail-tokens);
    padding: var(--thumbnail-padding);
    background-color: var(--thumbnail-bg);
    border: var(--thumbnail-border-width) solid var(--thumbnail-border-color);
    @include border-radius(var(--thumbnail-border-radius));
    @include box-shadow(var(--thumbnail-box-shadow));

    // Keep them at most 100% wide
    @include img-fluid();
  }

  .figure {
    @include tokens($figure-tokens);
    // Ensures the caption's text aligns with the image.
    display: flex;
    flex-direction: column;
    gap: var(--figure-gap);
  }

  .figure-caption {
    font-size: var(--figure-caption-font-size);
    color: var(--figure-caption-color);
  }
}