@use "../../core/settings/globals" as *;
@use "../../core/tools/functions" as *;

////
/// Radios settings
///
/// @group components/radios
////

$nhsuk-radios-size: nhsuk-px-to-rem(40px) !default;
$nhsuk-radios-small-size: nhsuk-px-to-rem(24px) !default;

$nhsuk-radios-label-padding-left-right: nhsuk-px-to-rem(12px) !default;

// When the default focus width is used on a curved edge it looks visually
// smaller. So for the circular radios we bump the default to make it look
// visually consistent.
$nhsuk-radios-focus-width: nhsuk-px-to-rem($nhsuk-focus-width + 1px) !default;

// Offset 2px due to 40px form control with 44px clickable area
// https://nhsuk.github.io/nhsuk-frontend/examples/form-alignment/
$nhsuk-radios-offset: $nhsuk-border-width-form-element;