.upload-widget {
  position: relative;

  label.upload-label {
    text-align: right;
    border: 1px solid black;
    padding: 0;
    display: block;
    cursor: pointer;

    .upload-button {
      padding: 1rem 1.5rem;
      display: inline-block;
      background-color: $color-blue;
      border: 1px solid $color-blue;
      margin: -1px;
      color: white;

      &:hover {
        background-color: $color-blue-darker;
      }
    }
  }

  input {
    display: none;
    position: absolute;
    top: 0;
  }
}

.uploaded-file {
  .icon {
    vertical-align: middle;

    svg * {
      fill: $color-green;
    }
  }

  &__name {
    vertical-align: middle;
    margin-left: 0.5rem;
    font-weight: $font-bold;
    text-decoration: underline;
    color: $color-black-light !important;

    &:hover {
      color: $color-black-light;
    }
  }

  &__remove {
    vertical-align: middle;
    margin-left: 2rem;
    font-size: $small-font-size;
  }
}

.usa-input--error {
  .upload-widget {
    label.upload-label {
      border: 1px solid $color-red;
      box-shadow: inset 0 0 0 2px $color-red;
      position: relative;

      .upload-button {
        margin-left: -3px;
        border-left: 3px solid $color-red;
      }

      .icon {
        top: 0;
      }
    }
  }
}
