:host {
  /* Theme/Color */
  --bg-color: var(--jb-file-input-bg-color, var(--jb-neutral-10));
  --bg-color-hover: var(--jb-file-input-bg-color-hover, oklch(from var(--bg-color) calc(l + 0.07) calc(c + 0.07) h));
  --bg-color-pressed: var(--jb-file-input-bg-color-pressed, oklch(from var(--bg-color) calc(l - 0.1) calc(c - 0.05) h));
  --border-color-error: var(--jb-file-input-border-color-error, var(--jb-error));
  --bg-color-error: var(--jb-file-input-bg-color-error, var(--jb-neutral-10));
  --icon-base-color: var(--jb-file-input-icon-base-color, var(--jb-neutral));
  --icon-primary-color: var(--jb-file-input-icon-primary-color, var(--jb-primary));
  --placeholder-title-color: var(--jb-file-input-placeholder-title-color, var(--jb-neutral));
  --file-name-color: var(--jb-file-input-file-name-color, var(--jb-neutral));
  --loading-bg: var(--jb-file-input-loading-bg, linear-gradient(90deg, var(--jb-primary-l), var(--jb-secondary-l)));
  --upload-loading-color: var(--jb-file-input-loading-color, var(--jb-primary-subtle));
  --overlay-bg-color: var(--jb-file-input-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));
  --reselect-button-color: var(--jb-file-input-reselect-button-color, var(--jb-white));

  /* Size */
  --border-radius: var(--jb-file-input-border-radius, var(--jb-radius-xl));
  --padding: var(--jb-file-input-padding, 1rem);
  --overlay-button-height-sm: var(--jb-file-input-overlay-button-height-sm, 2rem);
  --overlay-button-height-xs: var(--jb-file-input-overlay-button-height-xs, 1.5rem);
  --overlay-button-padding-sm: var(--jb-file-input-overlay-button-padding-sm, 0.25rem 0.5rem);
  --overlay-button-padding-xs: var(--jb-file-input-overlay-button-padding-xs, 0.125rem 0.25rem);
  --overlay-button-border-radius-sm: var(--jb-file-input-overlay-button-border-radius-sm, var(--jb-radius-sm));
  --overlay-button-border-radius-xs: var(--jb-file-input-overlay-button-border-radius-xs, var(--jb-radius-xs));
  --overlay-button-icon-size-sm: var(--jb-file-input-overlay-button-icon-size-sm, 1.25rem);
  --overlay-button-icon-size-xs: var(--jb-file-input-overlay-button-icon-size-xs, 1rem);
  --download-button-display: var(--jb-file-input-download-button-display, block);
}

.jb-file-input-web-component {

  /* Size */
  @container (max-height:3rem) {
    --border-radius: var(--jb-file-input-border-radius, var(--jb-radius));
  }
  @container (max-height:2rem) {
    --border-radius: var(--jb-file-input-border-radius, var(--jb-radius-sm));
  }
}

:host(:state(empty)) {
  --display-placeholder: var(--jb-file-input-display-placeholder-empty, block);
  --display-file: var(--jb-file-input-display-file-empty, none);
  --display-upload: var(--jb-file-input-display-upload-empty, none);
}

:host(:state(fill)) {
  --display-placeholder: var(--jb-file-input-display-placeholder-fill, none);
  --display-file: var(--jb-file-input-display-file-fill, block);
  --display-upload: var(--jb-file-input-display-upload-fill, none);
}

:host([uploading]) {
  --display-placeholder: var(--jb-file-input-display-placeholder-uploading, none);
  --display-file: var(--jb-file-input-display-file-uploading, none);
  --display-upload: var(--jb-file-input-display-upload-uploading, block);
}
:host([hide-download]) {
  --download-button-display: var(--jb-file-input-download-button-display-hidden, none);
}