@use '@angular/material' as mat;
@mixin sc-image-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $danger: map-get($theme, danger);

  //
  // CIRCLE IMAGES
  //

  .sc-img {
    background: mat.get-color-from-palette($background, hover);
    box-shadow: 0 0 0 2px mat.get-color-from-palette($background, card),
      0 0 0 3px mat.get-color-from-palette($foreground, divider);

    &__icon {
      &-delete {
        fill: map-get($danger, 500);
      }

      &-edit {
        fill: white;
      }
    }

    & .sc-img__placeholder-text {
      color: map-get($foreground, disabled-text)
    }

    &:hover .sc-img__delete {
      background-color: rgba(0, 0, 0, 0.3);

      &:hover {
        background-color: rgba(0, 0, 0, 0.6);
      }
    }

    &:hover .sc-img__edit {
      background-color: rgba(0, 0, 0, 0.3);

      &:hover {
        background-color: rgba(0, 0, 0, 0.6);
      }
    }

    &:hover .sc-img__edit-only {
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
}