// Controls
$default-control-small-height: 2.1875rem !default; // 35px;
$controls-small-padding: 0.625rem !default; // 10px padding
$controls-small-icons-width: 0.75rem !default; // 12px

$default-control-height: 3.125rem !default; // 50px
$controls-padding: 0.9375rem !default; // 15px padding
$controls-filled-padding: 0.3125rem !default; // 5px padding
$controls-icons-max-width: 1.125rem !default; // 18px
$controls-icons-default-width: 1rem; // 16px
$controls-icons-empty-width: 2rem; // 32px
$controls-icons-min-width: 0.625rem !default; // 10px

// Textarea
$textarea-height: 4.375rem !default; // 70px;
$textarea-default-height: calc((#{$textarea-height} - #{$controls-padding}) - 2px);
$textarea-margin: calc(#{$controls-filled-padding} + 2px);

// Radios / checkboxes / Toggles
$checkbox-min-height: 1.25rem !default; // 20px
$checkmark-width: 0.5rem !default; // 8px
$radiomark-width: 0.375rem !default; // 6px
// $checkmark-left-value => 5px (for checkboxes, we need to remove 1px because we have a 1px border.)
$checkmark-left-value: calc(((#{$checkbox-min-height} - #{$checkmark-width}) / 2) - 1px);
$radiocircle-left-value: calc((#{$checkbox-min-height - #{$radiomark-width}}) / 2); // 7px
$radio-checkbox-label-left-value: 0.4375rem; // 7px
$toggle-min-height: 1.625rem !default; // 26px
$toggle-min-width: 2.5rem !default; // 40px

// Selects
$color-selected: $blue !default;
$select-arrow-size: 0.5625rem !default;
$select-clear-size: 1rem !default;
$select-clear-size-small: 0.9375rem !default;

// common
$fui-subtext-arrow-width: 0.4286rem !default;

// This values are extracted from our icon font generated by Fontastic.
// We'll need to verify those values each time we update the icon fonts.
$icon-content-arrow: '\61';
$icon-content-clean: '\62';
$icon-content-tick: '\63';