@import '../../../styles/variables.scss';

.progress-ring {
  position: relative;
  flex-shrink: 0;

  &--sm {
    width: 64px;
    height: 64px;
  }

  &--lg {
    width: 80px;
    height: 80px;
  }

  &__track {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__inner {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    background: $card;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__pct {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--tk-font-cap);
    font-weight: 700;
    color: var(--tk-pri);
  }

  &__label {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--tk-font-micro);
    font-weight: 700;
    color: var(--tk-pri);
  }
}