.tafb-upload-progress {
  --tafb-upload-progress: 0%;
  --tafb-upload-colour: #bd8b45;
  position: fixed;
  z-index: 10030;
  top: 0;
  left: 0;
  width: var(--tafb-upload-width, 0);
  height: var(--tafb-upload-height, 0);
  border-radius: var(--tafb-upload-radius, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(var(--tafb-upload-left, 0), var(--tafb-upload-top, 0), 0);
  transition: opacity 180ms ease;
}

.tafb-upload-progress.is-visible {
  opacity: 1;
  visibility: visible;
}

.tafb-upload-progress::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(from -90deg, var(--tafb-upload-colour) var(--tafb-upload-progress), rgba(255, 255, 255, .38) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 2px 5px rgba(23, 63, 49, .2));
}

.tafb-upload-progress__status {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 32px);
  min-height: 28px;
  padding: 6px 9px 6px 11px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  color: #fffdf9;
  background: rgba(23, 63, 49, .91);
  box-shadow: 0 8px 22px rgba(23, 34, 29, .24);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.tafb-upload-progress__percent {
  min-width: 29px;
  color: #f3e5ca;
  text-align: right;
  font-size: 10px;
}

.tafb-upload-progress[data-state="complete"] {
  --tafb-upload-colour: #45a76f;
}

.tafb-upload-progress[data-state="error"] {
  --tafb-upload-colour: #d96f4d;
}

.tafb-upload-progress[data-state="complete"] .tafb-upload-progress__status {
  background: rgba(23, 63, 49, .95);
}

.tafb-upload-progress[data-state="error"] .tafb-upload-progress__status {
  background: rgba(112, 50, 35, .95);
}

.tafb-upload-progress.is-compact::before {
  display: none;
}

.tafb-upload-progress.is-compact .tafb-upload-progress__status {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

@media (max-width: 390px) {
  .tafb-upload-progress__status {
    gap: 5px;
    min-height: 26px;
    padding: 5px 8px 5px 9px;
    font-size: 8px;
  }

  .tafb-upload-progress__percent {
    min-width: 26px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tafb-upload-progress {
    transition: none;
  }
}