character-counter:not(:defined) {
  display: none;
}

character-counter {
  --counter-diameter: 2rem;
  --counter-stroke-width: 4;
  align-items: center;
  gap: .5rem;
  display: inline-flex;

  & .counter-wrapper {
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    display: flex;

    & > * {
      min-width: 2rem;
    }
  }

  & .remaining {
    text-align: right;
    font-weight: 400;
  }

  &[data-hide-count] .remaining {
    visibility: hidden;
  }

  & .circle-container {
    width: var(--counter-diameter);
    height: var(--counter-diameter);
    transform: rotate(-90deg);
  }

  & .track {
    fill: none;
    stroke: var(--counter-track-color, #e0e0e0);
    stroke-width: var(--counter-stroke-width);
  }

  & .progress {
    fill: none;
    stroke: var(--counter-normal-color, #1d9bf0);
    stroke-width: var(--counter-stroke-width);
    stroke-linecap: round;
    stroke-dasharray: var(--circumference);
    stroke-dashoffset: var(--offset);
    transition: stroke-dashoffset .15s ease-out, stroke .15s ease-out;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &[data-over-limit] {
    & .remaining {
      color: var(--counter-warning-color, #f4212e);
    }

    & .progress {
      stroke: var(--counter-warning-color, #f4212e);
    }
  }
}