@import 'src/_theme.scss';

.muted {
  color: gray;
}

.text_center {
  text-align: center;
}

.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  background-color: $ms-color-neutralLighterAlt;

  .dropzone_load_demo {
    margin: 15px 0;
    flex-grow: 0;
  }

  .dropzone_svg {
    max-width: 100% !important;
  }

  .demo_button {
    margin-top: 15px;
  }

  .dropzone_placeholder {
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    user-select: none;
    flex-grow: 1;
  }

  .dropzone_placeholder_text {
    font-size: calc(0.8em + 1vw);
    margin: 25px 0;
  }

  .dropzone_placeholder_image {
    margin-bottom: 40px;
    [id="portrait-bg"] {
      fill: $ms-color-themeTertiary !important;
    }
    [id="portrait-silhouette"] {
      fill: $ms-color-themeLight !important;
    }

    [id="circle"] {
      fill: none;
      stroke: $ms-color-neutralTertiary;
      stroke-opacity: 0.3;
    }
    [id="circle"], [id="images"], [id="incorrect"], [id="x"] {
      transition-property: fill stroke transform opacity;
      transition-duration: 0.3s;
      transform-origin: center center;
    }

    [id="x"] * {
      fill: $ms-color-error !important;
    }

    [id="incorrect"], [id="correct"] {
      opacity: 0;
    }
  }

  &.dropzone__active {
    cursor: pointer;
    .dropzone_placeholder_image {
      [id="circle"] {
        fill: $ms-color-successBackground !important;
        stroke: $ms-color-success !important;
        transform: scale(1.05);
      }

      [id="images"] {
        transform: rotate(-10deg) scale(0.85);
      }

      [id="correct"] {
        opacity: 1;
      }
    }
  }

  &.dropzone__reject {
    cursor: no-drop not-allowed !important;

    .dropzone_placeholder_image {
      [id="circle"] {
        fill: $ms-color-errorBackground !important;
        stroke: $ms-color-error !important;
        transform: scale(0.7);
      }

      [id="images"] {
        transform: scale(0.5);
        opacity: 0 !important;
      }

      [id="incorrect"] {
        opacity: 1 !important;
        transition-delay: 0.1s;
        transition-duration: 0.2s;
        transform: scale(0.7);
      }
    }
  }
}
