@charset "utf-8";
.x-radiofield {

    .x-mask-el {
        height: 47px;

        &::before {
            @include border-radius(35px);
            width: 20px;
            height: 20px;
            top: 16px;
            right: 6px;
        }

        &::after {
            @include border-radius(35px);
            width: 16px;
            height: 16px;
            top: 18px;
            right: 8px;
        }
    }

    .x-input-el:checked ~ .x-mask-el::after {
        @include background(linear-gradient(color-stops($base-color, darken($base-color, 10%))));
        @include box-shadow(inset 0 1px 0 0 #55AAD5);
        font-family: Helvetica;
        font-size: 26px;
        line-height: 13px;
        content: '•';
    }

    &.x-disabled {
        .x-input-el:checked ~ .x-mask-el:after {
            @include background(linear-gradient(color-stops(#bfd7e3, #85b3c9)));
            @include box-shadow(inset 0 1px 0 0 #aac5d3);
        }
    }
}