@use '@angular/material' as mat;
@import "../../lib/scss/sc-mixins";
@import "../../lib/scss/sc-variables";

:host{
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    border-radius: $card-border-radius;
    overflow: hidden;
    cursor: pointer;
    @include mat-elevation(0);
    border: 1px solid;
    transition: all $hover-transition-duration linear;

    &:hover {
      @include mat-elevation(8);
      border: 0;
      transition: all $hover-transition-duration linear;
    }
}
.img-preview {

    &__img {
      width: 100%;
      height: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
      pointer-events: none;
    }

    &__caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      opacity: 0.8;
      padding: $spacer;

      .label {
        margin-bottom: 0;
      }
    }

    &__actions {
      position: absolute;
      top: $card-padding * 0.5;
      left: $card-padding * 0.5;
      right: $card-padding * 0.5;
      display: flex;
      justify-content: flex-end;
      gap: $card-padding * 0.5;
    }
  }
  .img-loader{
    position: absolute;
    top:50%;
    left:50%;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,50%);
    transform: translate(-50%, -50%);
  }