.status-icon > svg {
  height: var(--size-32);
  width: var(--size-32);
}

.status-circle {
  .light {
    color: var(--color-contrast);
  }

  .dark {
    color: var(--color-content-primary);
  }

  &.warning,
  &.pending {
    background-color: var(--color-sentiment-warning);

    .status-icon {
      .np-theme-personal & {
        color: var(--color-dark);
      }
    }
  }

  &-sm {
    .status-icon > svg {
      height: var(--size-14);
      width: var(--size-14);

      @media (--screen-400-zoom) {
        width: var(--size-24);
        height: var(--size-24);
      }
    }
  }
}

.status-circle.negative,
.status-circle.error {
  background-color: var(--color-sentiment-negative);
}

.status-circle.neutral {
  background-color: var(--color-content-secondary);
}

.status-circle.positive,
.status-circle.success {
  background-color: var(--color-sentiment-positive);
}
