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

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

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

.fvl-image-button-wrapper {
  @apply inline-flex w-full relative;
}

.fvl-image-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-image-hide-file-name {
  .fvl-image-button {
    @apply rounded;
  }
}

.fvl-image-button-wrapper.fvl-image-hide-file-name {
  @apply w-auto mr-auto;
}

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

.fvl-image-button:hover {
  @apply bg-teal-500 border-teal-500;
}

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

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

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

.fvl-image-group {
  @apply flex;
}

.fvl-image-group .fvl-image-preview {
  @apply relative flex justify-center h-10 w-10 self-center bg-gray-200 rounded-full overflow-hidden mr-4 shrink-0;
}

.fvl-image-group .fvl-image-preview img {
  @apply h-full w-full;
}

@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);
  }
}