/**
 * Custom Checkbox Component - Kesra Modern Theme
 * Pure CSS, super lightweight, instant response, sharp geometric checkmark
 */

.fast-checkbox {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    margin: 0;
    width: 19px;
    height: 19px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.fast-checkbox:hover:not(:disabled) {
    border-color: #0F766E;
}

.fast-checkbox:checked,
.fast-checkbox:indeterminate {
    background-color: #0F766E !important;
    border-color: #0F766E !important;
}

.fast-checkbox::before {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: #ffffff;
    transform: scale(0);
}

.fast-checkbox:checked::before {
    transform: scale(1);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.fast-checkbox:indeterminate::before {
    content: "";
    width: 9px;
    height: 2.5px;
    background-color: #ffffff;
    clip-path: none;
    transform: scale(1);
    border-radius: 1px;
}

.fast-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fast-checkbox:focus-visible {
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);
}