.digit-upload-image-drawer {
  @apply w-full fixed left-0 right-0 flex-col;
  display: flex;
  background-color: theme(digitv2.lightTheme.paper-primary);
  border-radius: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
  z-index: 1000;
  border-radius: theme(digitv2.spacers.spacer1);
  gap: theme(digitv2.spacers.spacer6);
  padding: theme(digitv2.spacers.spacer6);

  .image-upload-options {
    @apply h-full;
    display: flex;

    .upload-options {
      @apply items-center flex-col;
      display: flex;
      flex: 1;
      justify-content: center;
      gap: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
    }

    .upload-options-svg-wrap{
      width: theme(digitv2.spacers.spacer10);
      height: theme(digitv2.spacers.spacer10);
      cursor: pointer;
    }

    .upload-options-label {
      @extend .typography.button.large;
      @apply cursor-pointer;
      color: theme(digitv2.lightTheme.primary-1);
    }
  }

  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
    height: 14.25rem;
    width: 27.5rem;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
  }

  @media (min-width: 48rem) {
    width: 37.5rem;
    height: 15rem;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
  }

  @media (max-width: 30rem) {
    height: 7.625rem;
    animation: slideInFromBottomUploader 0.5s ease-out forwards;
  }


  .capture-close {
    @apply w-8 h-8 absolute top-0 right-0 cursor-pointer mt-sm mr-sm;
    display: flex;

    svg {
      flex-shrink: 0;
    }
  }
}


