:host {
  display: block;
}

:host * {
  font-family: var(--dc-font-family);
  font-weight: 400;
}

.dc-checkbox-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 300px;
  height: 36px;
}

.dc-checkbox-input {
  outline: 3px solid transparent;
  outline-offset: 1px;
  border: 1px solid var(--dc-ui-border-default);
  appearance: none;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: var(--dc-primary-background);
  margin: 0;
  padding: 0;
}

.dc-checkbox-label {
  outline: none;
  font-family: var(--dc-primary-font);
  font-weight: 400;
  color: var(--dc-primary-text-color);
  letter-spacing: -0.2px;
  cursor: pointer;
}

.dc-checkbox-disabled .dc-checkbox-label {
  color: var(--dc-greyscale-04);
  cursor: default;
}

.dc-checkbox-disabled .dc-checkbox-label {
  color: var(--dc-greyscale-04);
}

.dc-checkbox-size-standard .dc-checkbox-input {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
}

.dc-checkbox-size-small .dc-checkbox-input {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
}

.dc-checkbox-size-standard .dc-checkbox-label {
  font-size: 16px;
  line-height: 24px;
  padding-left: 12px;
}

.dc-checkbox-size-small .dc-checkbox-label {
  font-size: 14px;
  padding-left: 8px;
}

.dc-checkbox-size-standard.dc-checkbox-child {
  margin-left: 37px;
}

.dc-checkbox-size-small.dc-checkbox-child {
  margin-left: 29px;
}

.dc-checkbox-input:checked {
  background-color: var(--dc-primary-colour);
  border-color: var(--dc-primary-colour);
}

.dc-checkbox-input:checked::before {
  content: '';
  display: block;
  width: 14px;
  height: 12px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M4.20931 9.63556C4.03779 9.63556 3.88209 9.55771 3.75802 9.43302L0.347819 5.75813C0.0984391 5.49356 0.114269 5.07329 0.347819 4.80809C0.597189 4.54352 0.986449 4.55872 1.2352 4.80809L4.19355 7.99999L10.7489 0.573139C10.9825 0.308569 11.3876 0.292749 11.6363 0.542119C11.8857 0.791489 11.9009 1.21177 11.6673 1.49215L4.67661 9.43298C4.53672 9.55767 4.38102 9.63552 4.2095 9.63552L4.20931 9.63556Z' fill='white'/%3E%3C/svg%3E") no-repeat;
  mask-position: center;
  background-color: var(--dc-background-colour); 
}

.dc-checkbox-size-small .dc-checkbox-input:checked::before {
  width: 12px;
  height: 10px;
}

.dc-checkbox-input:focus-visible {
  outline: 3px solid var(--dc-primary-colour);
}

.dc-checkbox-input:hover:enabled {
  border: 1px solid var(--dc-primary-accent-colour);
  cursor: pointer;
}

.dc-checkbox-error-msg {
  display: none;
  font-size: 12px;
  color: var(--dc-primary-error-color);
}

.dc-checkbox-error .dc-checkbox-error-msg {
  display: block;
}

.dc-checkbox-error .dc-checkbox-input {
  border: 1px solid var(--dc-primary-error-color);
}

.dc-checkbox-indeterminate .dc-checkbox-input {
  background-image: none;
  background-color: var(--dc-primary-colour);
  border-color: var(--dc-primary-colour);
}

.dc-checkbox-indeterminate.dc-checkbox-size-standard .dc-checkbox-input::after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 2px;
  background-color: var(--dc-background-colour);
}

.dc-checkbox-indeterminate.dc-checkbox-size-small .dc-checkbox-input::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 2px;
  background-color: var(--dc-background-colour);
}

.dc-checkbox-disabled .dc-checkbox-input {
  border-color: var(--dc-secondary-disabled-text-colour);
  background-color: var(--dc-background-disabled-color);
}

.dc-checkbox-indeterminate .dc-checkbox-input:hover:enabled {
  border: 1px solid var(--dc-primary-accent-colour);
  cursor: pointer;
}

.dc-checkbox-disabled .dc-checkbox-input:checked::before {
  background-color: var(--dc-greyscale-04);  
}

.dc-checkbox-disabled.dc-checkbox-indeterminate .dc-checkbox-input::after {
  background-color: var(--dc-greyscale-04);
  cursor: default;
}