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

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

.x-checkmark-base {
    position: absolute;
    top: -2px;
    right: -3px;
    bottom: 0;
    content: '3';
    font-family: 'Pictos';
    font-size: 23px;
    text-align: right;
    line-height: 1.9em;
    @include text-shadow(
        0 -1px $background-color,
        0 1px $background-color,
        -1px 0 $background-color,
        1px 0 $background-color,
        0 2px 4px rgba($base-color, .3),
        0 -2px 4px rgba($base-color, .3),
        2px 0 4px rgba($base-color, .3),
        -2px 0 4px rgba($base-color, .3)
    );
}

.x-field-checkbox .x-field-mask::before,
.x-field-radio .x-field-mask::before,
.x-field-radio .x-field-mask::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
    height: 20px;
    width: 20px;
    border: 1px solid $foreground-color;
}

.x-field-checkbox .x-field-mask::after {
    @include checkmark($base-color);
    visibility: hidden;
}

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

.x-input-el:checked + .x-field-mask::after {
    visibility: visible;
}

.x-item-disabled {
    &.x-field-checkbox .x-field-mask::before,
    &.x-field-radio .x-field-mask::before {
        border-color: $secondary-color;
    }

    &.x-field-checkbox .x-input-el:checked + .x-field-mask::after {
        text-shadow: none;
        color: $foreground-color;
    }
}