lego-file-upload {
  .file-input-wrapper {
    position: relative;
    display: flex;
    margin: auto;

    input[type='file'] {
      opacity: 0;
      height: 0;
      width: 0;
      position: absolute;
    }

    .image-preview {
      background-color: $dim-gray;
      border: solid 1px $dim-gray;
      display: flex;
      position: relative;

      img {
        margin: auto;
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      lego-icon.clear {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 18px;
        height: 18px;
        padding: 16px;
        cursor: pointer;
        border: solid 1px $border-gray;
        border-radius: 50%;
        background-color: $dim-gray;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .spinner, .error {
        margin: 60px auto 0 auto;
      }

      .error {
        color: $error;
      }
    }

    .image-meta {
      display: flex;
      padding: .5rem;
      position: absolute;
      bottom: 0;
      background-color: rgba(239, 239, 239, 0.8);

      div {
        color: $black;
        flex-grow: 1;

        .title {

        }

        .value {
          font-weight: $font-weight-medium;
        }
      }
    }

    .url-or-upload {
      position: absolute;
      width: 100%;
      top: 20px;
      padding: 20px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;

      > * {
        margin-bottom: 1rem;
      }

      .textbox-container {
        display: flex;
        width: 100%;
        align-items: center;

        lego-textbox {
          width: 100%;
        }

        lego-icon {
          position: relative;
          top: -10px;
          right: 20px;
          cursor: pointer;

          &.disabled {
            cursor: default;
          }
        }
      }
    }
  }
}