@import '../../theme/style/variables';
@import '../../form-control/style/variables';

@import './properties';

$petals--switch-font-size: var($__petals--form-control-font-size, $petals--form-control-font-size) !default;
$petals--switch-color: rgba(0, 0, 0, 0.25) !default;
$petals--switch-width: 2em !default;
$petals--switch-height: 20px !default;
$petals--switch-padding-left: $petals--switch-width + 0.5em !default;
$petals--switch-bg: var($__petals--form-control-border-color, $petals--form-control-border-color) !default;
$petals--switch-border-radius: $petals--switch-width !default;
$petals--switch-transition: 0.2s ease-in-out !default;
$petals--switch-transition-property: background-position, background-color !default;

$petals--switch-focus-color: hsla(211, 100%, 75%, 1) !default;
$petals--switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$petals--switch-focus-color}'/></svg>") !default;

$petals--switch-checked-color: var($__petals--primary-active-color, $petals--primary-active-color) !default;
$petals--switch-checked-bg: var($__petals--primary-active-border-color, $petals--primary-active-border-color) !default;