@import '~scss/variables';

.upload {
  display: flex;
  padding: 12px;
  line-height: 20px;
  font-size: 12px;
  border: 1px dashed $border-color;
  border-radius: $border-radius;
  cursor: pointer;

  &.hide {
    display: none;
  }
  
  &.error {
    .statusIcon {
      .icon {
        svg {
          color: $white;
          fill: $red;
        }
      }
    }

    .name, 
    .description {
      color: $red;
      font-weight: bold;
    }
  }

  .statusIcon {
    position: relative;
    margin-right: 12px;
    width: 40px;
    line-height: 40px;
    font-size: 40px;

    .emoji {
      position: relative;
      top: 4px;
    }

    .icon {
      position: absolute;
      bottom: -4px;
      right: -6px;
      z-index: 2;

      svg {
        color: $white;
        fill: $green;
      }
    }
  }

  .name {
    color: $text-color;
    font-weight: bold;
  }

  .description {
    color: $second-text-color;
  }

  .edit {
    color: $blue;
    cursor: pointer;
  }
}

.packageInfo {
  position: relative;
  border: 0 none;
  cursor: default;

  button {
    position: absolute;
    top: 16px;
    right: 12px;
  }
}

.reUpload {
  margin-bottom: 12px;
  text-align: right;

  > label {
    color: $blue;
    cursor: pointer;
  }
}
