@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.ff-radio-button {
  @extend .fontPoppinsMediumSm;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: $text_color;
  line-height: 0px;

  &:last-child {
    margin-right: 0;
  }

  &:has(.ff-radio-input:disabled) {
    cursor: not-allowed;
  }

  .ff-radio-input {
    display: none;

    &:checked ~ .ff-radio-checkmark {
      &--primary {
        border-color: $primary;

        &::after {
          background-color: $primary;
        }
      }
      &--info {
        border-color: $grey_2;

        &::after {
          background-color: $grey_2;
        }
      }

      &--danger {
        border-color: $error;

        &::after {
          background-color: $error;
        }
      }

      &--success {
        border-color: $success;

        &::after {
          background-color: $success;
        }
      }

      &--warning {
        border-color: $warning;

        &::after {
          background-color: $warning;
        }
      }
      &::after {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    &:disabled + .ff-radio-checkmark {
      border-color: $grey_10 !important;

      &::after {
        background-color: $grey_10 !important;
      }
    }
  }

  .ff-radio-checkmark {
    height: 14px;
    width: 14px;
    border: 1px solid $grey_10;
    border-radius: 50%;
    position: relative;
    margin-right: 8px;
    background-color: $white;
    &::after {
      content: '';
      height: 8px;
      width: 8px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.2s ease-in-out;
    }
  }
}