:where(:root),
:where(:host) {
  --vaadin-upload-background: var(--aura-surface-color) padding-box;
  --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
  --vaadin-upload-padding: var(--vaadin-padding-s);
  --vaadin-upload-file-list-divider-color: var(--vaadin-border-color-secondary);
  --vaadin-upload-file-list-divider-width: 1px;
  --vaadin-upload-file-error-color: var(--vaadin-text-color-secondary);
  --vaadin-upload-file-warning-color: var(--aura-red);
  --vaadin-upload-file-done-color: var(--aura-green);
  --vaadin-upload-file-name-font-weight: var(--aura-font-weight-medium);
  --vaadin-upload-file-padding: var(--vaadin-padding-m) var(--vaadin-padding-s);
  --vaadin-upload-file-gap: 0 var(--vaadin-gap-s);
  --vaadin-upload-file-button-border-width: 0;
  --vaadin-upload-file-status-font-size: var(--aura-font-size-s);
  --vaadin-upload-file-status-line-height: var(--aura-line-height-s);
  --vaadin-upload-file-error-font-size: var(--aura-font-size-s);
  --vaadin-upload-file-error-line-height: var(--aura-line-height-s);
  --vaadin-upload-drop-label-color: var(--vaadin-text-color-secondary);
  --vaadin-upload-drop-label-font-weight: var(--aura-font-weight-medium);
}

vaadin-upload {
  --_divider-offset-start: calc(var(--vaadin-padding-s) + var(--vaadin-icon-size, 1lh) + var(--vaadin-gap-s));
  --_divider-offset-end: var(--vaadin-padding-s);
}

vaadin-upload::part(primary-buttons) {
  flex-wrap: wrap;
  gap: var(--vaadin-gap-s) var(--vaadin-gap-m);
}

vaadin-upload:not([nodrop]) vaadin-button[slot='add-button'] {
  flex-grow: 1;
}

vaadin-upload::part(drop-label) {
  flex-grow: 1000;
  padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
  min-width: fit-content;
  margin-inline-start: calc(var(--vaadin-upload-padding) * -1);
}

vaadin-upload[dragover-valid] {
  outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
  outline-offset: -1px;
}

vaadin-upload-file-list li {
  margin-inline: var(--_divider-offset-start) var(--_divider-offset-end);

  &:first-child {
    margin-top: var(--vaadin-upload-gap, 0);
  }
}

vaadin-upload:not([theme~='no-border']) > vaadin-upload-file-list:has(> ul > li) {
  border-top: 1px solid var(--vaadin-border-color-secondary);
  margin: calc(var(--vaadin-upload-padding) * -1);
  margin-top: var(--vaadin-upload-padding);
}

vaadin-upload-file {
  --vaadin-icon-visual-size: 0.75lh;
  border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
  margin-inline: calc(var(--_divider-offset-start, 0) * -1) calc(var(--_divider-offset-end, 0) * -1);

  &:not([complete], [error])::part(done-icon)::before {
    background: var(--vaadin-border-color-secondary);
  }

  &::part(start-button),
  &::part(remove-button),
  &::part(retry-button) {
    color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color-secondary));
    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
  }

  vaadin-progress-bar {
    --vaadin-progress-bar-height: var(--vaadin-gap-xs);
    margin-top: var(--vaadin-gap-xs);
  }

  &:not([error])::part(status) {
    max-height: 2lh;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &[complete]::part(status) {
    height: 1lh; /* ensure some height to transition from */
    visibility: hidden;
    transition: 200ms max-height;
    max-height: 0;
  }

  &[complete] vaadin-progress-bar {
    visibility: hidden;
    transition: 200ms height;
    --vaadin-progress-bar-height: 0;
    margin-top: 0;
  }
}

vaadin-upload-file[theme~='thumbnails'] {
  --aura-surface-level: 3;
  --vaadin-upload-file-padding: var(--vaadin-padding-s);
  --vaadin-upload-file-done-color: var(--aura-accent-color);
  --vaadin-spinner-size: 1em;
  background: var(--aura-surface-color) padding-box;
  border: 1px solid light-dark(var(--vaadin-border-color-secondary), transparent);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid light-dark(transparent, var(--vaadin-border-color-secondary));
    pointer-events: none;
  }

  &::part(done-icon),
  &::part(warning-icon) {
    --vaadin-icon-visual-size: 1lh;
    background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
  }

  &::part(commands) {
    gap: 0;
  }

  &::part(start-button),
  &::part(retry-button),
  &::part(remove-button) {
    --vaadin-icon-visual-size: 0.8lh;
  }

  &[error] {
    --aura-accent-color-light: var(--aura-red);
    --aura-accent-color-dark: var(--aura-red);
  }

  & vaadin-progress-bar {
    margin-top: 0;
    align-self: end;
    --vaadin-progress-bar-height: 2px;
    --vaadin-border-color-secondary: transparent;

    &:not([indeterminate]) {
      opacity: 1;
    }
  }
}

vaadin-upload[theme~='no-border'] {
  --vaadin-upload-padding: 0;
  --vaadin-upload-background: transparent;
  --vaadin-upload-border-width: 0;
  --vaadin-upload-file-list-divider-width: 0;
  --vaadin-upload-file-padding: var(--vaadin-padding-m);
  --_divider-offset-start: 0px;
  --_divider-offset-end: 0px;
  outline-offset: 2px;

  > vaadin-upload-file-list::part(list) {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
  }

  > vaadin-upload-file-list li:first-child {
    margin-top: var(--vaadin-gap-s);
  }

  vaadin-upload-file {
    background: var(--aura-surface-color) padding-box;
    border: 1px solid var(--vaadin-border-color-secondary);
  }
}

@media (any-hover: hover) {
  vaadin-upload-file::part(start-button):hover,
  vaadin-upload-file::part(remove-button):hover,
  vaadin-upload-file::part(retry-button):hover {
    --vaadin-upload-file-button-text-color: var(--vaadin-text-color);
  }
}