.checkbox {
width: 1rem;
height: 1rem;
box-sizing: border-box;
padding: 0;
border: 1px solid;
border-color: var(--border);
border-radius: 4px;
margin: 0;
background-color: var(--background);
box-shadow: var(--shadow);
color: var(--foreground);
cursor: pointer;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.checkbox[data-checked="checked"] {
background-color: var(--foreground);
box-shadow: none;
color: var(--background);
}
.checkbox-indicator {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}