@import '../core/variables.less';
@import '../theme/index.less';

@ant-checkbox: ant-checkbox;
.@{ant-checkbox} {
    &-wrapper {
        & .@{ant-checkbox} {
            &-inner {
                border-color: var(--mi-theme, @mi-theme);

                &:hover,
                &:focus,
                &:active,
                &:visited {
                    border-color: var(--mi-theme, @mi-theme);
                }
            }

            &-checked {
                & .@{ant-checkbox}-inner {
                    border-color: var(--mi-theme, @mi-theme);
					background: var(--mi-theme, @mi-theme);
                }

                &:after {
                    border: 1px solid var(--mi-theme, @mi-theme);
                }
            }
        }

        &:hover,
        &:focus
        &:visited,
        &:active {
            .@{ant-checkbox} {
                &-inner {
                    border-color: var(--mi-theme, @mi-theme);
                }
            }

            & + .@{ant-checkbox}-inner {
                border-color: var(--mi-theme, @mi-theme);
            }
        }

        span:last-child {
            color: var(--mi-font, @mi-font);
        }
    }

    &-input:focus + .@{ant-checkbox}-inner {
        border-color: var(--mi-theme, @mi-theme);
    }

    &-disabled {
        .@{ant-checkbox} {
            &-inner {
                background: var(--mi-checkbox-disabled, @mi-checkbox-disabled) !important;
            }
        }
    }

    &-indeterminate .@{ant-checkbox}-inner:after {
        background-color: var(--mi-theme, @mi-theme);
    }
}