@digdir/designsystemet-css 0.11.0-next.11 → 0.100.51-next.51

package/button.css

@@ -1,202 +0,0 @@
-.ds-btn {
-  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-  --dsc-btn-primary-background: var(--ds-color-accent-base-default);
-  --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
-  --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
-  --dsc-btn-primary-hover-color: var(--ds-color-accent-contrast-default);
-  --dsc-btn-secondary-color: var(--ds-color-accent-text-default);
-  --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
-  --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
-  --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
-  --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-hover);
-  --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
-  --dsc-btn-tertiary-color: var(--ds-color-accent-text-default);
-  --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
-  --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
-  --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-hover);
-  --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
-
-  display: flex;
-  align-items: center;
-  border: var(--ds-border-width-default) solid transparent;
-  background-color: var(--dsc-btn-primary-background);
-  color: var(--dsc-btn-primary-color);
-  min-width: 2.5em;
-  padding: var(--dsc-btn-padding);
-  box-sizing: border-box;
-  cursor: pointer;
-  font-family: inherit;
-  justify-content: center;
-  text-align: inherit;
-  text-decoration: none;
-  position: relative;
-  border-radius: var(--ds-border-radius-md);
-  min-height: var(--ds-sizing-10);
-}
-
-.ds-btn svg {
-  overflow: visible;
-}
-
-.ds-btn:disabled,
-.ds-btn[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-btn--sm {
-  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-
-  gap: var(--ds-sizing-1);
-  min-height: var(--ds-sizing-10);
-}
-
-.ds-btn--sm::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  min-height: auto;
-  content: '';
-}
-
-.ds-btn--sm::after {
-  position: absolute;
-  top: -5px;
-  left: 0;
-  width: 100%;
-  height: 44px;
-  content: '';
-}
-
-.ds-btn--md {
-  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-
-  gap: var(--ds-sizing-2);
-  min-height: var(--ds-sizing-12);
-}
-
-.ds-btn--lg {
-  --dsc-btn-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-
-  gap: var(--ds-sizing-2);
-  min-height: var(--ds-sizing-14);
-}
-
-.ds-btn--full-width {
-  width: 100%;
-  text-align: center;
-}
-
-.ds-btn--secondary,
-.ds-btn--tertiary {
-  background-color: transparent;
-}
-
-.ds-btn--icon-only {
-  --dsc-btn-padding: 0;
-}
-
-/* Only use hover for non-touch devices to prevent sticky-hovering */
-@media (hover: hover) and (pointer: fine) {
-  .ds-btn--primary:not([aria-disabled='true'], :disabled):hover {
-    background-color: var(--dsc-btn-primary-hover-background);
-  }
-
-  .ds-btn--secondary:not([aria-disabled='true'], :disabled):hover {
-    color: var(--dsc-btn-secondary-hover-color);
-    border-color: var(--dsc-btn-secondary-border-color);
-    background-color: var(--dsc-btn-secondary-hover-background);
-  }
-
-  .ds-btn--tertiary:not([aria-disabled='true'], :disabled):hover {
-    color: var(--dsc-btn-tertiary-hover-color);
-    background-color: var(--dsc-btn-tertiary-hover-background);
-  }
-}
-
-/* Primary button colors */
-.ds-btn--primary {
-  background-color: var(--dsc-btn-primary-background);
-}
-
-.ds-btn--primary:not([aria-disabled='true'], :disabled):active {
-  background-color: var(--dsc-btn-primary-active-background);
-}
-
-/* Secondary button colors */
-.ds-btn--secondary {
-  color: var(--dsc-btn-secondary-color);
-  border-color: var(--dsc-btn-secondary-border-color);
-  background-color: transparent;
-}
-
-.ds-btn--secondary:not([aria-disabled='true'], :disabled):active {
-  color: var(--dsc-btn-secondary-active-color);
-  border-color: var(--dsc-btn-secondary-border-color);
-  background-color: var(--dsc-btn-secondary-active-background);
-}
-
-/* Tertiary button colors */
-.ds-btn--tertiary {
-  color: var(--dsc-btn-tertiary-color);
-}
-
-.ds-btn--tertiary:not([aria-disabled='true'], :disabled):active {
-  color: var(--dsc-btn-tertiary-active-color);
-  background-color: var(--dsc-btn-tertiary-active-background);
-}
-
-.ds-btn--accent {
-  --dsc-btn-primary-background: var(--ds-color-accent-base-default);
-  --dsc-btn-primary-color: var(--ds-color-accent-contrast-default);
-  --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
-  --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
-  --dsc-btn-secondary-color: var(--ds-color-accent-text-subtle);
-  --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
-  --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
-  --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
-  --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-default);
-  --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
-  --dsc-btn-tertiary-color: var(--ds-color-accent-text-subtle);
-  --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
-  --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
-  --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-default);
-  --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
-}
-
-.ds-btn--neutral {
-  --dsc-btn-primary-background: var(--ds-color-neutral-base-default);
-  --dsc-btn-primary-color: var(--ds-color-neutral-contrast-default);
-  --dsc-btn-primary-hover-background: var(--ds-color-neutral-base-hover);
-  --dsc-btn-primary-active-background: var(--ds-color-neutral-base-active);
-  --dsc-btn-secondary-color: var(--ds-color-neutral-text-subtle);
-  --dsc-btn-secondary-hover-color: var(--ds-color-neutral-text-default);
-  --dsc-btn-secondary-active-color: var(--ds-color-neutral-text-default);
-  --dsc-btn-secondary-border-color: var(--ds-color-neutral-border-strong);
-  --dsc-btn-secondary-hover-background: var(--ds-color-neutral-surface-default);
-  --dsc-btn-secondary-active-background: var(--ds-color-neutral-surface-hover);
-  --dsc-btn-tertiary-color: var(--ds-color-neutral-text-subtle);
-  --dsc-btn-tertiary-hover-color: var(--ds-color-neutral-text-default);
-  --dsc-btn-tertiary-active-color: var(--ds-color-neutral-text-default);
-  --dsc-btn-tertiary-hover-background: var(--ds-color-neutral-surface-default);
-  --dsc-btn-tertiary-active-background: var(--ds-color-neutral-surface-hover);
-}
-
-.ds-btn--danger {
-  --dsc-btn-primary-background: var(--ds-color-danger-base-default);
-  --dsc-btn-primary-color: var(--ds-color-danger-contrast-default);
-  --dsc-btn-primary-hover-background: var(--ds-color-danger-base-hover);
-  --dsc-btn-primary-active-background: var(--ds-color-danger-base-active);
-  --dsc-btn-secondary-color: var(--ds-color-danger-text-subtle);
-  --dsc-btn-secondary-hover-color: var(--ds-color-danger-text-default);
-  --dsc-btn-secondary-active-color: var(--ds-color-danger-text-default);
-  --dsc-btn-secondary-border-color: var(--ds-color-danger-border-strong);
-  --dsc-btn-secondary-hover-background: var(--ds-color-danger-surface-default);
-  --dsc-btn-secondary-active-background: var(--ds-color-danger-surface-hover);
-  --dsc-btn-tertiary-color: var(--ds-color-danger-text-subtle);
-  --dsc-btn-tertiary-hover-color: var(--ds-color-danger-text-default);
-  --dsc-btn-tertiary-active-color: var(--ds-color-danger-text-default);
-  --dsc-btn-tertiary-hover-background: var(--ds-color-danger-surface-default);
-  --dsc-btn-tertiary-active-background: var(--ds-color-danger-surface-hover);
-}

