webapp/src/components/Editor/UploadModalContent/UploadModalContent.module.scss

.uploadModalContent {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 33px;
  font-size: 18px;
  min-height: 335px;

  .dropZone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    gap: 24px;
    padding: 24px;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
    width: 100%;
    position: relative;
    background-color: #e9e9ee;
    overflow: hidden;

    &.active {
      background-color: #e9e9ee;

      &::after {
        content: '';
        top: 0;
        transform: translateX(100%);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        animation: slide 1.8s infinite;
        background: linear-gradient(
          to right,
          rgba(#fff, 0) 0%,
          rgba(#fff, 0.8) 50%,
          rgb(128 186 232 / 0%) 99%,
          rgb(125 185 232 / 0%) 100%
        );
      }
    }

    .text {
      position: relative;
      z-index: 1;

      &.error {
        color: red;
      }
    }

    .icon {
      width: 64px;
      height: 64px;
      position: relative;
      z-index: 1;
    }

    .input {
      display: none;
    }
  }

  .uploadButton {
    margin: 24px 0;
    width: 100%;
    max-width: 233px;
    text-align: center !important;
  }

  .error {
    color: red;
  }

  .formHolder {
    width: 100%;
    margin-top: 24px;
  }
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}