@use "design";

.progressBarFill {
  background-color: design.$color-secondary;
  border-radius: 1000px;

  // # TODO => If we need more colors than success (hopefully won't?) then make this a mixin.
  &.successColor {
    background-color: design.$color-on-success-surface;
  }
}

.progressBarCheckmark {
  color: design.$color-secondary;
  background-color: design.$color-surface-variant;
  border: 2px solid design.$color-secondary;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  // # TODO => If we need more colors than success (hopefully won't?) then make this a mixin.
  &.successColor {
    color: design.$color-on-success-surface;
    border-color: design.$color-on-success-surface;
  }
}

.progressBar {
  &:not(.large) {
    --height: 14px;
  }

  &.large {
    --height: 22px;
  }

  display: flex;
  background: design.$color-surface-variant;
  height: var(--height);
  overflow: hidden;
  border-radius: 1000px;

  > div {
    width: var(--progress);
    min-width: var(--height); // Gets too squishy if narrower
  }

  & > .progressBarCheckmark {
    width: var(--height);
    margin-left: calc(var(--height) * -1);

    & > svg {
      width: calc(var(--height) / 2);
    }
  }
}

.pieChart {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  position: relative;

  width: 18px;
  height: 18px;

  color: design.$color-brand-primary;

  border-radius: 1000px;

  &:not(.isCompleted) {
    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      inset: 0;
      background: conic-gradient(design.$color-brand-primary calc(var(--progress) * 1%), #0000 0);
    }
  }

  &.isCompleted {
    background: design.$color-brand-primary;
    color: #fff;
    padding: 4px;
  }

  &::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background: design.$color-brand-primary;
    opacity: 0.2;
  }
}