// UPLOAD TOGGLE
.#{$n}-upload-toggle-wrapper {
  width: 0;
  height: 100%;
  overflow: visible;
  transition: width $transition;
}

.#{$n}-upload-toggle-wrapper.#{$n}-transition--in {
  width: $buttonsize;
}

.#{$n}-upload-toggle {
  display: flex;
  flex: 0 0 $buttonsize;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: $buttonsize;
  height: $buttonsize;
  padding: 0;
  transform: translateX(-100%);
  transition:
    transform $transition,
    opacity $transition;
  border-radius: $borderradius-small;
  opacity: 0;
  color: transparent;
  font-size: 0;
  line-height: 1;
  text-align: center;
}

.#{$n}-upload-toggle-wrapper.#{$n}-transition--in .#{$n}-upload-toggle {
  transform: translateX(0%);
  opacity: 1;
}

.#{$n}-upload-toggle .#{$n}-icon {
  flex: 0 0 $iconsize;
  width: $iconsize;
  height: $iconsize;
}

.#{$n}-upload-toggle .#{$n}-icon svg {
  width: 100%;
  height: 100%;
}

// UPLOAD DIALOG
.#{$n}-upload {
  width: 100%;
  padding: $spacer * 0.5;
}

.#{$n}-upload-form {
  display: flex;
  flex-direction: column;
  gap: $spacer * 0.5;
}

.#{$n}-upload__container {
  display: flex;
  flex-direction: column;
  gap: $spacer * 0.5;
  width: 100%;
}

.#{$n}-upload__visible-label--text {
  display: block;
  width: 100%;
  font-size: $fontsize-default;
  font-weight: $fontweight-bold;
}

.#{$n}-upload__content-hint {
  display: block;
  width: 100%;
  font-size: $fontsize-small;
}

.#{$n}-file-upload {
  width: 100%;
  max-width: 100%;
  border: 1px solid $interaction;
  border-radius: $borderradius-small;
}

.#{$n}-file-upload.#{$n}-focus-within:has(.#{$n}-upload__input:focus-visible) {
  outline: 1px dotted #212121;
  outline: 1px auto -webkit-focus-ring-color;
}

// VISUALLY HIDDEN
.#{$n}-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.#{$n}-upload__label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: $spacer * 0.5;
  width: 100%;
  padding: $spacer * 0.5;
  color: $interaction;
  text-align: left;
}

.#{$n}-upload__label .#{$n}-icon {
  flex: 0 0 $iconsize-large;
  width: $iconsize-large;
  height: $iconsize-large;
}

.#{$n}-upload__label .#{$n}-icon path {
  fill: currentcolor;
}

.#{$n}-upload__label--text {
  display: block;
  flex: 1 1 100%;
  max-width: 100%;
  color: inherit;
  font-size: $fontsize-medium;
  font-weight: $fontweight-bold;
}

.#{$n}-upload__output {
  display: block;
  flex: 1 1 100%;
  max-width: 100%;
  color: $brand1;
  font-size: $fontsize-small;
  word-break: break-all;
}

.#{$n}-upload .#{$n}-button--primary {
  text-align: center;
}

.#{$n}-upload__button-container {
  display: flex;
  flex: 0 0 100%;
  justify-content: flex-end;
  gap: $spacer * 0.25;
}

.#{$n}-upload__cancel {
  padding: $spacer * 0.5;
}

// PROGRESS
.#{$n}-progress_container {
  display: flex;
  flex-direction: column;
  gap: $spacer * 0.5;
}

.#{$n}-progress__text {
  display: flex;
  align-items: flex-end;
  gap: $spacer * 0.5;
  justify-content: space-between;
}

.#{$n}-progress__text--file-name {
  overflow: hidden;
  font-size: $fontsize-medium;
  font-weight: $fontweight-bold;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.#{$n}-progress__text--percentage {
  flex: 0 0 auto;
  color: $grey-d;
  font-size: $fontsize-medium;
  line-height: 1;
}

.#{$n}-progress__bar {
  appearance: none;
  width: 100%;
  border-radius: $borderradius-small;
  background: $grey-a;

  &::-webkit-progress-bar {
    border-radius: $borderradius-small;
    background: $grey-a;
  }

  &::-webkit-progress-value {
    border-radius: $borderradius-small;
    background-color: $interaction;
  }

  &::-moz-progress-bar {
    background-color: $interaction;
  }
}