.upload-box {
  --p-header-text-color:var(--config-color-background-fade);
  --p-header-bg-color:var(--config-color-normal);

  --p-content-text-color:var(--config-color-normal);
  --p-content-bg-color:var(--config-color-background-fade);

  --p-border-color:var(--config-modal-note-border);


  --box-shadow:0 10px 10px rgba(0, 0, 0, 0.05);
  --border-radius:6px;
  --transition:0.2s;

  position:fixed; z-index:1; overflow:hidden; min-width:285px;
  box-shadow:var(--box-shadow);
  border-radius:var(--border-radius);
  font-size:14px; line-height:1;
  *{all:unset; display:revert;}
  &-header {
    display:flex; padding:16px; padding-inline-end:21px;
    color:var(--p-header-text-color); background-color:var(--p-header-bg-color);
    .icon-button { margin-inline-start:16px; }
  }
  &-title {
    align-self:center; margin-inline-end:auto; margin-block-end:0;
    .amount {
      &::before { content:"("; }
      &::after { content:")"; }
    }
  }
  &-content {
    background-color:var(--p-content-bg-color); color:var(--p-content-text-color);
    height:0; overflow:auto;
    transition:var(--transition);
    &.is-open {height:200px; /* consider to change to rem */}
  }
  &-list {}
  &-item {
    display:flex; align-items:center; padding:13px 20px;
    .file-name {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; align-self:center; margin-inline-end:auto; line-height:normal; }
    .icon-button{ align-self:center; margin-inline-start:16px;}
    .pill{margin-inline-start:8px;}
    &:not(:last-child) { border-bottom:solid 1px var(--p-border-color); }
  }

  /* responsive */
  @media @phones { inset-inline:16px; inset-block-end:20px; }
  @media @tablets, @desktops { max-width:285px; inset-inline-end:24px; inset-block-end:24px; }

  /* dark theme */
  :root .theme-dark &{
    --p-header-text-color:#fff;
    --p-header-bg-color:var(--config-color-background-dark);
  }
}

.upload-image {
  @upload-image-size-default: 40px;
  --p-upload-image-size:var(--upload-image-size, @upload-image-size-default);
  --p-upload-bg-color:var(--config-color-fade-super);
  --p-upload-icon-color:var(--config-color-fade);

  position:relative; display:grid; place-content:center; flex-shrink:0;
  width:var(--p-upload-image-size);
  height:var(--p-upload-image-size);
  background-color:var(--p-upload-bg-color);
  color:var(--p-upload-icon-color);
  border-radius:50%;

  .icon{position:relative; z-index:20;}
  .progress {
    --progress:var(--progress-value, 0);
    --zero-value: 0 0% 0% / 0%;
    position:absolute; z-index:10; inset:0; border-radius:50%;
    background:
            ~"radial-gradient(
                    var(--p-upload-bg-color) 0%,
                    var(--p-upload-bg-color) 64%,
                    transparent 64.01%,
                    transparent 100%),

            conic-gradient(
                    hsl(194 66% 50%) 0%,
                    hsl(97 66% 50%) calc(var(--progress) * 1%),
                    hsl(var(--zero-value)) calc(var(--progress) * 1%),
                    hsl(var(--zero-value)) 100%)";
  }
  &.is-finished {
    .progress{ display:none; }
  }
  /* dark theme */
  :root .theme-dark &{
    --p-upload-bg-color:var(--config-color-background-dark);
    --p-upload-icon-color:var(--config-color-focus);
  }
}

[data-views-current]:not([data-views-current="0"]):not([data-views-current="1"]) .upload-box {
  margin-right: 4rem;
}

.icon-button {
  --p-icon-button-size:var(--icon-button-size, 20px);

  width:var(--p-icon-button-size);
  height:var(--p-icon-button-size);
  font-size:var(--p-icon-button-size);
  transition:0.2s; line-height:1; text-align:center; flex-shrink:0; cursor:pointer;
  >*::before{margin:0;}
  &.is-open { transform:rotate(180deg); }
  &.is-success { color:var(--config-color-success); }
  &:focus, &:hover { background-color:unset; }
  &:focus-visible { outline:dashed 1px var(--config-color-primary); }
}