.kf-radio {
  display: flex;
  align-items: center;

  &__item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: @text-color-secondary;
    border: 1px solid #e0e0e0;
    border-radius: 8px;

    &:hover {
      color: @primary-color-hover;
      border: 1px solid @primary-color-hover;
    }

    &:active {
      color: @primary-color;
      border: 1px solid @primary-color;
    }

    &--active {
      color: @primary-color;
      border: 1px solid @primary-color;

      &:hover {
        color: @primary-color;
        border: 1px solid @primary-color;
      }
    }

    & + & {
      margin-left: 20px;
    }
  }
}
