.fvl-multi-file-wrapper {
  @apply relative p-2;
}

.fvl-form-drag-over>.fvl-multi-file-wrapper>.fvl-multi-file-button-wrapper {
  animation: pulse 1.4s infinite;
  @apply rounded;
}

.fvl-multi-file-label {
  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 cursor-pointer;
}

.fvl-multi-file-button-wrapper {
  @apply inline-flex w-full;
}

.fvl-multi-file-button {
  @apply inline-flex items-center font-bold text-white bg-teal-600 border border-teal-600 py-3 px-4 leading-tight rounded-l cursor-pointer whitespace-nowrap;
}

.fvl-multi-file-wrapper:focus-within .fvl-multi-file-button-wrapper {
  box-shadow: 0 0 0 3px rgba(218, 225, 231, 0.8);
  @apply rounded;
}

.fvl-multi-file-wrapper:hover .fvl-multi-file-button {
  @apply bg-teal-500 border-teal-500;
}

.fvl-multi-file-name {
  @apply bg-gray-200 text-gray-700 border border-gray-200 flex-grow py-3 px-4 leading-tight rounded-r truncate;
}

.fvl-multi-file-list {
  @apply bg-gray-200 text-gray-700 border border-gray-200 flex-grow py-2 px-4 my-2 leading-tight rounded truncate;
}

.fvl-multi-file-remove {
  @apply float-right text-red-400 w-4 h-4 pt-px;
}

.fvl-multi-file-remove svg {
  @apply stroke-current;
}

.fvl-multi-file-remove:hover {
  @apply cursor-pointer;
}

.fvl-multi-file {
  @apply appearance-none absolute opacity-0 left-0 py-3 px-4 w-full cursor-pointer;
}

.fvl-multi-file::-webkit-file-upload-button {
  cursor: pointer;
  visibility: hidden;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #38a89d;
  }

  70% {
    box-shadow: 0 0 0px 6px rgba(0, 0, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}