// Thêm hiệu ứng khi click checkbox, radio, switch
.custom-control-animated {
    .custom-control-input {
        position: absolute;
        top: -0.75rem;
        left: -0.75rem;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        pointer-events: none;
        background-color: #007bff;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        outline: none;
		z-index: 1;

        opacity: 0.0;
        transform: scale(1);
        transition: opacity 0.5s, transform 0.5s;

        &:active {
            // Thu nhỏ lại, nhưng mà đục
            // Khi hết active sẽ bung ra
            // Active là khi nhấn chuột, hết active là khi nhả chuột
            opacity: 1;
            transform: scale(0);
            transition: opacity 0s, transform 0s;
        }

        &:focus,
        &:active {
            outline: 0 none;
            box-shadow: none;
        }
    }
}


// Highlight tiêu chí được chọn (checkbox, radio, switch)
.custom-control-highlighted {
    .custom-control-input {
        &:checked {
            & ~ .custom-control-label {
                color: #007bff;
            }
        }
    }
}


// Trông kiểu solid nên đang xấu
// Chỉnh lại nền trắng, icon tick màu xanh dương
.custom-control-outlined {
    .custom-control-label {
        &::before {
            border-width: 2px;
        }
    }

    .custom-control-input {
        &:checked {
            & ~ .custom-control-label {
                &::before {
                    background-color: #FFF;
                }
            }
        }
    }

    &.custom-radio {
        .custom-control-input {
            &:checked {
                & ~ .custom-control-label {
                    &::after {
						// Chỉnh lại màu của icon tick tròn từ fff thành 007bff
                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23007bff'/%3e%3c/svg%3e");
                    }
                }
            }
        }
    }

    &.custom-checkbox {
        .custom-control-input {
            &:checked {
                & ~ .custom-control-label {
                    &::after {
                        // Chỉnh lại màu của icon tick check từ fff thành 007bff
						background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
                    }
                }
            }
        }
    }
}


// Cho to lên
.custom-control-lg {
    .custom-control-label {
        &::before,
        &::after {
            top: 0;
            width: 1.25rem;
            height: 1.25rem;
        }
    }
}


// TODO: Đổi màu checkbox, radio nữa