// RAMEN IMAGE COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $image-background-color: Sets the image background color (before image loads)
// $image-aspect-ratio: Sets the image aspect ratio (in percent)
// $figcaption-background-color: Sets the image caption background color
// $figcaption-color: Sets the image caption text color
// $figcaption-padding: Sets the image caption padding
//
//

@mixin image {
  width: 100%;

  img {
    display: none;
  }

  @media print {
    display: none;
  }
}

@mixin image-container {
  background-color: $image-background-color;
  height: 0;
  overflow: hidden;
  padding-bottom: $image-aspect-ratio;
  position: relative;
}

@mixin image-background {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(1.1);
  transition: opacity $global-transition-speed $global-easing,
    transform $global-transition-speed $global-easing;
  width: 100%;

  &.is-lazyloaded {
    opacity: 1;
    transform: none;
  }

  &.has-load-error {
    min-height: 200px;
    opacity: 1;
    outline: 1px solid $c-error;

    &:before {
      content: 'Error';
      color: $c-error;
    }
  }
}

@mixin image-caption {
  background: $figcaption-background-color;
  color: $figcaption-color;
  padding: $figcaption-padding;
}

.c-image {
  @include image;

  &__container {
    @include image-container;
  }

  &__background {
    @include image-background;
  }

  &__caption {
    @include caption-text;
    @include image-caption;
  }

  &--square {
    .c-image__container {
      padding-bottom: 100%;
    }
  }
}