@use "./variables" as *;

.#{$component-prefix}circle {
  position: relative;
  display: inline-block;
  width: $circle-width;
  height: $circle-height;
  text-align: center;

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

  &__hover {
    fill: none;
    stroke: $circle-hover-stroke;
    stroke-linecap: round;
  }

  &__layer {
    stroke: $circle-layer-stroke;
  }

  &__text {
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: $circle-text-padding;
    font-size: $circle-text-font-size;
    font-weight: $circle-text-font-weight;
    line-height: $circle-text-line-height;
    color: var(--circle-text-color, $circle-text-color);
    transform: translateY(-50%);
  }
}