/*
Component represents a image.
Use:
  <img src="..." class="top-image">
  OR
  <div class="top-image-container">
    <img class="top-image" src="...">
    <div class="top-overlay style-secondary"></div>

    <span class="top-overlay-bottom-left">
      Some title
    </span>
  </div>
*/

$width: 320px;
$height: 480px;
$padding: var(--unit-5);
$radius: var(--radius-2);

.top-image {
  width: $width;
  height: $height;

  object-fit: cover;

  border-radius: $radius;
}

.top-image-container {
  width: $width;
  height: $height;

  object-fit: cover;

  border-radius: $radius;

  position: relative;

  .top-image {
    width: 100%;
    height: 100%;
  }

  .top-overlay {
    mix-blend-mode: multiply;
    border-radius: $radius;

    // Overlay elements
    &-top-left {
      position: absolute;
      top: $padding;
      left: $padding;
    }
    &-top-right {
      position: absolute;
      top: $padding;
      right: $padding;
    }
    &-bottom-left {
      position: absolute;
      bottom: $padding;
      left: $padding;
    }
    &-bottom-right {
      position: absolute;
      bottom: $padding;
      right: $padding;
    }

    // Styles
    &.style-muted {
      background: var(--color-black-text);
      opacity: 0.5;
    }
    &.style-primary {
      background: var(--color-primary);
      opacity: 0.5;
    }
    &.style-secondary {
      background: var(--color-secondary);
      opacity: 0.5;
    }
  }

  .top-image, .top-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}