.donut-background {
  stroke: var(--color-secondary);
}

.donut-filled {
  stroke: var(--color-primary);
  rotate: -90deg;
  transform-origin: center;
  transition: stroke 0.3s ease;
}

.donut-filled.text-error {
  stroke: var(--color-error);
}

.donut-ring {
  fill: transparent;
}

.donut-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: 0;
  margin: 0;

  li {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    inline-size: max-content;

    &::before {
      content: "";
      inline-size: 1rem;
      block-size: 1rem;
      border-radius: 4px;
      display: inline-block;
      flex-shrink: 0;
    }

    &.empty-legend::before {
      background-color: var(--color-secondary);
    }

    &.filled-legend {
      &::before {
        background-color: var(--color-primary);
      }

      &.text-error {
        color: var(--color-error);
        font-weight: 600;

        &::before {
          background-color: var(--color-error);
        }
      }
    }
  }
}

.donut-filled.text-error {
  stroke: var(--color-error) !important;
  stroke-dasharray: 100 100;
}