package/card.css

@@ -1,190 +0,0 @@
-.ds-card {
-  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-backround: var(--ds-color-neutral-surface-default);
-  --dsc-card-color: var(--ds-color-neutral-text-default);
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  color: var(--dsc-card-color);
-  border-radius: min(1rem, var(--ds-border-radius-md));
-  border: 1px solid var(--dsc-card-border-color);
-  background: var(--dsc-card-backround);
-}
-
-.ds-card a,
-.ds-card a:visited {
-  color: var(--ds-color-neutral-text-default);
-}
-
-.ds-card > hr {
-  width: 100%;
-  margin: var(--ds-spacing-3) 0;
-}
-
-.ds-card__media {
-  width: auto;
-}
-
-.ds-card__media > * {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: 0;
-}
-
-.ds-card > *:not(.ds-card__media, hr) {
-  padding-left: var(--ds-spacing-6);
-  padding-right: var(--ds-spacing-6);
-}
-
-.ds-card > *:not(.ds-card__media):first-child {
-  padding-top: var(--ds-spacing-6);
-}
-
-.ds-card > *:not(.ds-card__media):last-child {
-  padding-bottom: var(--ds-spacing-6);
-}
-
-.ds-card__media:first-child {
-  padding-bottom: var(--ds-spacing-4);
-}
-
-.ds-card__media:last-child {
-  padding-top: var(--ds-spacing-6);
-}
-
-.ds-card--link {
-  --dsc-card-border-color: var(--ds-color-neutral-border-default);
-
-  text-decoration: none;
-}
-
-.ds-card__footer,
-.ds-card__content {
-  display: flex;
-  justify-content: flex-start;
-  gap: var(--ds-spacing-4);
-  flex-wrap: wrap;
-  word-wrap: break-word;
-  padding: var(--ds-spacing-2) 0;
-  color: inherit;
-}
-
-.ds-card__content {
-  flex-direction: column;
-}
-
-.ds-card__header {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  word-wrap: break-word;
-  font-family: inherit;
-  padding: var(--ds-spacing-2) 0;
-}
-
-.ds-card__header h1,
-.ds-card__header h2,
-.ds-card__header h3,
-.ds-card__header h4,
-.ds-card__header h5,
-.ds-card__header h6 {
-  color: inherit;
-}
-
-.ds-card--link h1,
-.ds-card--link h2,
-.ds-card--link h3,
-.ds-card--link h4,
-.ds-card--link h5,
-.ds-card--link h6 {
-  text-decoration: underline;
-  text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
-  text-underline-offset: max(6px, 0.25rem, 0.22em);
-}
-
-.ds-card--neutral {
-  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-backround: var(--ds-color-neutral-background-default);
-}
-
-.ds-card--neutral.ds-card--link:hover {
-  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-backround: var(--ds-color-neutral-background-subtle);
-}
-
-.ds-card--neutral.ds-card--link:active {
-  --dsc-card-backround: var(--ds-color-neutral-surface-default);
-}
-
-.ds-card--subtle {
-  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-backround: var(--ds-color-neutral-background-subtle);
-}
-
-.ds-card--subtle.ds-card--link:hover {
-  --dsc-card-border-color: var(--ds-color-neutral-border-default);
-  --dsc-card-backround: var(--ds-color-neutral-surface-default);
-}
-
-.ds-card--subtle.ds-card--link:active {
-  --dsc-card-backround: var(--ds-color-neutral-surface-hover);
-}
-
-.ds-card--brand1 {
-  --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
-  --dsc-card-backround: var(--ds-color-brand1-surface-default);
-  --dsc-card-color: var(--ds-color-brand1-text-default);
-}
-
-.ds-card--brand1.ds-card--link {
-  --dsc-card-border-color: var(--ds-color-brand1-border-default);
-}
-
-.ds-card--brand1.ds-card--link:hover {
-  --dsc-card-backround: var(--ds-color-brand1-surface-hover);
-}
-
-.ds-card--brand1.ds-card--link:active {
-  --dsc-card-backround: var(--ds-color-brand1-surface-active);
-}
-
-.ds-card--brand2 {
-  --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
-  --dsc-card-backround: var(--ds-color-brand2-surface-default);
-  --dsc-card-color: var(--ds-color-brand2-text-default);
-}
-
-.ds-card--brand2.ds-card--link {
-  --dsc-card-border-color: var(--ds-color-brand2-border-default);
-}
-
-.ds-card--brand2.ds-card--link:hover {
-  --dsc-card-backround: var(--ds-color-brand2-surface-hover);
-}
-
-.ds-card--brand2.ds-card--link:active {
-  --dsc-card-backround: var(--ds-color-brand2-surface-active);
-}
-
-.ds-card--brand3 {
-  --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
-  --dsc-card-backround: var(--ds-color-brand3-surface-default);
-  --dsc-card-color: var(--ds-color-brand3-text-default);
-}
-
-.ds-card--brand3.ds-card--link {
-  --dsc-card-border-color: var(--ds-color-brand3-border-default);
-}
-
-.ds-card--brand3.ds-card--link:hover {
-  --dsc-card-backround: var(--ds-color-brand3-surface-hover);
-}
-
-.ds-card--brand3.ds-card--link:active {
-  --dsc-card-backround: var(--ds-color-brand3-surface-active);
-}

