.file-drop-source {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.file-drop-zone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 5.25rem;
  margin-top: 0.45rem;
  padding: 0.85rem 1rem;
  border: 1px dashed color-mix(in srgb, #e5ad3b 58%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, #e5ad3b 7%, rgba(7, 12, 9, 0.94));
  color: inherit;
  cursor: default;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.file-drop-zone:focus-visible,
.file-drop-zone.is-dragging {
  outline: none;
  border-color: #f2c45e;
  background: color-mix(in srgb, #e5ad3b 15%, rgba(7, 12, 9, 0.96));
  box-shadow: 0 0 0 3px rgba(229, 173, 59, 0.16);
}

.file-drop-zone.is-dragging {
  transform: translateY(-1px);
}

.file-drop-icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgba(229, 173, 59, 0.35);
  border-radius: 0.7rem;
  background: rgba(229, 173, 59, 0.1);
  color: #f2c45e;
  font-size: 1.25rem;
}

.file-drop-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.file-drop-copy strong {
  color: inherit;
  font-size: 0.9rem;
}

.file-drop-copy span,
.file-drop-status {
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.file-drop-status {
  grid-column: 2 / -1;
  overflow-wrap: anywhere;
}

.file-drop-status.is-error {
  color: #ff8f86;
}

.file-drop-browse {
  min-height: 2.35rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(229, 173, 59, 0.58);
  border-radius: 0.55rem;
  background: rgba(229, 173, 59, 0.12);
  color: #f4d484;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.file-drop-browse:hover,
.file-drop-browse:focus-visible {
  background: rgba(229, 173, 59, 0.22);
  outline: none;
}

@media (max-width: 680px) {
  .file-drop-zone {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .file-drop-browse {
    grid-column: 1 / -1;
    width: 100%;
  }

  .file-drop-status {
    grid-column: 1 / -1;
  }
}