.digit-uploader-wrap {
  @apply flex flex-col;
  gap: theme(digitv2.spacers.spacer3);

  @media (max-width: 30rem) {
    gap: theme(digitv2.spacers.spacer2);
  }

  &.error{
    gap:theme(digitv2.spacers.spacer1);
  }

  &.inline{
    flex-direction: row;
  }
  
  .digit-upload-label {
    @extend .typography.label;
    @apply text-left;
    margin: theme(digitv2.spacers.spacer0);
    color: theme(digitv2.lightTheme.text-primary);
  }

  .digit-uploader-content {
    @apply flex w-full;
    gap: theme(digitv2.spacers.spacer3);

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      max-width: 27.5rem;
      min-width: 21rem;
    }

    @media (max-width: 30rem) {
      max-width: 20.563rem;
      min-width: 18rem;
    }

    @media (min-width: 48rem) {
      max-width: 37.5rem;
      min-width: 20.75rem;
    }

  }

  label {
    outline: none !important;
  }

  .digit-uploader-content-uploadWidget {
    @apply flex flex-col w-full items-center justify-center max-w-full;
    gap: theme(digitv2.spacers.spacer4);
    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
    background: theme(digitv2.lightTheme.paper-secondary);
    padding: theme(digitv2.spacers.spacer4);
    height: 9rem;
    border-style: dashed;

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      min-width: 18.75rem;
    }

    @media (max-width: 30rem) {
      min-width: 17.938rem;
    }

    @media (min-width: 48rem) {
      min-width: 18.75rem;
    }

    svg {
      flex-shrink: 0;
    }

    .drag-drop-text {
      @extend .typography.body-s;
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.regular);
      line-height: theme(digitv2.lineHeight.lineheight2);
  
      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        font-size: theme(digitv2.fontSize.body-s.mobile);
      }
  
      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: theme(digitv2.fontSize.body-s.tablet);
      }
  
      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: theme(digitv2.fontSize.body-s.desktop);
      }
      @apply items-center;
      color: theme(digitv2.lightTheme.text-disabled);
      display: flex;
      margin: theme(digitv2.spacers.spacer0);

      @media (max-width: 30rem) {
        @apply flex-col;
      }
    }

    .drag-drop-link{
      @extend .typography.link-S;
      margin-left: theme(digitv2.spacers.spacer1);
      color: theme(digitv2.lightTheme.primary-1);
      cursor: pointer;
    }

    &.error {
      border-style: dashed !important;
      border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
    }
  }

  .digit-uploadWidget-label {
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
    }
    color: theme(digitv2.lightTheme.text-disabled);
  }

  .digit-upload {
    @apply h-10;
  }

  .digit-uploader-input {
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
    }
    @apply h-10;
    background-color: transparent;
    border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
    padding: theme(digitv2.spacers.spacer2);
    color: theme(digitv2.lightTheme.text-primary) !important;

    &:focus {
      @apply outline-none;
    }

    &.error {
      border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
    }

  }

  input::placeholder {
    color: theme(digitv2.lightTheme.text-disabled) !important;
  }

  .digit-upload,
  .digit-uploader-input {

    @apply w-full;

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      max-width: 19rem;
      min-width: 12.5rem;
    }

    @media (max-width: 30rem) {
      max-width: 12.313rem;
      min-width: 9.75rem;
    }

    @media (min-width: 48rem) {
      max-width: 29.25rem;
      min-width: 12.5rem;
    }

  }

  .digit-img-container {
    @apply flex flex-wrap max-w-full;
    gap: theme(digitv2.spacers.spacer3);

    .preview-container {
      @apply relative cursor-pointer h-auto;
      width: 6.25rem;
      min-height: 6.25rem;

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 6.25rem !important;
        height: 6.25rem !important;
        background: #6f6f6fb2;
        display: flex;
        justify-content: center;
        align-items: center;

        &.error{
          background: rgba(185, 25, 0, 0.2);
          
          &:hover{
            background: transparent;
          }
        }

        &:hover{
          background: transparent;
        }
      }

      .digit-docupload-icon{
        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);

        &:hover{
          box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
        }
      }

      .preview-file-name{
        @extend .typography.body-xs;
        @apply whitespace-pre-wrap break-words;
        color: theme(digitv2.lightTheme.text-secondary);
        word-break: break-word;
        cursor: default;
      }

      img {
        width: 6.25rem !important;
        height: 6.25rem !important;
      }

      &.inprogress {
        background: #6F6F6FB2;
      }

      &.error {
        img {
          border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
        }
      }

      &.single.imageFile{
        width: 100%;

        img{
          width: 100% !important;
        }

        .overlay{
          width: 100% !important;
        }
      }
    }

    .preview-container.uploadImage.singleUpload {
      width: 100%; 
      height: 100%; 

      img{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover; 
      }
    }

    &:not(.uploadImage){
      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
        max-width: 27.5rem;
        min-width: 21rem;
      }
  
      @media (max-width: 30rem) {
        max-width: 20.563rem;
        min-width: 18rem;
      }
  
      @media (min-width: 48rem) {
        max-width: 37.5rem;
        min-width: 20.75rem;
      }
    }
  }

  .digit-uploader-close-icon {
    @apply absolute top-0 right-0 w-6 h-6 cursor-pointer;
    background-color: theme(digitv2.lightTheme.primary-2);
    padding: theme(digitv2.spacers.spacer1);

    &.error {
      background-color: theme(digitv2.lightTheme.alert-error);
    }
  }

  .digit-upload-helptext {
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
    }
    @apply text-left;
    margin: theme(digitv2.spacers.spacer0);
    color: theme(digitv2.lightTheme.text-secondary);
  }

  .digit-uploaded-file-container {
    @apply items-start relative w-full max-w-full flex-wrap;
    display: flex !important;
    gap: theme(digitv2.spacers.spacer3);
    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
    background-color: theme(digitv2.lightTheme.paper-secondary);
    margin: theme(digitv2.spacers.spacer0);
    padding: theme(digitv2.spacers.spacer4);
    border-radius: theme(digitv2.spacers.spacer0);

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      min-width: 18.75rem;
    }

    @media (max-width: 30rem) {
      min-width: 17.938rem;
    }

    @media (min-width: 48rem) {
      min-width: 18.75rem;
    }

    .uploaded-file-container-sub {
      @apply items-center cursor-pointer;
      display: flex !important;
      gap: theme(digitv2.spacers.spacer2);

      .uploaded-file-details {
        @extend .typography.heading-s;
        font-family: theme(digitv2.fontFamily.sans);
        font-style: theme(digitv2.fontStyle.normal);
        font-weight: theme(digitv2.fontWeight.bold);
        line-height: theme(digitv2.lineHeight.lineheight1);
    
        @media (max-aspect-ratio: 9/16) {
          /* Media query for mobile */
          font-size: theme(digitv2.fontSize.heading-s.mobile);
        }
    
        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
          /* Media query for tablets */
          font-size: theme(digitv2.fontSize.heading-s.tablet);
        }
    
        @media (min-aspect-ratio: 3/4) {
          /* Media query for desktop */
          font-size: theme(digitv2.fontSize.heading-s.desktop);
        }
        color: theme(digitv2.lightTheme.text-secondary);
      }

      svg {
        flex-shrink: 0;
      }
    }

    .digit-upload-and-download-button {
      @apply flex-wrap;
      display: flex !important;
      gap: theme(digitv2.spacers.spacer4);
      margin-left: auto;
      margin-right: theme(digitv2.spacers.spacer6);

      &.error-card{
        margin-right: theme(digitv2.spacers.spacer0);
      }
    }

    .digit-uploadWidget-close-icon {
      @apply absolute top-0 right-0 w-6 h-6 items-center cursor-pointer;
      background: theme(digitv2.lightTheme.generic-background);
      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
      display: flex !important;
      justify-content: center;
      border-top: none;
      border-right: none;

      svg {
        flex-shrink: 0;
      }
    }

    &.error {
      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);

      .digit-uploadWidget-close-icon {
        background: theme(digitv2.lightTheme.alert-error);
        border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
        border-top: none;
        border-right: none;
      }

      .uploaded-file-container-sub {

        .uploaded-file-details {
          @apply flex-col;
          color: theme(digitv2.lightTheme.alert-error);
          display: flex;
          gap: theme(digitv2.spacers.spacer1);
        }
      }

      .uploadWidget-error-card {
        @apply w-full max-w-full;
        margin: theme(digitv2.spacers.spacer0);
      }
    }
  }

  .image-background {
    @apply fixed top-0 left-0 right-0 bottom-0 w-full;
    height: 100vh;
    background-color: theme(digitv2.lightTheme.text-color-primary);
  }

  .digit-image-uploader {
    @apply flex-col items-center cursor-pointer;
    display: flex;
    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
    background-color: transparent;
    justify-content: center;
    gap: 0.188rem;
    padding: theme(digitv2.spacers.spacer10);

    width: 100%;

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      min-width: 18.75rem;
    }

    @media (max-width: 30rem) {
      min-width: 17.938rem;
    }

    @media (min-width: 48rem) {
      min-width: 18.75rem;
    }

    .upload-image-label {
      @extend .typography.body-xs;
      color: theme(digitv2.lightTheme.primary-1);
    }
  }

  .webcam-container {
    @apply fixed flex-col;
    z-index: 1001;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    gap: theme(digitv2.spacers.spacer6);
    background-color: theme(digitv2.lightTheme.paper-primary);
    border-radius: theme(digitv2.spacers.spacer1);
    padding: theme(digitv2.spacers.spacer6);

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      max-height: 31.25rem;
      max-width: 27.5rem;
      top:15%;
    }

    @media (min-width: 48rem) {
      max-width: 45rem;
      max-height: 28rem;
    }

    @media (max-width: 30rem) {
      max-width: 20.5rem;
      max-height: 39rem;
      top: 4%;
    }


    .video-stream {
      width: 100% !important;
      height: 100% !important;
      max-width: 100%;

      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
        max-height: 24.5rem;
      }

      @media (min-width: 48rem) {
        max-height: 17.875rem;
      }

      @media (max-width: 30rem) {
        max-height: 26rem;
      }

      video {
        border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
      }
    }

    .cancel-capture-button-wrap {
      gap: theme(digitv2.spacers.spacer6);
      margin-left: auto;

      @media (max-width: 30rem) {
        justify-content: space-between;
        margin-left: theme(digitv2.spacers.spacer0);
        flex-direction: column;

        button {
          @apply w-full;
        }
      }
    }
  }

  .capture-heading {
    @extend .typography.heading-m;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-m.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-m.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-m.desktop);
    }
    @apply items-center;
    color: #000000;
    display: flex;
    justify-content: space-between;
  }

  .react-doc-viewer {
    .image-render {
      background-color: transparent;
    }
  }

  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
    .digit-upload-image-drawer {
      @apply relative;
    }
  }

  @media (min-width: 48rem) {
    .digit-upload-image-drawer {
      @apply relative;
    }
  }

}

@keyframes slideInFromBottomUploader {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}


.digit-upload-file-composer-wrapper{
  display: flex;
  flex-direction: column;

  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
   gap:theme(digitv2.spacers.spacer5);
  }

  @media (max-width: 30rem) {
    gap:theme(digitv2.spacers.spacer4);
  }

  @media (min-width: 48rem) {
    gap:theme(digitv2.spacers.spacer6);
  }

  .upload-filecomposer-header{
    color: theme(digitv2.lightTheme.text-primary) !important;
  }

}