@import '../style/var';

.van-circle {
  position: relative;
  text-align: center;
  display: inline-block;

  svg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  &__layer {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 3140;
    stroke-dashoffset: 3140;
    transform: rotate(90deg);
    // should not use transform-origin: center
    // that will cause incorrect style in android devices
    transform-origin: 530px 530px;
  }

  &__text {
    top: 50%;
    left: 0;
    width: 100%;
    color: @circle-text-color;
    position: absolute;
    transform: translateY(-50%);
  }
}