/* @docs */
$radio-active-background-color: $primary !default;
$radio-checked-box-shadow-length: 0 0 0.5em !default;
$radio-checked-box-shadow-opacity: 0.8 !default;
$radio-disabled-opacity: $base-disabled-opacity !default;
$radio-label-padding: 0 0 0 .5em !default;
$radio-margin-sibiling: 0.5em !default;
$radio-size: 1rem !default;
$radio-line-height: 1.25 !default;
/* @docs */

$HALF_MARGIN_EXPRESSION: "calc($margin * 0.5)";

@function svg_radio_fill($color, $background-color: 'transparent') {
    $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
    $content: '<g transform="matrix(4.38544,0,0,4.38544,-94.4336,-58.9876)"><path d="M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z" style="fill:#{$color};"/><circle cx="32.84" cy="24.8" r="7.9" style="fill:#{$background-color};"/></g>';
    $end: '</svg>';
    @return svg-encode("#{$start}#{$content}#{$end}");
}

@function svg_radio_empty($color) {
    $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
    $content: '<g transform="matrix(10.1032,0,0,10.1032,-255.068,-313.298)"><circle cx="30.195" cy="35.959" r="4.85" style="fill:#{$color};"/></g>';
    $end: '</svg>';
    @return svg-encode("#{$start}#{$content}#{$end}");
}

.o-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    @include unselectable;
    @include avariable('line-height', 'radio-line-height', $radio-line-height);
    @include avariable('margin-right', 'radio-margin-sibiling', $radio-margin-sibiling);


    &__check {
        @include avariable('width', 'radio-size', $radio-size);
        @include avariable('height', 'radio-size', $radio-size);
        margin: 0;
        vertical-align: top;
        background-position: center;
        background-size: contain;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border-radius: 50%;
        cursor: pointer;
        background-repeat: no-repeat;
        transition-property: background;
        @include avariable('transition-duration', 'transition-duration', $speed-slow);
        @include avariable('transition-timing-function', 'transition-timing', $easing);

        background-image: url(svg_radio_empty(variable('radio-active-background-color', $radio-active-background-color)));
        &--checked {
            background-image: url(svg_radio_fill(variable('radio-active-background-color', $radio-active-background-color)));
        }
    }
    &__label {
        @include avariable('padding', 'radio-label-padding', $radio-label-padding);
    }
    &--disabled {
        @include avariable('opacity', 'radio-disabled-opacity', $radio-disabled-opacity);
    }
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('radio-font-size-' + #{$name}), $value);
        }
    }
    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &--#{$name} {
            .o-radio__check {
                background-image: url(svg_radio_empty(variable(('variant-' + #{$name}), $color)));
            }
            .o-radio__check--checked {
                background-image: url(svg_radio_fill(
                    variable(('variant-' + #{$name}), $color),
                    variable(('variant-invert-' + #{$name}), $color-invert)
                ));
            }
        }
    }
}