.works-checkbox {
    display: inline-block;
    width: ceil(@font-default-size * 1.6);
    height: ceil(@font-default-size * 1.6);
    font-family: 'FontAwesome';
    margin-right: @font-default-size * .2;
    border-radius: 2px;
    border: 2px solid @color-light-gray;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    line-height: ceil(@font-default-size * 1.6) - 4;
    box-sizing: border-box;

    &:active {
        border-color: @font-light-color;
    }

    &:before {
        content: '\f00c';
        font-size: @font-default-size;
        color: @font-light-color;
        opacity: 0;
    }

    &:hover,
    &.works-checkbox-checked {
        border-color: @color-light-gray;

        &:before {
            color: @color-light-gray;
        }
    }

    &.works-checkbox-checked {
        &:before {
            opacity: 1;
        }
    }

    &.works-checkbox-input-default {
        &:hover {
            border-color: @base-default-color;

            &:before {
                color: @base-default-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-default-color;
            border-color: @base-default-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-primary {
        &:hover {
            border-color: @base-primary-color;

            &:before {
                color: @base-primary-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-primary-color;
            border-color: @base-primary-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-cobalt {
        &:hover {
            border-color: @base-cobalt-color;

            &:before {
                color: @base-cobalt-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-cobalt-color;
            border-color: @base-cobalt-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-success {
        &:hover {
            border-color: @base-success-color;

            &:before {
                color: @base-success-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-success-color;
            border-color: @base-success-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-danger {
        &:hover {
            border-color: @base-danger-color;

            &:before {
                color: @base-danger-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-danger-color;
            border-color: @base-danger-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-alert {
        &:hover {
            border-color: @base-alert-color;

            &:before {
                color: @base-alert-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-alert-color;
            border-color: @base-alert-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-notice {
        &:hover {
            border-color: @base-notice-color;

            &:before {
                color: @base-notice-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-notice-color;
            border-color: @base-notice-color;

            &:before {
                color: @color-white;
            }
        }
    }

    &.works-checkbox-input-force {
        &:hover {
            border-color: @base-force-color;

            &:before {
                color: @base-force-color;
            }
        }

        &.works-checkbox-checked {
            background-color: @base-force-color;
            border-color: @base-force-color;

            &:before {
                color: @color-white;
            }
        }
    }
}

.works-checkbox-wrapper {
    display: inline-block;
    cursor: pointer;
    line-height: 1.2;
    vertical-align: middle;

    i,
    input,
    span {
        vertical-align: middle;
    }
}
