@use '../../variables' as var;

@use '../atoms';
@use '../focus';
@use '../layout';
@use '../themes';

@use 'containers';

$-color-thumbnail-frame: var.$color-grey-1;
$-color-thumbnail-background: var.$color-white;
$-color-thumbnail: var.$color-grey-5;

// A container for thumbnail content. Constrains to parent width and height.
@mixin thumbnail {
  // Outer container.
  // Provides a thick light-grey "frame" around the thumbnail content
  @include layout.padding(4);
  background-color: $-color-thumbnail-frame;

  // Fill the entire available space, but do not exceed it
  width: 100%;
  height: 100%;

  &__content {
    // Flex column for constraining the content to the container's dimensions
    @include layout.column($justify: center, $align: center);

    // Font size and color for placeholder
    // TODO After font foundations are in place, this could use some nuance
    // for smaller sizes.
    font-size: 2em;
    color: $-color-thumbnail;

    // Apply white background, since the parent is grey
    background-color: $-color-thumbnail-background;

    width: 100%;
    height: 100%;
    & > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}