.input-control{
    display: block;
    font-size: rem(16);
    padding: rem(8) 0;

    input:checked + .input-control-label:before {
        animation-name: input-control;
        animation-duration: 500ms;
        content: '\E834';
        color: $colorInputActive;
    }

    input[type=checkbox]:checked + .input-control-label:before {
        content: '\E834';
    }

    input[type=radio]:checked + .input-control-label:before {
        content: '\E837';
    }

    input:disabled + .input-control-label:before,  input:disabled + .input-control-label {
        color: $minBlack;
    }
}

.input-control-field {
    display: none;
}

.input-control-label {
    @include display-flex;
    line-height: rem(24);
}

.input-control-label:before {
    @include flex(1, 1, rem(24));
    @extend .font-icon;
    display: inline-block;
    margin-right: rem(16);
    max-width: rem(24);
    vertical-align: top;
}

.input-control-checkbox .input-control-label:before {
    content: '\E835';
}

.input-control-radio .input-control-label:before {
    content: '\E836';
}

@keyframes input-control {
    from {transform: scale(0);}
    to { transform: scale(1);}
}