@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-circle-size: 112px;
  --xzx-circle-color: var(--xzx-color-primary);
  --xzx-circle-layer-color: var(--xzx-gray-3);
  --xzx-circle-text-color: var(--xzx-text-color);
  --xzx-circle-text-font-weight: var(--xzx-font-bold);
  --xzx-circle-text-font-size: 20px;
  --xzx-circle-text-line-height: 26px;
}

@include b(circle) {
  position: relative;
  display: inline-block;
  width: var(--xzx-circle-size);
  height: var(--xzx-circle-size);
  text-align: center;

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

  &__layer {
    stroke: var(--xzx-circle-layer-color);
  }

  &__hover {
    fill: none;
    stroke: var(--xzx-circle-color);
    stroke-linecap: round;
  }

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