/*
 * Image
 *
 */

@use '../../../components/space/style/space-mixins.scss' as space-mixins;

@mixin imageStyle() {
  position: relative;
  z-index: 2;

  box-sizing: content-box;
  max-width: 100%;
  border-style: none;

  border-radius: inherit;

  &[alt]::after {
    content: attr(alt);

    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: inherit;
  }
}

@mixin figureStyle() {
  display: inline-flex;
  flex-direction: column;

  @include space-mixins.spaceReset();
  padding: 0;

  text-align: center; // works on Chrome – hides the alt text
  align-items: center; // works on FF – hides the alt text

  img,
  figcaption {
    font-size: var(--font-size-basis);
  }

  img {
    @include imageStyle();
  }

  figcaption {
    margin-top: 0.5rem;
  }
}