@use '../../../../../styles' as *;
@use '../../../FlexField';

@mixin insertRadioField() {
  .radioFieldItem {
    width: fit-content;
    height: fit-content;

    display: flex;
    gap: 8px;

    .checkbox {
      flex: none;
      width: 16px;
      height: 16px;

      border-radius: 50%;
      border: 1px solid $gray-300;
      background-color: $white;

      @include centerInsideContent();
    }

    .label {
      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $gray-700);
    }

    &.active {
      .checkbox {
        &:after {
          content: '';
          flex: none;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: $media-500;
        }

        border: 1px solid $media-500;
      }
    }

    @content;
  }
}