/* Variants */
/* Size-related values: the Figma file-upload/dropzone component tokens */
/* The border is drawn inside the Figma frame, so it is taken off the padding */
/* Illustration of the md size: three stacked cards, 110 x 77 in Figma */
nv-dropzone:focus, nv-dropzone:focus-within {
  outline: none;
}
nv-dropzone:focus-visible, nv-dropzone:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-dropzone {
  display: block;
}
nv-dropzone > .zone {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  border: 1px dashed var(--color-content-medium-border);
  background: var(--color-level-05-background);
  color: var(--color-content-high-text);
  text-align: center;
  cursor: pointer;
}
nv-dropzone > .zone > .input {
  position: absolute;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
nv-dropzone > .zone > .visual {
  display: inline-flex;
  color: var(--color-content-medium-icon);
}
nv-dropzone > .zone > .visual .illustration {
  display: block;
  position: relative;
  width: 110px;
  height: 77px;
}
nv-dropzone > .zone > .visual .illustration > .card {
  position: absolute;
  box-sizing: border-box;
  width: 48px;
  height: 65px;
  border: 1px solid var(--color-content-low-border);
  border-radius: var(--radius-rounded);
  background: var(--color-level-00-background);
  box-shadow: 0px var(--shadow-y-axis-base-1, 1) var(--shadow-blur-base-1) var(--shadow-spread-base, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-base-2) var(--shadow-blur-base-2) var(--shadow-spread-base, 0) var(--shadow-color-opacity-2);
}
nv-dropzone > .zone > .visual .illustration > .card-left {
  top: 7px;
  left: 7px;
  transform: rotate(-15deg);
}
nv-dropzone > .zone > .visual .illustration > .card-right {
  top: 7px;
  left: 55px;
  transform: rotate(15deg);
}
nv-dropzone > .zone > .visual .illustration > .card-center {
  display: flex;
  top: 0;
  left: 31px;
  align-items: center;
  justify-content: center;
  color: var(--color-interaction-container-neutral-icon);
}
nv-dropzone > .zone > .instruction {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-sm);
}
nv-dropzone > .zone > .instruction > .browse {
  color: var(--color-interaction-link-high-text);
  text-decoration: underline;
  text-underline-position: from-font;
}
nv-dropzone > .zone > .helper {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-xs);
  color: var(--color-content-low-text);
}
nv-dropzone.drag-active > .zone {
  border-color: var(--color-interaction-container-branded-low-border-hover);
  background: var(--color-interaction-container-branded-low-background-hover);
  /* The illustration takes its Figma State=Hover look */
}
nv-dropzone.drag-active > .zone > .visual .illustration > .card {
  border-color: var(--color-interaction-container-neutral-border-active);
  box-shadow: none;
}
nv-dropzone.drag-active > .zone > .visual .illustration > .card-center {
  color: var(--color-interaction-container-neutral-icon-active);
}
nv-dropzone.disabled > .zone {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
nv-dropzone.size-sm {
  /* The host carries the radius too, for the focus ring */
  border-radius: var(--file-upload-dropzone-sm-radius);
}
nv-dropzone.size-sm > .zone {
  border-radius: var(--file-upload-dropzone-sm-radius);
  gap: var(--file-upload-dropzone-sm-gap-y);
  padding: calc(var(--file-upload-dropzone-sm-padding-top) - 1px) calc(var(--file-upload-dropzone-sm-padding-x) - 1px) calc(var(--file-upload-dropzone-sm-padding-bottom) - 1px);
}
nv-dropzone.size-md {
  /* The host carries the radius too, for the focus ring */
  border-radius: var(--file-upload-dropzone-md-radius);
}
nv-dropzone.size-md > .zone {
  border-radius: var(--file-upload-dropzone-md-radius);
  gap: var(--file-upload-dropzone-md-gap-y);
  padding: calc(var(--file-upload-dropzone-md-padding-top) - 1px) calc(var(--file-upload-dropzone-md-padding-x) - 1px) calc(var(--file-upload-dropzone-md-padding-bottom) - 1px);
}