@conduction/components 2.2.26 → 2.2.27

package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css

@@ -1,222 +1,222 @@
-.denhaag-breadcrumb {
-  --denhaag-breadcrumb-chevron-display: none;
-  --denhaag-breadcrumb-link-background-color: transparent;
-  --denhaag-breadcrumb-link-icon-content: "";
-  --denhaag-breadcrumb-link-pointer-events: bounding-box;
-  --denhaag-breadcrumb-item-display: none;
-
-  background-color: var(--denhaag-breadcrumb-background-color, transparent);
-  color: var(--denhaag-breadcrumb-color, inherit);
-  padding-block-end: var(--denhaag-breadcrumb-padding-block);
-  padding-block-start: var(--denhaag-breadcrumb-padding-block);
-  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
-  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
-}
-
-.denhaag-breadcrumb__list {
-  block-size: 100%;
-  display: flex;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  margin-inline-end: auto;
-  margin-inline-start: auto;
-  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
-}
-
-ol.denhaag-breadcrumb__list {
-  list-style: none;
-  padding-inline-start: 0;
-}
-
-.denhaag-breadcrumb__item {
-  align-items: center;
-  display: var(--denhaag-breadcrumb-item-display);
-}
-
-.denhaag-breadcrumb__item:nth-last-child(2) {
-  --denhaag-breadcrumb-item-display: flex;
-}
-
-.denhaag-breadcrumb__item:nth-last-child(2)
-  > .denhaag-breadcrumb__link::before {
-  background: var(--denhaag-breadcrumb-link-color);
-  clip-path: path(
-    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
-  );
-  content: var(--denhaag-breadcrumb-link-icon-content);
-  height: var(
-    --denhaag-breadcrumb-link-icon-height,
-    var(--denhaag-breadcrumb-link-icon-width)
-  );
-  margin-inline-end: var(
-    --denhaag-breadcrumb-link-icon-margin-inline,
-    var(--denhaag-breadcrumb-link-icon-width)
-  );
-  width: var(--denhaag-breadcrumb-link-icon-width);
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
-  --denhaag-breadcrumb-link-background-color: var(
-    --denhaag-breadcrumb-dots-background-color,
-    inherit
-  );
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
-  --denhaag-breadcrumb-link-background-color: var(
-    --denhaag-breadcrumb-dots-hover-background-color,
-    inherit
-  );
-}
-
-.denhaag-breadcrumb__link {
-  align-items: center;
-  color: var(--denhaag-breadcrumb-link-color, inherit);
-  display: flex;
-  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
-  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
-  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
-  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
-  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
-  position: relative;
-}
-
-.denhaag-breadcrumb__link:hover,
-.denhaag-breadcrumb__link--hover {
-  --denhaag-breadcrumb-link-color: var(
-    --denhaag-breadcrumb-link-hover-color,
-    inherit
-  );
-}
-
-.denhaag-breadcrumb__link:focus,
-.denhaag-breadcrumb__link--focus {
-  --denhaag-breadcrumb-link-color: var(
-    --denhaag-breadcrumb-link-focus-color,
-    inherit
-  );
-
-  outline: var(
-    --denhaag-breadcrumb-link-focus-outline,
-    var(--denhaag-link-focus-outline)
-  );
-}
-
-.denhaag-breadcrumb__link--current,
-.denhaag-breadcrumb__link.denhaag-link--current,
-.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
-  --denhaag-breadcrumb-link-color: var(
-    --denhaag-breadcrumb-current-color,
-    var(--denhaag-breadcrumb-color, inherit)
-  );
-
-  text-decoration: none;
-}
-
-.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
-    > .denhaag-breadcrumb__link)
-  > :first-child {
-  pointer-events: bounding-box;
-}
-
-/* SVG for the separator */
-.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
-.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
-  color: initial;
-  font-size: inherit;
-  display: var(--denhaag-breadcrumb-chevron-display);
-  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
-  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
-}
-
-[dir="rtl"]
-  .denhaag-breadcrumb__link
-  > .denhaag-breadcrumb__text
-  + .denhaag-icon,
-[dir="rtl"]
-  .denhaag-breadcrumb__item:nth-last-child(2)
-  > .denhaag-breadcrumb__link::before {
-  transform: scaleX(-1);
-}
-
-.denhaag-breadcrumb__text {
-  background-color: var(--denhaag-breadcrumb-link-background-color);
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
-  .denhaag-breadcrumb__text {
-  aspect-ratio: 24/16;
-  border-radius: var(
-    --denhaag-breadcrumb-dots-border-radius,
-    var(--denhaag-border-radius)
-  );
-  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
-  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
-  .denhaag-breadcrumb__text::before {
-  color: var(--denhaag-breadcrumb-dots-color, inherit);
-  content: "...";
-  left: calc(50% - 7px);
-  line-height: 0;
-  position: absolute;
-  text-indent: 0;
-  top: calc(50% - 5px);
-  vertical-align: baseline;
-}
-
-@media (min-width: 481px) {
-  .denhaag-breadcrumb {
-    --denhaag-breadcrumb-chevron-display: inline-block;
-    --denhaag-breadcrumb-link-icon-content: unset;
-    --denhaag-breadcrumb-link-pointer-events: none;
-    --denhaag-breadcrumb-padding-block: var(
-      --denhaag-breadcrumb-padding-block-md
-    );
-  }
-
-  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
-    --denhaag-breadcrumb-item-display: flex;
-  }
-}
-
-@media (min-width: 1124px) {
-  .denhaag-breadcrumb {
-    --denhaag-breadcrumb-padding-inline: 0;
-  }
-}
-
-:root {
-  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
-  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
-  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
-  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
-  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
-  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
-  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
-  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
-  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
-  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
-  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
-  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
-  --utrecht-breadcrumb-item-padding-inline-start: 14px;
-  --utrecht-breadcrumb-item-padding-inline-end: 14px;
-  --utrecht-breadcrumb-divider-inline-size: 24px;
-  --utrecht-breadcrumb-divider-content: ›;
-  --denhaag-breadcrumb-list-max-width: 67.5rem;
-  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
-  --denhaag-breadcrumb-link-icon-width: 0.875rem;
-  --denhaag-breadcrumb-link-icon-height: 0.875rem;
-  --denhaag-breadcrumb-padding-inline: 0.75rem;
-  --denhaag-breadcrumb-padding-block-md: 0.75rem;
-  --denhaag-breadcrumb-padding-block: 1rem;
-  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
-  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
-  --utrecht-breadcrumb-font-size: var(
-    --denhaag-typography-scale-base-font-size
-  );
-}
+.denhaag-breadcrumb {
+  --denhaag-breadcrumb-chevron-display: none;
+  --denhaag-breadcrumb-link-background-color: transparent;
+  --denhaag-breadcrumb-link-icon-content: "";
+  --denhaag-breadcrumb-link-pointer-events: bounding-box;
+  --denhaag-breadcrumb-item-display: none;
+
+  background-color: var(--denhaag-breadcrumb-background-color, transparent);
+  color: var(--denhaag-breadcrumb-color, inherit);
+  padding-block-end: var(--denhaag-breadcrumb-padding-block);
+  padding-block-start: var(--denhaag-breadcrumb-padding-block);
+  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
+  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
+}
+
+.denhaag-breadcrumb__list {
+  block-size: 100%;
+  display: flex;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
+}
+
+ol.denhaag-breadcrumb__list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.denhaag-breadcrumb__item {
+  align-items: center;
+  display: var(--denhaag-breadcrumb-item-display);
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2) {
+  --denhaag-breadcrumb-item-display: flex;
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  background: var(--denhaag-breadcrumb-link-color);
+  clip-path: path(
+    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
+  );
+  content: var(--denhaag-breadcrumb-link-icon-content);
+  height: var(
+    --denhaag-breadcrumb-link-icon-height,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  margin-inline-end: var(
+    --denhaag-breadcrumb-link-icon-margin-inline,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  width: var(--denhaag-breadcrumb-link-icon-width);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-hover-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link {
+  align-items: center;
+  color: var(--denhaag-breadcrumb-link-color, inherit);
+  display: flex;
+  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
+  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
+  position: relative;
+}
+
+.denhaag-breadcrumb__link:hover,
+.denhaag-breadcrumb__link--hover {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-hover-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link:focus,
+.denhaag-breadcrumb__link--focus {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-focus-color,
+    inherit
+  );
+
+  outline: var(
+    --denhaag-breadcrumb-link-focus-outline,
+    var(--denhaag-link-focus-outline)
+  );
+}
+
+.denhaag-breadcrumb__link--current,
+.denhaag-breadcrumb__link.denhaag-link--current,
+.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-current-color,
+    var(--denhaag-breadcrumb-color, inherit)
+  );
+
+  text-decoration: none;
+}
+
+.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
+    > .denhaag-breadcrumb__link)
+  > :first-child {
+  pointer-events: bounding-box;
+}
+
+/* SVG for the separator */
+.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
+.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
+  color: initial;
+  font-size: inherit;
+  display: var(--denhaag-breadcrumb-chevron-display);
+  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
+}
+
+[dir="rtl"]
+  .denhaag-breadcrumb__link
+  > .denhaag-breadcrumb__text
+  + .denhaag-icon,
+[dir="rtl"]
+  .denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  transform: scaleX(-1);
+}
+
+.denhaag-breadcrumb__text {
+  background-color: var(--denhaag-breadcrumb-link-background-color);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text {
+  aspect-ratio: 24/16;
+  border-radius: var(
+    --denhaag-breadcrumb-dots-border-radius,
+    var(--denhaag-border-radius)
+  );
+  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text::before {
+  color: var(--denhaag-breadcrumb-dots-color, inherit);
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  top: calc(50% - 5px);
+  vertical-align: baseline;
+}
+
+@media (min-width: 481px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-chevron-display: inline-block;
+    --denhaag-breadcrumb-link-icon-content: unset;
+    --denhaag-breadcrumb-link-pointer-events: none;
+    --denhaag-breadcrumb-padding-block: var(
+      --denhaag-breadcrumb-padding-block-md
+    );
+  }
+
+  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
+    --denhaag-breadcrumb-item-display: flex;
+  }
+}
+
+@media (min-width: 1124px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-padding-inline: 0;
+  }
+}
+
+:root {
+  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
+  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
+  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
+  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
+  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
+  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
+  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
+  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
+  --utrecht-breadcrumb-item-padding-inline-start: 14px;
+  --utrecht-breadcrumb-item-padding-inline-end: 14px;
+  --utrecht-breadcrumb-divider-inline-size: 24px;
+  --utrecht-breadcrumb-divider-content: ›;
+  --denhaag-breadcrumb-list-max-width: 67.5rem;
+  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
+  --denhaag-breadcrumb-link-icon-width: 0.875rem;
+  --denhaag-breadcrumb-link-icon-height: 0.875rem;
+  --denhaag-breadcrumb-padding-inline: 0.75rem;
+  --denhaag-breadcrumb-padding-block-md: 0.75rem;
+  --denhaag-breadcrumb-padding-block: 1rem;
+  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
+  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
+  --utrecht-breadcrumb-font-size: var(
+    --denhaag-typography-scale-base-font-size
+  );
+}

