@import 'part:@lyra/base/theme/variables-style';

@keyframes finish {
  0% {
    stroke-width: 1em;
  }

  10% {
    stroke-width: 0.5em;
  }

  90% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(2);
    opacity: 0;
    stroke-width: 1px;
  }
}

.root {
  width: 100%;
  display: block;
}

.completed {
  composes: root;
}

.unCompleted {
  composes: root;
}

.svg {
  display: block;
  margin: 0 auto;
}

.background {
  stroke: var(--black);
  stroke-width: 0.5em;
  opacity: 0.05;
  fill: none;
  transition: opacity 0.2s linear;

  @nest .completed & {
    opacity: 0;
  }
}

.foreground {
  transform-origin: center center;
  stroke: var(--black);
  fill: none;
  stroke-width: 0.5em;
  transition: stroke 0.2s linear;

  @nest .completed & {
    stroke: var(--state-success-color);
    animation-name: finish;
    animation-delay: 0.2s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  @nest .hundredPercent & {
    stroke: var(--state-success-color);
  }
}

.text {
  font-weight: 400;
  font-size: 1em;
  fill: inherit;
  transform-origin: center center;

  @nest .completed & {
    animation-name: finish;
    animation-delay: 0.2s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}

.percent {
  composes: text;
  font-weight: 400;
}

.status {
  composes: text;
  fill: inherit;
  font-weight: 400;
  font-size: 0.8em;

  @nest .completed & {
    animation-name: finish;
    animation-delay: 0.2s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}