@import '../../styles/common/colors';
@import '../../styles/common/screen';

.file-upload-component {
  label {
    color: $primary-4;
    display: block;
    font-size: 16px;
    font-weight: 200;
    margin-bottom: 10px;
  }
  &.disabled {
    .dropzone {
      cursor: not-allowed;
      background-color: $neutral-3 !important;
      border: 1px solid $neutral-3 !important;
    }
  }
}

.dropzone {
  width: 100%;
  min-height: 100px;
	border-radius: 3px;
	background-color: $white;
	border: 1px dashed $neutral-1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 20px;
  > div {
  	font-size: 13px;
  	color: rgba($primary-4, 0.5);
  }
  &.active {
    border-color: $green;
    background-color: rgba($green, 0.3);
  }
}

.filename {
  font-size: 14px;
  margin-top: 12px;
  span {
    color: $primary-4;
    font-weight: 200;
  }
}

.preview {
  .image {
    display: inline-block;
    position: relative;
    margin-top: 15px;
    + .image {
      margin-left: 15px;
    }
    img {
      transition: all 0.25s ease 0s;
    }
    svg {
      display: none;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
    &:hover {
      img {
        opacity: 0.3;
      }
      svg {
        display: block;
      }
    }
  }
}