@import "_variables";
@import "~bootstrap/scss/bootstrap";
@import "_functions";

.image-upload-container {
  .image-add {
    aspect-ratio: 1 / 1;
    text-align: center;
    background-color: background-color($secondary);
    color: rgb(text-color(background-color($secondary)), 0.3);
    border: 3px solid rgb(text-color(background-color($secondary)), 0.3);
    transform: scale(0.9);

    .fa-plus {
      font-size: 5rem;
    }

    &:hover {
      cursor: pointer;
      background-color: hover-color(background-color($secondary));
    }
  }

  .image-preview {
    aspect-ratio: 1 / 1;
    border: 3px solid text-color(background-color($secondary));
    position: relative;
    transform: scale(0.9);

    img {
      object-fit: cover;
      object-position: center;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .select-as-main {
      width: 66px;
      height: 66px;
      background-color: background-color($secondary);
      color: $warning;
      opacity: 0.7;
      position: absolute;
      left: 0;
      top: 0;

      &:hover, &.selected {
        opacity: 1;
        cursor: pointer;
        background-color: $warning;
        color: background-color($secondary);
      }
    }

    .clear-image {
      width: 66px;
      height: 66px;
      background-color: rgb(background-color($secondary), 0.7);
      color: $danger;
      position: absolute;
      top: 0;
      right: 0;

      &:hover {
        cursor: pointer;
        background-color: rgb($danger, 0.7);
        color: background-color($secondary);
      }
    }
  }
}