.nano-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);

  .nano-progress__bar {
    display: block;
    width: 100%;
    height: 0.625rem;
    border-radius: var(--radius-full);
    border: none;
    overflow: hidden;
    appearance: none;
    background-color: hsl(var(--color-muted));

    &::-webkit-progress-bar {
      background-color: hsl(var(--color-muted));
      border-radius: var(--radius-full);
    }

    &::-webkit-progress-value {
      background-color: hsl(var(--color-primary));
      border-radius: var(--radius-full);
      transition: width var(--duration-slow) var(--ease-default);
    }

    &::-moz-progress-bar {
      background-color: hsl(var(--color-primary));
      border-radius: var(--radius-full);
    }
  }

  .nano-progress__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: hsl(var(--color-muted-foreground));
    text-align: right;
  }

  &.nano-progress--success {
    .nano-progress__bar::-webkit-progress-value {
      background-color: hsl(var(--color-success));
    }

    .nano-progress__bar::-moz-progress-bar {
      background-color: hsl(var(--color-success));
    }
  }

  &.nano-progress--warning {
    .nano-progress__bar::-webkit-progress-value {
      background-color: hsl(var(--color-warning));
    }

    .nano-progress__bar::-moz-progress-bar {
      background-color: hsl(var(--color-warning));
    }
  }

  &.nano-progress--destructive {
    .nano-progress__bar::-webkit-progress-value {
      background-color: hsl(var(--color-destructive));
    }

    .nano-progress__bar::-moz-progress-bar {
      background-color: hsl(var(--color-destructive));
    }
  }
}