@mixin radio($colorTag: '', $colorClass: '', $shadowColor: '', $defaultRadioSize: 18px) {
  $defaultClass: '.vc-form-radio';
  @if $colorTag != '' {
    $defaultClass: '.vc-form-radio.vc-radio-color-#{$colorTag}';
  }
  #{$defaultClass} {
    &.disabled .form-check-label {
      @apply text-default-text cursor-not-allowed opacity-50;
    }

    .vc-form-radio-label {
      @apply text-sm text-default-text cursor-pointer inline-flex relative outline-none;
      line-height: $defaultRadioSize;
    }

    .vc-form-radio-input {
      @apply absolute;
    }

    .vc-radio-label {
      @apply inline-flex;

      &.vc-radio-default-label {
        @apply text-left font-normal;
      }
    }

    .vc-form-icon-sign {
      @apply relative inline-flex;
      width: $defaultRadioSize;
      min-width: $defaultRadioSize;
      height: $defaultRadioSize;

      & + .vc-form-radio-label-text {
        @apply pl-2;
      }
    }

    &.view-radio {
      .vc-form-icon-sign::before,
      .vc-form-icon-sign::after {
        @apply rounded-full inline-block absolute left-0 top-0 transition-all duration-300 ease-in;
        content: '';
      }

      .vc-form-icon-sign::before {
        @apply border-2 border-inactive-elements;
        width: $defaultRadioSize;
        height: $defaultRadioSize;
      }

      input[type="radio"] ~ .vc-form-icon-sign:after,
      input[type="radio"] {
        @apply opacity-0;
      }

      input[type="radio"] ~ .vc-form-icon-sign::after {
        @apply bg-#{$colorClass} h-2.5 w-2.5 top-1 left-1;
      }

      input[type="radio"]:checked ~ .vc-form-icon-sign::before {
        @apply border-2 border-#{$colorClass};
      }

      input[type="radio"]:checked:hover ~ .vc-form-icon-sign::before {
        @apply border-#{$colorClass}--focus;
      }

      input[type="radio"]:checked:hover:focus ~ .vc-form-icon-sign::before {
        @apply border-#{$colorClass}--pressed;
      }

      input[type="radio"]:checked ~ .vc-form-icon-sign::after {
        @apply opacity-100;
      }

      input[type="radio"]:checked:hover ~ .vc-form-icon-sign::after {
        @apply bg-#{$colorClass}--focus;
      }

      input[type="radio"]:checked:hover:focus ~ .vc-form-icon-sign::after {
        @apply bg-#{$colorClass}--pressed;
      }

      input[type="radio"]:not([disabled]):hover ~ .vc-form-icon-sign:before {
        @apply border-2 border-#{$colorClass}--focus;
        @if $shadowColor != '' {
          @apply shadow-hover-#{$shadowColor};
        } @else {
          @apply shadow-hover;
        }
      }

      input[type="radio"]:not([disabled]):hover:focus ~ .vc-form-icon-sign:before {
        @apply border-2 border-#{$colorClass}--pressed;
        @if $shadowColor != '' {
          @apply shadow-hover-#{$shadowColor};
        } @else {
          @apply shadow-hover;
        }
      }

      &.borderless {
        .vc-form-icon-sign::before,
        input[type="radio"]:checked ~ .vc-form-icon-sign::before,
        input[type="radio"]:checked:hover ~ .vc-form-icon-sign::before,
        input[type="radio"]:checked:hover:focus ~ .vc-form-icon-sign::before,
        input[type="radio"]:not([disabled]):hover ~ .vc-form-icon-sign:before,
        input[type="radio"]:not([disabled]):hover:focus ~ .vc-form-icon-sign:before {
          box-shadow: none;
          border-color: transparent;
        }
      }
      .vc-form-radio-label {
        &:focus-visible {
          .vc-form-icon-sign:before {
            @if $shadowColor != '' {
              @apply shadow-hover-outer-#{$shadowColor};
            } @else {
              @apply shadow-hover-outer;
            }
          }
        }
      }
    }

    &.view-checkbox {
      .vc-form-icon-sign {
        width: $defaultRadioSize;
        height: $defaultRadioSize;
        @apply border-2 rounded-sm border-inactive-elements inline-block relative transition-all duration-300 ease-in;
      }

      .vc-form-icon-sign::before {
        transform: translateX(-50%) translateY(-50%);
        @apply absolute left-2/4 top-2/4 origin-center text-white;
      }

      input[type="radio"]:not(:checked):not(.indeterminate) {
        ~ .vc-form-icon-sign::before {
          content: '';
        }
      }

      input[type="radio"]:checked,
      input[type="radio"].indeterminate {
        + .vc-form-icon-sign {
          @apply border-none bg-#{$colorClass};
        }

        &:hover {
          + .vc-form-icon-sign {
            @apply bg-#{$colorClass}--focus;
          }

          &:focus {
            + .vc-form-icon-sign {
              @apply bg-#{$colorClass}--pressed;
            }
          }
        }

        + .vc-form-icon-sign {
          @apply opacity-100 mt-0;
        }
      }

      input[type="radio"]:not([disabled]):hover + .vc-form-icon-sign {
        @apply border-2 border-#{$colorClass}--focus;
        @if $shadowColor != '' {
          @apply shadow-hover-#{$shadowColor};
        } @else {
          @apply shadow-hover;
        }
      }

      input[type="radio"]:not([disabled]):hover:focus + .vc-form-icon-sign {
        @apply border-2 border-#{$colorClass}--pressed;
        @if $shadowColor != '' {
          @apply shadow-focus-#{$shadowColor};
        } @else {
          @apply shadow-focus;
        }
      }

      &.borderless {
        .vc-form-icon-sign,
        input[type="radio"]:not([disabled]):hover + .vc-form-icon-sign,
        input[type="radio"]:not([disabled]):hover:focus + .vc-form-icon-sign {
          box-shadow: none;
          border-color: transparent;
        }
        .vc-form-icon-sign::before {
          @apply text-#{$colorClass};
        }
        input[type="radio"]:checked,
        input[type="radio"].indeterminate {
          + .vc-form-icon-sign {
            @apply bg-transparent;
          }

          &:hover {
            + .vc-form-icon-sign {
              @apply bg-transparent;

              &::before {
                @apply text-#{$colorClass}--focus;
              }
            }

            &:focus {
              + .vc-form-icon-sign {
                @apply bg-transparent;

                &::before {
                  @apply text-#{$colorClass}--pressed;
                }
              }
            }
          }
        }
      }
      .vc-form-radio-label {
        &:focus-visible {
          .vc-form-icon-sign {
            @if $shadowColor != '' {
              @apply shadow-hover-outer-#{$shadowColor};
            } @else {
              @apply shadow-hover-outer;
            }
          }
        }
      }
    }

    input[type="radio"] {
      @apply pointer-events-none opacity-0;
    }
  }
}

@include radio('', 'active-elements');
@include radio('primary', 'primary-actions', 'primary');
@include radio('secondary', 'secondary-actions', 'secondary');
@include radio('destructive', 'destructive-actions', 'destructive');

[dir="rtl"] {
  .vc-form-radio {
    .vc-form-icon-sign {
      & + .vc-form-radio-label-text {
        @apply pl-0 pr-2;
      }
    }
  }
}