$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);
$font-weight-regular: var(
  --wds-font-weight-regular,
  var(--wsr-font-weight-regular, 400)
);
$label-color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));

.radar-chart {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  &__axis {
    stroke: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
    stroke-width: 2px;
  }

  &__axis-label {
    cursor: pointer;
    fill: $label-color;
  }

  &__axis-label--size-small {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-tiny,
      var(--wsr-text-font-size-tiny, 12px)
    );
    font-weight: $font-weight-regular;
    line-height: var(
      --wds-font-line-height-body-tiny,
      var(--wsr-text-line-height-tiny, 15px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    color: $label-color;
  }

  &__axis-label--size-large {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-small,
      var(--wsr-text-font-size-small, 14px)
    );
    font-weight: $font-weight-regular;
    line-height: var(
      --wds-font-line-height-body-small,
      var(--wsr-text-line-height-small, 18px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    color: $label-color;
  }

  &__axis-label--hovered {
    fill: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
  }

  &__axis-label--disabled {
    cursor: default;
    fill: var(--wds-color-black-550, var(--wsr-color-D55, #cfd1dc));
  }

  &__circles {
    fill: var(
      --wds-color-black-100-transparent-5,
      var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05))
    );
    stroke-width: 1px;
    stroke: var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
  }

  &__circles--transparent {
    fill: transparent;
  }

  &__scale-label {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-tiny,
      var(--wsr-text-font-size-tiny, 12px)
    );
    font-weight: $font-weight-regular;
    line-height: var(
      --wds-font-line-height-body-tiny,
      var(--wsr-text-line-height-tiny, 15px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    fill: var(--wds-color-black-300, var(--wsr-color-D30, #595d70));
  }

  &__data-point {
    cursor: pointer;
  }

  &__data-point--disabled {
    cursor: default;
  }

  &__data-point:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }
}