/**
 * @class Ext.field.Checkbox
 */

.x-checkboxfield {
    .x-mask-el {
        @include absolute-position;

        &::after {
            content: '';
            width: 28px;
            height: 28px;
            position: absolute;
            top: 9px;
            right: 5px;
            @include border-radius(2px);
            background-color: $highlight-color;
            font-family: 'Pictos';
            font-size: 1.3em;
            text-align: center;
            line-height: 1.25em;
            color: #fff;
        }
    }

    .x-input-el {
        visibility: hidden;

        &:checked ~ .x-mask-el:after {
            background-color: $base-color;
            content: '3';
        }
    }


    &.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);
        }
    }
}