/**
 * @class Ext.field.Radio
 */

@mixin radiomark($color: #000, $size: 20px) {
    @include insertion($size, $size, ($size * -.5) + 24, auto);
    right: ($size * -.5) + 24;
    background-color: $color;
    @include border-radius($size);
}

.x-field-radio .x-field-mask {
    @include absolute-position;

    &::after {
        @include radiomark(darken($form-light, 5), 16px);
    }

    &::before {
        @include radiomark($form-light, 26px);
    }
}

.x-input-radio:checked + .x-field-mask::after {
    background: $active-color;
}

.x-item-disabled {
    &.x-field-radio {
        .x-input-radio:checked + .x-field-mask::after {
            background: mix($form-light, $active-color, 60);
        }
    }
}