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

@mixin checkmark($color: #000){
    @extend .x-checkmark-base;
    color: $color;
}

.x-checkmark-base {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    content: '3';
    font-family: 'Pictos';
    font-size: 1.6em;
    text-align: right;
    line-height: 1.6em;
}

.x-field-checkbox .x-field-mask,
.x-field-radio .x-field-mask {
    &::after {
        @include checkmark($form-light);
    }
}

.x-input-checkbox,
.x-input-radio {
    visibility: hidden;
}

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

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