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

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

        &:before {
            position: absolute;
            content: '';
            top: 0;
            right: 0;
            width: 32px;
            height: 32px;
            background-color: $field-background-color;
            border: 2px solid $field-border-color;
        }
    }

    .x-input-el {
        visibility: hidden;

        &:checked ~ .x-mask-el:after {
            position: absolute;
            top: 0;
            right: 0;
            width: 32px;
            text-align: center;
            // TODO: Use FontAwesome
            font-family: 'Pictos';
            font-size: 26px;
            line-height: 36px;
            content: '3';
            color: #000;
        }
    }

    &.x-disabled {
        .x-mask-el {
            &:before {
                background-color: $field-disabled-background-color;
                border-color: $field-disabled-border-color;
            }
        }

        .x-input-el:checked ~ .x-mask-el:after {
            color: $field-disabled-color;
        }

    }
}

.x-radiofield .x-input-el:checked ~ .x-mask-el:after {
    background-color: $field-disabled-color;
}