//////////////////////////////////////////////////
// THEME / VARIABLES / FORMS - CHECKBOXES & RADIOS
//////////////////////////////////////////////////


@import '_variables.body';
@import '_variables.modular-scale';
@import '_variables.sizing';


// Background color
$bg-color-radio-dot: var(--body);                                 // Radio "dot" color (created using background-color)


// Border color
$border-color-checkmark: var(--body);                             // Checkmark color (created using borders)

$border-color-input-checked: var(--body);                         // Border-color of input when checked


// Border width
$border-width-checkmark: #{ms(-12)}em;                            // Border-width of border used to create checkmark


// Height & width
$height-width-checkbox-radio: $length-em-6;                       // Height & width for checkboxes and radios


// Margin
$margin-bottom-checkbox-radio: $length-em-2;                      // Margin-bottom for checkboxes and radios


// Padding
$padding-left-checkbox-radio: $length-em-7;                       // Padding-left for checkboxes and radios


// Transform
$scale-radio-start: #{ms(-8)};                                    // Checked radio scale value start: .32em
$scale-radio-end: #{ms(-4)};                                      // Checked radio scale value end: .56em


// Transition
$transition-check-duration: .05s;                                 // Duration of scale transition when checkbox is checked
$transition-check-timing: ease-out;                               // Timing function of scale transition when checkbox is checked
$transition-radio-duration: .05s;                                 // Duration of scale transition when radio is checked
$transition-radio-timing: ease-out;                               // Timing function of scale transition when radio is checked