@use '../abstract' as *;
.upload-box {
  --p-header-text-color:    var(--color-neutral-70);
  --p-header-bg-color:      var(--color-neutral-10);

  --p-content-text-color:   var(--color-neutral-60);
  --p-content-bg-color:     var(--color-neutral-0);

  --p-border-color:         var(--color-neutral-10);

  overflow:hidden; min-inline-size:pxToRem(285);
  box-shadow:var(--shadow-small);
  border-radius:var(--border-radius-small);
  font-size:pxToRem(14); line-height:1;

  &-button {
    $size: #{pxToRem(20)};
    --p-icon-button-size:var(--icon-button-size, #{$size});

    inline-size:  var(--p-icon-button-size);
    block-size:   var(--p-icon-button-size);
    font-size:    var(--p-icon-button-size);
    transition:   var(--transition);

    line-height:1; text-align:center; flex-shrink:0; cursor:pointer;

    &.is-open { transform:rotate(180deg); }
    &.is-success { color:var(--config-color-success); }
  }
  &-header {
    display:flex; padding:pxToRem(16);
    color:hsl(var(--p-header-text-color)); background-color:hsl(var(--p-header-bg-color));
    .upload-box-button { margin-inline-start:pxToRem(16); }
  }
  &-title {
    align-self:center; margin-inline-end:auto;
    .text { text-transform:uppercase; letter-spacing:0.12em; }
    .amount {
      &::before { content:"("; }
      &::after { content:")"; }
    }
  }
  &-content {
    @include scroll;
    background-color:hsl(var(--p-content-bg-color)); color:hsl(var(--p-content-text-color));
    block-size:0; overflow:auto;
    transition:var(--transition);
    &.is-open {block-size:auto; max-block-size:pxToRem(218); /* consider to change to rem */}
  }
  &-list { }
  &-item {
    display:flex; align-items:center; gap:pxToRem(16); padding:pxToRem(16) pxToRem(24);
    .file-name { @include trim; line-height:1.2; align-self:center; margin-inline-end:auto; }
    &-button { align-self:center; margin-inline-start:pxToRem(16);}
    .icon-check { color:hsl(var(--color-text-success)); }
    &:not(:last-child) { border-bottom:solid pxToRem(1) hsl(var(--p-border-color)); }
  }

  /* states */
  &.is-float {
    position:fixed;
    @media #{$break1} { inset-inline:pxToRem(16); inset-block-end:pxToRem(20); }
    @media #{$break2open} { inset-inline-end:pxToRem(24); inset-block-end:pxToRem(24); }
  }

  /* dark theme */
  #{$theme-dark} &{
    --p-header-text-color:  var(--color-neutral-20);
    --p-header-bg-color:    var(--color-neutral-100);

    --p-content-text-color: var(--color-neutral-20);
    --p-content-bg-color:   var(--color-neutral-90);

    --p-border-color:       var(--color-neutral-85);
  }
}