.VideoUploader {
  margin: 2rem 0;

  .dropArea {
    border: 2px dashed rgba(38, 56, 217, 0.3);
    border-radius: 16px;
    color: #2638d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding: 24px;
    transition: background-color 0.3s ease-in-out;

    &.active {
      background-color: rgba(#2638d9, 0.3);

      &::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%
        );
      }
    }
  }

  .error {
    color: var(--danger-color);
    text-align: center;
    padding: 1rem;
  }

  .inputHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;

    .urlInput {
      display: block;
      width: unset;
      margin: auto;
      padding: 1rem 0;
      border: none;
      background: unset;
      font-size: 18px;
      min-width: 20em;
      text-align: center;
      border-bottom: 1px solid transparent;
      transition: all 0.35s ease-in-out;
      border-radius: 0;

      &::placeholder {
        color: #2638d9;
        font-weight: 500;
      }

      &:focus,
      &:active,
      &.hasError {
        outline: none;
        width: 100%;
        text-align: left;
        border-bottom-color: var(--default-color);
      }
    }
  }
}

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

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