@import "src/assets/scss/variables";

.c-colllect-element {
  overflow: hidden;
  // Defaults to 2 columns
  // Hack: The -1px is here to ensure all columns can fit on Firefox
  width: calc((100% - #{$grid-gutter * 3} - 1px) / 2);
  min-height: 100px;
  color: $color-white;
  border-radius: 4px;
  background: $color-outer-space;
  transition: background 300ms linear;
}

// Content
.c-colllect-element {
  .c-colllect-element--content {
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms linear;
  }

  &.c-colllect-element__show .c-colllect-element--content {
    visibility: visible;
    opacity: 1;
  }
}

// Image element specific style
.c-colllect-element.c-colllect-element__type-image {
  img {
    display: block;
    width: 100%;
    opacity: 0;
    // Background for transparent images
    background: $color-outer-space;
    // Hack (Blink): Avoid some blurry jump transition on resize
    filter: blur(0);
    transition: opacity 300ms;
  }

  &.c-colllect-element__show.c-colllect-element__loaded {
    background: transparent;

    img {
      opacity: 1;
    }
  }
}

// Generates support for 3 to 10 columns depending on the screen width
@for $grid-columns from 3 through 10 {
  @media (min-width: #{($grid-min-column-width + $grid-gutter) * $grid-columns}) {
    .c-colllect-element {
      // Hack: The -1px is here to ensure all columns can fit on Firefox
      width: calc((100% - #{$grid-gutter * ($grid-columns + 1)} - 1px) / #{$grid-columns});
    }
  }
}
