.dda-checkbox-container {
  display: inline-flex;
  align-items: center;
}

.dda-checkbox-container input[type="checkbox"] {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

.dda-checkbox-container label {
  cursor: pointer;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}

/**/
.dda-checkbox-fill label .dda-check-square{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: solid 2px var(--dda-color-primary-40);
  border-radius: 6px;
  position: relative;
}
.dda-checkbox-fill label .dda-check-square::before{
  content: "";
  width: 8px;
  height: 3px;
  border-left: solid 2px var(--dda-color-primary-40);
  border-bottom: solid 2px var(--dda-color-primary-40);
  position: absolute;
  top: 6px;
  left: 5px;
  transform: rotate(-45deg);
}

.dda-checkbox-fill input[type="checkbox"]:checked~label .dda-check-square{
  background-color: var(--dda-color-primary-40);
}
.dda-checkbox-fill input[type="checkbox"]:checked~label .dda-check-square::before{
  border-left: solid 2px var(--dda-surface-100);
  border-bottom: solid 2px var(--dda-surface-100);
}
.dda-checkbox-fill.dda-checkbox-disabled label .dda-check-square{
  background: var(--dda-neutral-95);
  border: solid 2px var(--dda-neutral-95);
}
.dda-checkbox-fill.dda-checkbox-disabled label .dda-check-square::before{
  border-left: solid 2px var(--dda-on-surface-40);
  border-bottom: solid 2px var(--dda-on-surface-40);
}

/**/
.dda-checkbox-stroke label .dda-check-square{
  width: 24px;
  height: 24px;
  border: solid 2px var(--dda-surface-variant-80);
  border-radius: 6px;
  position: relative;
}
.dda-checkbox-stroke input[type="checkbox"]:checked~label .dda-check-square{
  border: solid 2px var(--dda-color-primary-40);
}
.dda-checkbox-stroke input[type="checkbox"]:checked~label .dda-check-square::before{
  content: "";
  width: 8px;
  height: 3px;
  border-left: solid 2px var(--dda-color-primary-40);
  border-bottom: solid 2px var(--dda-color-primary-40);
  position: absolute;
  top: 6px;
  left: 5px;
  transform: rotate(-45deg);
}
.dda-checkbox-fill input[type="checkbox"]:focus-within~label .dda-check-square,
.dda-checkbox-stroke input[type="checkbox"]:focus-within~label .dda-check-square{
  box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);
}

.dda-checkbox-stroke.dda-checkbox-disabled label .dda-check-square{
  background-color: var(--dda-neutral-95);
  border: solid 2px var(--dda-neutral-95);
}
.dda-checkbox-container.dda-checkbox-disabled .dda-checkbox-title,
.dda-checkbox-container.dda-checkbox-disabled .dda-checkbox-supporting{
  color: var(--dda-on-surface-40);
}


.dda-checkbox-container label p {
  margin: 0px;
}

.dda-checkbox-title {
  font-size: var(--font-body);
  color: var(--dda-on-surface-0);
  font-weight: var(--font-weight-regular);
  display: block;
}

.light-mode .dda-checkbox-title{
  color: var(--dda-neutral-0);
}

.dda-checkbox-supporting {
  display: block;
  font-size: var(--font-small);
  font-weight: var(--font-weight-regular);
  color: var(--dda-on-surface-variant-30);
}

.light-mode  .dda-checkbox-supporting {
  color: var(--dda-neutral-variant-30);
}

.dda-checkbox-disabled i,
.dda-checkbox-disabled svg{
  color: var(--dda-neutral-70);
  border: solid 2px var(--dda-surface-90);
}
.dda-checkbox-container.dda-checkbox-disabled{
  pointer-events: none;
}