.dd-checkbutton {
    position:relative;
    border: var(--dd-button-border-width) solid var(--dd-color-text);
    border-radius: var(--dd-checkbutton-border-radius);
    background-color: var(--dd-color-background);
    color: var(--dd-color-text);
    cursor: pointer;
    /* FLEX */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dd-checkbutton:has(:active){
    transform: translate(0,2px);
}

.dd-checkbutton label {
    width: 100%;
    padding: 12px 15px;
}

.dd-checkbutton:has(:focus-visible) {
    outline: 2px solid var(--dd-color-text);
    outline-offset: 3px;
}

.dd-checkbutton input {
    opacity: 0;
}
  
.dd-checkmark {
    pointer-events: none;
    position: absolute;
    right: 15px;
    height: 0.7em;
    width: 0.7em;
    border-radius: 2px;
    outline: 1px solid black;
    outline-offset: 3px;
}
  
/* On mouse-over, add a grey background color */
.dd-checkbutton:hover input ~ .dd-checkmark {
    /* background-color: var(--dd-color-accent); */
}
  
/* When the checkbox is checked, add a blue background */
.dd-checkbutton input:checked ~ .dd-checkmark {
    /* background-color: var(--dd-color-accent); */
}
  
/* Create the dd-checkmark/indicator (hidden when not checked) */
.dd-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the dd-checkmark when checked */
.dd-checkbutton input:checked ~ .dd-checkmark:after {
    display: block;
}

/* Style the dd-checkmark/indicator */
.dd-checkbutton .dd-checkmark:after {
    left: 4px;
    top: -8px;
    width: 8px;
    height: 18px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}