package/checkbox.css

@@ -1,223 +0,0 @@
-.ds-checkbox {
-  --dsc-checkbox-size: 1.75rem;
-  --dsc-checkbox-focus-border-width: 3px;
-  --dsc-checkbox-background: var(--ds-color-neutral-background-default);
-  --dsc-checkbox-border-color: var(--ds-color-neutral-border-default);
-  --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
-  --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
-  --dsc-checkbox-check_color: transparent;
-
-  display: grid;
-}
-
-.ds-checkbox:has(.ds-checkbox__label) {
-  grid-template-columns: var(--dsc-checkbox-size) auto;
-  gap: var(--ds-spacing-2);
-}
-
-/* Checkbox */
-.ds-checkbox__input {
-  position: relative;
-  width: var(--dsc-checkbox-size);
-  height: var(--dsc-checkbox-size);
-  z-index: 1;
-  appearance: none;
-  margin: 0;
-  align-self: center;
-  outline: none;
-  cursor: pointer;
-  box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
-  background: var(--dsc-checkbox-background);
-  border-radius: min(0.25rem, var(--ds-border-radius-md));
-}
-
-.ds-checkbox__input::before {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 2.75rem;
-  height: 2.75rem;
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-  cursor: pointer;
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-checkbox__label {
-  /* min-height: var(--ds-sizing-10); */
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-  cursor: pointer;
-}
-
-.ds-checkbox__description {
-  margin-top: calc(var(--ds-spacing-2) * -1);
-  color: var(--ds-color-neutral-text-subtle);
-  grid-column: 2;
-}
-
-.ds-checkbox--readonly > .ds-checkbox__label,
-.ds-checkbox--readonly > .ds-checkbox__input,
-.ds-checkbox--readonly > .ds-checkbox__input::before {
-  cursor: default;
-}
-
-.ds-checkbox__input:disabled,
-.ds-checkbox__input:disabled ~ .ds-checkbox__label,
-.ds-checkbox__input:disabled::before {
-  cursor: not-allowed;
-}
-
-/*   .ds-checkbox__input:focus-visible {
-    outline-offset: 3px;
-    outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-color-focus-outer);
-    box-shadow:
-      0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-color-focus-inner),
-      inset 0 0 0 2px var(--dsc-checkbox-border-color);
-  } */
-
-.ds-checkbox__input::after {
-  content: '';
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: var(--dsc-checkbox-check_color);
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
-}
-
-.ds-checkbox__input:checked {
-  --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
-  --dsc-checkbox-background: var(--ds-color-accent-base-default);
-  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
-
-  background: var(--dsc-checkbox-background);
-}
-
-.ds-checkbox__input:indeterminate {
-  --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
-  --dsc-checkbox-background: var(--ds-color-accent-base-default);
-  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
-}
-
-.ds-checkbox__input:indeterminate::after {
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
-}
-
-.ds-checkbox--readonly > .ds-checkbox__input {
-  --dsc-checkbox-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
-}
-
-.ds-checkbox__input:disabled,
-.ds-checkbox__input:disabled ~ .ds-checkbox__label,
-.ds-checkbox__input:disabled ~ .ds-checkbox__description {
-  opacity: var(--ds-disabled-opacity);
-}
-
-/* .ds-checkbox__input:checked:not(:focus-visible) {
-    box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
-  } */
-
-.ds-checkbox:has(.ds-checkbox__input:focus-visible) {
-  --dsc-focus-border-width: 3px;
-
-  outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
-  outline-offset: var(--dsc-focus-border-width);
-  box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-checkbox--readonly > .ds-checkbox__input:checked {
-  --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
-
-  background: var(--dsc-checkbox-background);
-}
-
-.ds-checkbox--readonly > .ds-checkbox__input:indeterminate {
-  --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
-
-  background: var(--dsc-checkbox-background);
-}
-
-.ds-checkbox--error > .ds-checkbox__input:not(:disabled, :focus-visible) {
-  --dsc-checkbox-border-color: var(--ds-color-danger-border-default);
-}
-
-/* Only use hover for non-touch devices to prevent sticky-hovering
-    "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
-@media (hover: hover) and (pointer: fine) {
-  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:not(:disabled) ~ .ds-checkbox__label:hover,
-  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:disabled) ~ .ds-checkbox__label {
-    color: var(--ds-color-accent-text-subtle);
-  }
-
-  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:checked, :disabled, :focus-visible) {
-    --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
-
-    box-shadow:
-      var(--dsc-checkbox-border__hover),
-      inset 0 0 0 2px var(--dsc-checkbox-border-color);
-  }
-
-  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:indeterminate:hover:not(:focus-visible) {
-    --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
-
-    box-shadow: var(--dsc-checkbox-border__hover);
-  }
-
-  .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled, :focus-visible) {
-    box-shadow: var(--dsc-checkbox-border__hover);
-  }
-}
-
-/** Sizing */
-
-.ds-checkbox--sm {
-  --dsc-checkbox-size: var(--ds-sizing-5);
-
-  /* min-height: var(--ds-sizing-10); */
-}
-
-.ds-checkbox--md {
-  --dsc-checkbox-size: var(--ds-sizing-6);
-
-  /* min-height: var(--ds-sizing-11); */
-}
-
-.ds-checkbox--lg {
-  --dsc-checkbox-size: var(--ds-sizing-7);
-
-  /* min-height: var(--ds-sizing-12); */
-}
-
-.ds-checkbox__group {
-  --dsc-checkbox-group-gap: var(--ds-spacing-4);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsc-checkbox-group-gap);
-  width: fit-content;
-}
-
-.ds-checkbox__group--sm {
-  --dsc-checkbox-group-gap: var(--ds-spacing-3);
-
-  margin-top: calc(var(--ds-spacing-1) * -1);
-}
-
-.ds-checkbox__group--md {
-  --dsc-checkbox-group-gap: var(--ds-spacing-4);
-}
-
-.ds-checkbox__group--lg {
-  --dsc-checkbox-group-gap: var(--ds-spacing-5);
-
-  margin-top: var(--ds-spacing-1);
-}