//
// CIRCLE IMAGES
//

.sc-img {
  display: block;
  height: 0;
  overflow: hidden;
  padding-top: calc(100% - 6px);
  position: relative;
  width: calc(100% - 6px);
  margin: 3px;

  & .sc-img__fill {
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  & .sc-img__placeholder {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 10%;
    // opacity: 1;
    // transition: opacity $hover-transition-duration linear;

    &--one-char {
      padding: 30%
    }

    &-text {
      height: 100%;
      display: flex;
      align-items: center;
      font-family: "IBM Plex Sans Condensed";
      font-weight: 300;
      text-transform: uppercase;
      justify-content: center;
      align-items: center;
      display: flex;
    }
   
  }

  &__hover-area {
    // display: none;
    opacity: 0;
    transition: opacity $hover-transition-duration linear;

    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  &__edit,
  &__delete,
  &__edit-only {
    width: 100%;
    left: 0;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: background-color $hover-transition-duration linear;
  }

  &__edit {
    height: 50%;
    bottom: 0;
  }

  &__delete {
    height: 50%;
    top: 0;
  }

  &__edit-only {
    height: 100%;
    top: 0;
    border-radius: 50%;
  }

  &:hover .sc-img__hover-area {
    // display: block;
    opacity: 1;
  }

  &:hover .sc-img__placeholder {
    //opacity: 0;
    //transition: opacity $hover-transition-duration linear;
  }

  &:hover .sc-img__edit {
    transition: background-color $hover-transition-duration linear;
  }

  &:hover .sc-img__delete {
    transition: background-color $hover-transition-duration linear;
  }

  &:hover .sc-img__edit-only {
    transition: background-color $hover-transition-duration linear;
  }

  @supports (object-fit: cover) {
    .sc-img__fill {
      height: 100%;
      object-fit: cover;
    }
  }
}

.rect {
  border-radius: 0;
}

.circle {
  border-radius: 50%;
}