:root {
  --rv-circle-size: 200px;
  --rv-circle-color: var(--rv-primary-color);
  --rv-circle-layer-color: var(--rv-white);
  --rv-circle-text-color: var(--rv-text-color);
  --rv-circle-text-font-weight: var(--rv-font-weight-bold);
  --rv-circle-text-font-size: var(--rv-font-size-md);
  --rv-circle-text-line-height: var(--rv-line-height-md);
}

.rv-circle {
  position: relative;
  display: inline-block;
  width: var(--rv-circle-size);
  height: var(--rv-circle-size);
  text-align: center;
}

.rv-circle svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.rv-circle__layer {
  stroke: var(--rv-circle-layer-color);
}

.rv-circle__hover {
  fill: none;
  stroke: var(--rv-circle-color);
  stroke-linecap: round;
}

.rv-circle__text {
  position: absolute;
  top: 50%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--rv-padding-base);
  color: var(--rv-circle-text-color);
  font-weight: var(--rv-circle-text-font-weight);
  font-size: var(--rv-circle-text-font-size);
  line-height: var(--rv-circle-text-line-height);
  transform: translateY(-50%);
}