@use '../../../../dependencies' as *;

@mixin insertCustomSwitchersFieldOption(
  $checkbox-width: 20,
  $checkbox-height: 20,
  $flag-outer-width: 16,
  $flag-inner-width: 6,
) {
  .customSwitcherOption {
    display: flex;
    flex-direction: row;

    gap: 8px;

    .label {
      display: flex;
      align-items: start;
      padding: 0;
      @include fnt($size: 14, $line_height: 20, $weight: 500, $color: #344054)
    }

    .checkbox {
      @include insertCircleDotCheckboxTags($outer-size: $flag-outer-width);
    }

    &.active {
      .checkbox {
        @include insertCircleDotCheckboxActiveTags($inner-size: $flag-inner-width);
      }
    }

    @content;
  }
}