package/src/components/formFields/checkbox/Checkbox.module.css

@@ -1,7 +1,213 @@
-.container {
-  user-select: none;
+:root {
+  --conduciton-input-checkbox-checkmark-url: url("data:image/svg+xml,%3Csvg id='eXTGSQIndRe1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 13' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cg transform='translate(-85.642166-156.631362)'%3E%3Cpath d='M86.73927,163.90021l1.92835-2.05763l4.165103,4.176559c-.692268.524-1.562158,1.361078-1.562158,2.198156L86.73927,163.90021Z' fill='%23fff' stroke-width='0'/%3E%3Cpath d='M95.2777,158.04542l2.26736,1.67416-6.27449,8.49772-1.917847-1.798161L95.2777,158.04542Z' fill='%23fff' stroke-width='0'/%3E%3C/g%3E%3C/svg%3E%0A");
+
+  --conduction-input-checkbox-color: #ffffff;
+  --conduction-input-checkbox-border-width: 1px;
+  --conduction-input-checkbox-border-style: solid;
+  --conduction-input-checkbox-border-color: #767676;
+  --conduction-input-checkbox-border-radius: 3px;
+  /* --conduction-input-checkbox-box-shadow: ; */
+
+  --conduction-input-checkbox-focus-outline-width: 2px;
+  --conduction-input-checkbox-focus-outline-style: solid;
+  --conduction-input-checkbox-focus-outline-color: #000000;
+  --conduction-input-checkbox-focus-outline-offset: 2px;
+
+  --conduction-input-checkbox-hover-color: #ffffff;
+  --conduction-input-checkbox-hover-border-width: 1px;
+  --conduction-input-checkbox-hover-border-style: solid;
+  --conduction-input-checkbox-hover-border-color: #4f4f4f;
+  --conduction-input-checkbox-hover-border-radius: 3px;
+  /* --conduction-input-checkbox-hover-box-shadow: ; */
+
+  --conduction-input-checkbox-checked-color: #0075ff;
+  --conduction-input-checkbox-checked-border-width: 1px;
+  --conduction-input-checkbox-checked-border-style: solid;
+  --conduction-input-checkbox-checked-border-color: #0075ff;
+  --conduction-input-checkbox-checked-border-radius: 3px;
+
+  --conduction-input-checkbox-checked-hover-color: #005cc8;
+  --conduction-input-checkbox-checked-hover-border-width: 1px;
+  --conduction-input-checkbox-checked-hover-border-style: solid;
+  --conduction-input-checkbox-checked-hover-border-color: #005cc8;
+  --conduction-input-checkbox-checked-hover-border-radius: 3px;
+
+  --conduction-input-checkbox-disabled-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-border-width: 1px;
+  --conduction-input-checkbox-disabled-border-style: solid;
+  --conduction-input-checkbox-disabled-border-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-border-radius: 3px;
+
+  --conduction-input-checkbox-disabled-hover-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-hover-border-width: 1px;
+  --conduction-input-checkbox-disabled-hover-border-style: solid;
+  --conduction-input-checkbox-disabled-hover-border-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-hover-border-radius: 3px;
+
+  --conduction-input-checkbox-label-color: #000000;
+  --conduction-input-checkbox-label-font-size: var(--skeleton-font-size-md);
+  --conduction-input-checkbox-label-font-weight: var(--skeleton-font-weight-normal);
+  --conduction-input-checkbox-label-container-padding: 3px;
+  --conduction-input-checkbox-label-container-margin: 5px;
+  /* --conduction-input-checkbox-label-font-family: ; */
 }
 
-.container:hover {
+.checkbox {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+.checkbox + label {
+  position: relative;
+  font-size: var(--conduction-input-checkbox-label-font-size, var(--utrecht-document-font-size));
+  font-weight: var(--conduction-input-checkbox-label-font-weight, var(--utrehct-document-font-weight));
+  font-family: var(--conduction-input-checkbox-label-font-family, var(--utrecht-document-font-family));
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  color: var(--conduction-input-checkbox-label-color, var(--utrecht-document-color));
+  padding: var(--conduction-input-checkbox-label-container-padding);
+}
+
+.checkbox + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-color);
+  border-width: var(--conduction-input-checkbox-border-width);
+  border-style: var(--conduction-input-checkbox-border-style);
+  border-color: var(--conduction-input-checkbox-border-color);
+  border-radius: var(--conduction-input-checkbox-border-radius);
+  box-shadow: var(--conduction-input-checkbox-box-shadow);
+  box-sizing: border-box;
+}
+
+.checkbox:focus + label::before,
+.checkbox:hover:focus + label::before,
+.checkbox:checked:focus + label::before,
+.checkbox:checked:hover:focus + label::before {
+  outline-width: var(--conduction-input-checkbox-focus-outline-width);
+  outline-style: var(--conduction-input-checkbox-focus-outline-style);
+  outline-color: var(--conduction-input-checkbox-focus-outline-color);
+  outline-offset: var(--conduction-input-checkbox-focus-outline-offset);
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  box-sizing: border-box;
+}
+
+.checkbox:hover + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-hover-color);
+  border-width: var(--conduction-input-checkbox-hover-border-width, var(--conduction-input-checkbox-border-width));
+  border-style: var(--conduction-input-checkbox-hover-border-style, var(--conduction-input-checkbox-border-style));
+  border-color: var(--conduction-input-checkbox-hover-border-color, var(--conduction-input-checkbox-border-color));
+  border-radius: var(--conduction-input-checkbox-hover-border-radius, var(--conduction-input-checkbox-border-radius));
+  box-shadow: var(--conduction-input-checkbox-hover-box-shadow, var(--conduction-input-checkbox-box-shadow));
+}
+
+/* Checked */
+
+.checkbox:checked + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-checked-color);
+  border-width: var(--conduction-input-checkbox-checked-border-width);
+  border-style: var(--conduction-input-checkbox-checked-border-style);
+  border-color: var(--conduction-input-checkbox-checked-border-color);
+  border-radius: var(--conduction-input-checkbox-checked-border-radius);
+  box-shadow: var(--conduction-input-checkbox-checked-box-shadow);
+}
+
+.checkbox:checked:hover + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-checked-hover-color, var(--conduction-input-checkbox-checked-color));
+  border-width: var(--conduction-input-checkbox-checked-hover-border-width, var(--conduction-input-checkbox-checked-border-width));
+  border-style: var(--conduction-input-checkbox-checked-hover-border-style, var(--conduction-input-checkbox-checked-border-style));
+  border-color: var(--conduction-input-checkbox-checked-hover-border-color, var(--conduction-input-checkbox-checked-border-color));
+  border-radius: var(--conduction-input-checkbox-checked-hover-border-radius, var(--conduction-input-checkbox-checked-border-radius));
+  box-shadow: var(--conduction-input-checkbox-checked-hover-box-shadow, var(--conduction-input-checkbox-checked-box-shadow));
+}
+
+.checkbox:checked + label::after {
+  content: " ";
+  background-image: var(--conduciton-input-checkbox-checkmark-url);
+  background-repeat: no-repeat;
+  background-size: 13px 13px;
+  background-position: calc(var(--conduction-input-checkbox-label-container-padding) + var(--conduction-input-checkbox-label-container-margin)) center;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0px;
+  left: 0px;
+  top: 0px;
+  text-align: center;
+  background-color: transparent;
+  font-size: 10px;
+  height: 100%;
+  width: 100%;
+}
+
+/* Disabled */
+
+.checkbox:disabled:hover + label {
+  cursor: default;
+}
+
+.checkbox:disabled + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-disabled-color);
+  border-width: var(--conduction-input-checkbox-disabled-border-width);
+  border-style: var(--conduction-input-checkbox-disabled-border-style);
+  border-color: var(--conduction-input-checkbox-disabled-border-color);
+  border-radius: var(--conduction-input-checkbox-disabled-border-radius);
+  box-shadow: var(--conduction-input-checkbox-disabled-box-shadow);
+}
+
+.checkbox:disabled:hover + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-disabled-hover-color, var(--conduction-input-checkbox-disabled-color));
+  border-width: var(--conduction-input-checkbox-disabled-hover-border-width, var(--conduction-input-checkbox-disabled-border-width));
+  border-style: var(--conduction-input-checkbox-disabled-hover-border-style, var(--conduction-input-checkbox-disabled-border-style));
+  border-color: var(--conduction-input-checkbox-disabled-hover-border-color, var(--conduction-input-checkbox-disabled-border-color));
+  border-radius: var(--conduction-input-checkbox-disabled-hover-border-radius, var(--conduction-input-checkbox-disabled-border-radius));
+  box-shadow: var(--conduction-input-checkbox-disabled-hover-box-shadow, var(--conduction-input-checkbox-disabled-box-shadow));
+  cursor: default;
+}
+
+.checkbox:disabled:checked + label::after {
+  cursor: default;
 }