// Preview component styles
// Based on Astro Starlight component-preview.astro

.preview-figure {
  margin: 0 0 1.5rem;

  .preview {
    border: 1px solid $db-gray-500;
  }

  figcaption {
    font-size: 1rem;
    color: inherit;
    font-style: normal;
    padding: 0.5rem 1rem 0;
    margin: 0;
  }

  .preview-content {
    padding: 1rem;
  }
}

@include color-mode(dark) {
  .preview-figure {
    margin: 0 0 1.5rem;

    .preview {
      border: 1px solid var(--sl-color-gray-5);
    }
  }
}