@use '@angular/material' as mat;
@mixin sc-image-card-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $success: map-get($theme, success);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $is-dark-theme: map-get($theme, is-dark);

  $translucent-blurry-gray-bg: if($is-dark-theme,  #212121, #fff);

  .sc-image-card {
    background-color: mat.get-color-from-palette($background, card);

    &__info,
    &__action .mat-icon-button {
      background-color: rgba(mat.get-color-from-palette($background, background), 0.8);
      transition: background $hover-transition-duration linear;

      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        backdrop-filter: blur(4px);
        background-color: rgba($translucent-blurry-gray-bg, 0.6);
      }
    }
  }
}