@radio-checked-color: var(--color-primary);
@radio-unchecked-color: #555;
@radio-disabled-color: var(--color-text-disabled);
@radio-error-color: var(--color-danger);
@radio-icon-size: 24px;
@radio-action-padding: 6px;

:root {
  --radio-checked-color: @radio-checked-color;
  --radio-unchecked-color: @radio-unchecked-color;
  --radio-disabled-color: @radio-disabled-color;
  --radio-error-color: @radio-error-color;
  --radio-icon-size: @radio-icon-size;
  --radio-action-padding: @radio-action-padding;
}

@keyframes var-vibrate-animation {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.var-radio {
  display: flex;
  align-items: center;
  transform: translateX(calc(-1 * var(--radio-action-padding)));
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &__wrap {
    display: inline-flex;
    flex-direction: column;
  }

  &__action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--radio-action-padding);
    border-radius: 50%;
  }

  &__icon[var-radio-cover] {
    display: block;
    font-size: var(--radio-icon-size);
  }

  &--with-animation[var-radio-cover] {
    animation: var-vibrate-animation 0.25s;
  }

  &--checked {
    color: var(--radio-checked-color);
  }

  &--unchecked {
    color: var(--radio-unchecked-color);
  }

  &--disabled {
    color: var(--radio-disabled-color);
  }

  &--error {
    color: var(--radio-error-color);
  }
}