@digdir/designsystemet-css 1.0.0-next.36 → 1.0.0-next.38

package/button.css

@@ -1,116 +0,0 @@
-.ds-button {
-  /* default color: accent */
-  --dsc-button-background--active: var(--ds-color-accent-base-active);
-  --dsc-button-background--hover: var(--ds-color-accent-base-hover);
-  --dsc-button-background: var(--ds-color-accent-base-default);
-  --dsc-button-color: var(--ds-color-accent-contrast-default);
-  --dsc-button-border-color: transparent;
-
-  &[data-variant='secondary'],
-  &[data-variant='tertiary'] {
-    --dsc-button-background: transparent;
-    --dsc-button-background--active: var(--ds-color-accent-surface-hover);
-    --dsc-button-background--hover: var(--ds-color-accent-surface-default);
-    --dsc-button-color: var(--ds-color-accent-text-subtle);
-  }
-  &[data-variant='secondary'] {
-    --dsc-button-border-color: var(--ds-color-accent-border-strong);
-  }
-
-  &[data-color] {
-    --dsc-button-background--active: var(--ds-color-base-active);
-    --dsc-button-background--hover: var(--ds-color-base-hover);
-    --dsc-button-background: var(--ds-color-base-default);
-    --dsc-button-color: var(--ds-color-contrast-default);
-
-    &[data-variant='secondary'],
-    &[data-variant='tertiary'] {
-      --dsc-button-background: transparent;
-      --dsc-button-background--active: var(--ds-color-surface-hover);
-      --dsc-button-background--hover: var(--ds-color-surface-default);
-      --dsc-button-color: var(--ds-color-text-subtle);
-    }
-    &[data-variant='secondary'] {
-      --dsc-button-border-color: var(--ds-color-border-strong);
-    }
-  }
-
-  --dsc-button-font-size: var(--ds-font-size-5);
-  --dsc-button-gap: var(--ds-spacing-2);
-  --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-  --dsc-button-size: var(--ds-sizing-12);
-
-  align-items: center;
-  background: var(--dsc-button-background);
-  border-radius: var(--ds-border-radius-default);
-  border: var(--ds-border-width-default) solid var(--dsc-button-border-color);
-  box-sizing: border-box;
-  color: var(--dsc-button-color);
-  cursor: pointer;
-  font-family: inherit;
-  font-weight: var(--ds-font-weight-medium);
-  gap: var(--dsc-button-gap);
-  justify-content: center;
-  line-height: var(--ds-line-height-sm);
-  min-height: var(--dsc-button-size);
-  min-width: var(--dsc-button-size);
-  outline: none;
-  padding: var(--dsc-button-padding);
-  text-align: inherit;
-  text-decoration: none;
-
-  @composes ds-focus from './base/base.css';
-
-  &:not([data-size]) {
-    font-size: inherit; /* Ensure inheriting font-size when <button> */
-  }
-
-  & :where(img, svg) {
-    flex-shrink: 0;
-    font-size: 1.25em;
-  }
-
-  &:focus-visible {
-    position: relative; /* Place focusring on top */
-  }
-
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  &[data-icon] {
-    width: var(--dsc-button-size); /* Ensure it keeps square shape */
-    height: var(--dsc-button-size); /* Ensure it keeps square shape */
-    padding: 0;
-  }
-
-  &[data-fullwidth] {
-    width: 100%;
-    text-align: center;
-  }
-
-  /**
-   * States
-   */
-
-  @media (hover: hover) and (pointer: fine) {
-    /* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */
-    &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
-      background: var(--dsc-button-background--hover);
-    }
-  }
-
-  &[aria-busy='true'] {
-    cursor: progress;
-  }
-
-  &:is(:disabled, [aria-disabled='true']) {
-    cursor: not-allowed;
-    opacity: var(--ds-disabled-opacity);
-  }
-
-  /* Using :where to prevent adding specificity */
-  &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
-    background-color: var(--dsc-button-background--active);
-  }
-}

package/card.css

@@ -1,127 +0,0 @@
-.ds-card {
-  /* default color: neutral */
-  --dsc-card-background--active: var(--ds-color-neutral-surface-default);
-  --dsc-card-background--hover: var(--ds-color-neutral-background-subtle);
-  --dsc-card-background: var(--ds-color-neutral-background-default);
-  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-color: var(--ds-color-neutral-text-default);
-
-  &[data-color]:where(:not([data-color='subtle'])) {
-    --dsc-card-background--active: var(--ds-color-surface-default);
-    --dsc-card-background--hover: var(--ds-color-background-subtle);
-    --dsc-card-background: var(--ds-color-surface-default);
-    --dsc-card-border-color: var(--ds-color-border-subtle);
-    --dsc-card-color: var(--ds-color-text-default);
-  }
-  &[data-color='neutral'] {
-    --dsc-card-background: var(--ds-color-background-default);
-  }
-  &[data-color='subtle'] {
-    --dsc-card-background: var(--ds-color-neutral-background-subtle);
-  }
-
-  --dsc-card-border: 1px solid var(--dsc-card-border-color);
-  --dsc-card-gap: var(--ds-spacing-3);
-  --dsc-card-padding: var(--ds-spacing-6);
-
-  background: var(--dsc-card-background);
-  border-radius: var(--ds-border-radius-lg);
-  border: var(--dsc-card-border);
-  box-sizing: border-box;
-  color: var(--dsc-card-color);
-  display: block;
-  font-family: inherit;
-  margin: 0;
-  overflow: clip; /* Needed to clip media elements and and Card.Block */
-  padding: var(--dsc-card-padding);
-  text-align: inherit;
-
-  &:not([data-size]) {
-    font-size: inherit; /* Ensure inheriting font-size when <button> */
-  }
-
-  /* Style link in heading, or heading when Card is anchor */
-  :is(h1, h2, h3, h4, h5, h6) a:any-link /* Using :any-link to target both a and a:visited */,
-  &:is(a:any-link, button, [role='button']) :is(h1, h2, h3, h4, h5, h6) {
-    color: inherit;
-    outline: 0;
-    text-decoration: underline;
-    text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
-    text-underline-offset: max(6px, 0.25rem, 0.22em);
-  }
-
-  /* Add states when Card is a anchor, button, or when containing a anchor in heading */
-  &:where(a, button, [role='button']),
-  &:where(:has(:is(h1, h2, h3, h4, h5, h6) a)) {
-    cursor: pointer;
-    text-decoration: none;
-
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: var(--dsc-card-background--hover);
-      }
-    }
-
-    &:where(:focus-visible, :has(:focus-visible)) {
-      @composes ds-focus--visible from './base/base.css';
-    }
-
-    &:active {
-      background: var(--dsc-card-background--active);
-    }
-  }
-
-  &:has(> .ds-card__block) {
-    padding: 0; /* Let Card.Block own the padding */
-  }
-}
-
-/* Using :where to overwrite user agent CSS, but not our own CSS */
-:where(.ds-card, .ds-card__block) {
-  & > :first-child {
-    margin-block: 0;
-  }
-
-  & > * + * {
-    margin-block: var(--dsc-card-gap) 0; /* https://every-layout.dev/layouts/stack/ */
-  }
-}
-
-.ds-card__block {
-  box-sizing: border-box;
-  margin: 0;
-  padding: var(--dsc-card-padding);
-  position: relative;
-
-  /* Needed to support automatic separator border between both vertical and horizontal stacking Card.Block: */
-  &::before {
-    content: '';
-    border-top: var(--dsc-card-border);
-    position: absolute;
-    inset: 0 0 auto;
-    translate: 0 -100%;
-  }
-
-  &::after {
-    content: '';
-    border-left: var(--dsc-card-border);
-    position: absolute;
-    inset: 0 auto 0 0;
-    translate: -100%;
-  }
-
-  &:has(> :is(audio, figure, iframe, img, video):only-child) {
-    padding: 0;
-
-    & > * {
-      border: 0;
-      display: block;
-      height: auto;
-      width: 100%;
-    }
-
-    & > iframe {
-      aspect-ratio: 16 / 9; /* Make iframes scale responsively */
-    }
-  }
-}

package/chip.css

@@ -1,107 +0,0 @@
-.ds-chip {
-  --dsc-chip-background: var(--ds-color-surface-default);
-  --dsc-chip-background--hover: var(--ds-color-surface-hover);
-  --dsc-chip-background--active: var(--ds-color-surface-active);
-  --dsc-chip-background--checked: var(--ds-color-base-default);
-  --dsc-chip-background--checked--hover: var(--ds-color-base-hover);
-  --dsc-chip-background--checked--active: var(--ds-color-base-active);
-  --dsc-chip-border-color: var(--ds-color-border-subtle);
-  --dsc-chip-border-color--checked: transparent;
-  --dsc-chip-color: var(--ds-color-text-default);
-  --dsc-chip-color--checked: var(--ds-color-contrast-default);
-  --dsc-chip-input-color: var(--ds-color-border-strong);
-  --dsc-chip-input-color--checked: var(--ds-color-base-default);
-
-  --dsc-chip-border-radius: var(--ds-border-radius-full);
-  --dsc-chip-height: var(--ds-sizing-8);
-  --dsc-chip-icon-size: var(--ds-spacing-7);
-  --dsc-chip-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
-  --dsc-chip-input-size: var(--ds-spacing-6);
-  --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Distance between edge of input and chip */
-
-  align-items: center;
-  background: var(--dsc-chip-background);
-  border-radius: var(--dsc-chip-border-radius);
-  border: 1px solid var(--dsc-chip-border-color);
-  box-sizing: border-box;
-  color: var(--dsc-chip-color);
-  cursor: pointer;
-  display: inline-flex;
-  font-family: inherit;
-  gap: var(--gap);
-  line-height: var(--ds-line-height-sm);
-  margin: 0;
-  min-height: var(--dsc-chip-height);
-  padding: 0 var(--ds-spacing-3);
-  text-decoration: none;
-
-  @composes ds-focus from './base/base.css';
-
-  &:not([data-size]) {
-    font-size: var(--ds-font-size-minus-1);
-  }
-
-  /* Show focus ring when input inside is focused by keyboard interaction */
-  &:has(:focus-visible) {
-    @composes ds-focus--visible from './base/base.css';
-  }
-
-  &:disabled,
-  &:has(input:disabled),
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--ds-disabled-opacity);
-  }
-
-  &[data-removable] {
-    padding-inline-end: var(--gap);
-
-    &::after {
-      content: '';
-      background: currentcolor;
-      height: var(--dsc-chip-icon-size);
-      mask: center / contain no-repeat var(--dsc-chip-icon-url);
-      width: var(--dsc-chip-icon-size);
-    }
-  }
-
-  &:has(input[type='radio']) {
-    padding-inline-start: var(--gap);
-  }
-
-  &:has(input[type='checkbox']) {
-    --dsc-chip-border-radius: var(--ds-border-radius-md);
-    padding-inline: var(--gap);
-  }
-
-  & > input {
-    --dsc-input-background--checked: var(--dsc-chip-color);
-    --dsc-input-background: transparent;
-    --dsc-input-border-color--checked: var(--dsc-chip-color);
-    --dsc-input-border-color: var(--dsc-chip-input-color);
-    --dsc-input-color--checked: var(--dsc-chip-input-color--checked);
-    --dsc-input-size--toggle: var(--dsc-chip-input-size);
-  }
-
-  &:has(input:checked),
-  &[data-removable] {
-    --dsc-chip-color: var(--dsc-chip-color--checked);
-    --dsc-chip-background: var(--dsc-chip-background--checked);
-    --dsc-chip-border-color: var(--dsc-chip-border-color--checked);
-    --dsc-chip-background--hover: var(--dsc-chip-background--checked--hover);
-    --dsc-chip-background--active: var(--dsc-chip-background--checked--active);
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering */
-  @media (hover: hover) and (pointer: fine) {
-    &:not(:has(:disabled, [aria-disabled='true'])) {
-      &:hover {
-        --dsc-chip-background: var(--dsc-chip-background--hover);
-      }
-
-      &:active {
-        --dsc-chip-background: var(--dsc-chip-background--active);
-      }
-    }
-  }
-}

package/combobox.css

@@ -1,306 +0,0 @@
-.ds-combobox {
-  display: grid;
-  background-color: transparent;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-combobox [data-floating-ui-portal] {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-}
-
-.ds-combobox__options-wrapper {
-  padding: var(--ds-spacing-2);
-  background: var(--ds-color-neutral-background-default);
-  color: var(--ds-color-neutral-text-default);
-  overflow-y: auto;
-  z-index: 1600;
-  border-radius: var(--ds-border-radius-md);
-  box-shadow: var(--ds-shadow-md);
-  border: 1px solid var(--ds-color-neutral-border-default);
-}
-
-.ds-combobox--readonly .ds-combobox__input {
-  pointer-events: none;
-}
-
-.ds-combobox__input__wrapper {
-  display: flex;
-  align-items: center;
-  position: relative;
-  gap: var(--ds-spacing-1);
-  cursor: text;
-  padding: var(--ds-spacing-2);
-  border-radius: var(--ds-border-radius-md);
-  width: 100%;
-  height: auto;
-  justify-content: space-between;
-}
-
-.ds-combobox__input__wrapper .ds-combobox__input {
-  height: 100%;
-  min-width: 50px;
-  width: 100%;
-  flex-grow: 1;
-  appearance: none;
-  border: none;
-  background-color: transparent;
-  color: var(--ds-color-neutral-text-default);
-  box-sizing: border-box;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-}
-
-.ds-combobox--sm .ds-combobox__input__wrapper {
-  min-height: var(--ds-sizing-10);
-  padding: 5px var(--ds-spacing-2);
-}
-
-.ds-combobox--md .ds-combobox__input__wrapper {
-  min-height: var(--ds-sizing-12);
-  padding: 7px var(--ds-spacing-3);
-}
-
-.ds-combobox--lg .ds-combobox__input__wrapper {
-  min-height: var(--ds-sizing-14);
-  padding: 7px var(--ds-spacing-4);
-}
-
-.ds-combobox__input__wrapper .ds-combobox__input:focus {
-  outline: none;
-}
-
-.ds-combobox__input__wrapper.ds-combobox--error {
-  border-color: var(--ds-color-danger-border-default);
-  border-width: 2px;
-}
-
-.ds-combobox__chip-and-input {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: var(--ds-spacing-2);
-  align-items: center;
-  background-color: transparent;
-}
-
-.ds-combobox__arrow {
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.ds-combobox__input__wrapper.ds-combobox--readonly {
-  background: var(--ds-color-base-default);
-  border-color: var(--ds-color-base-default);
-}
-
-.ds-combobox__label {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-combobox__description {
-  color: var(--ds-color-neutral-text-subtle);
-  margin-top: calc(var(--ds-spacing-2) * -1);
-}
-
-.ds-combobox__clear-button {
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--ds-color-neutral-text-default);
-  border: none;
-  padding: 0;
-  border-radius: var(--ds-border-radius-sm);
-  height: 29px;
-  width: 29px;
-  aspect-ratio: 1;
-}
-
-.ds-combobox--sm .ds-combobox__clear-button {
-  height: 25px;
-  width: 25px;
-}
-
-.ds-combobox--md .ds-combobox__clear-button {
-  height: 29px;
-  width: 29px;
-}
-
-.ds-combobox--lg .ds-combobox__clear-button {
-  height: 31px;
-  width: 31px;
-}
-
-.ds-combobox__clear-button:not(:disabled):hover {
-  background-color: var(--ds-color-neutral-surface-default);
-}
-
-.ds-combobox__disabled {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-combobox__disabled * {
-  cursor: not-allowed;
-}
-
-.ds-combobox__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-combobox__error-message {
-  margin-top: var(--ds-spacing-2);
-}
-
-.ds-combobox__error-message:empty {
-  display: none;
-}
-
-.ds-combobox__loading {
-  display: flex;
-  gap: var(--ds-spacing-2);
-  align-content: center;
-}
-
-/**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-.ds-combobox__input__wrapper:has(input:focus) {
-  --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);
-}
-
-.ds-combobox__input__wrapper:focus-within:hover {
-  border-color: var(--ds-color-neutral-border-default);
-}
-
-.ds-combobox__empty {
-  font-weight: 400;
-  padding: var(--ds-spacing-2) var(--ds-spacing-3);
-}
-
-.ds-combobox__custom {
-  font-weight: 400;
-  padding: var(--ds-spacing-2) var(--ds-spacing-3);
-}
-
-.ds-combobox__option {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1.2em 1fr;
-  padding: var(--ds-spacing-2) var(--ds-spacing-3);
-  padding-left: var(--ds-spacing-1);
-  border: none;
-  border-left: 5px solid transparent;
-  border-radius: var(--ds-border-radius-sm);
-  justify-content: start;
-  background: none;
-  text-align: left;
-  height: auto;
-  cursor: pointer;
-  font-family: inherit;
-  font-weight: 400;
-}
-
-.ds-combobox__option.ds-combobox__option--active {
-  background: var(--ds-color-background-subtle);
-  border-left: 5px solid var(--ds-color-base-default);
-}
-
-.ds-combobox__option > div {
-  align-self: flex-start;
-}
-
-.ds-combobox__option.ds-combobox__option--multiple {
-  grid-template-columns: auto 1fr;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-combobox__option__label {
-  margin: auto 0;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  cursor: pointer;
-  gap: var(--ds-spacing-1);
-  color: var(--ds-color-neutral-text-default);
-}
-
-.ds-combobox__option--active .ds-combobox__option__label {
-  color: var(--ds-color-text-default);
-}
-
-.ds-combobox__option__icon-wrapper {
-  width: var(--ds-spacing-6);
-  aspect-ratio: 1 / 1;
-  border: 2px solid var(--ds-color-neutral-border-default);
-  border-radius: var(--ds-border-radius-sm);
-  background-color: var(--ds-color-neutral-background-default);
-  display: grid;
-  place-items: center;
-}
-
-.ds-combobox__option--active .ds-combobox__option__icon-wrapper {
-  border-color: var(--ds-color-base-default);
-}
-
-.ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper {
-  width: var(--ds-spacing-5);
-}
-
-.ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper {
-  width: var(--ds-spacing-6);
-}
-
-.ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper {
-  width: var(--ds-spacing-7);
-}
-
-.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected {
-  border-color: var(--ds-color-base-default);
-  background-color: var(--ds-color-base-default);
-}
-
-.ds-combobox__option__icon-wrapper__icon {
-  box-sizing: border-box;
-  padding-top: 0.2em;
-  transform: scale(1.4);
-  stroke: var(--ds-color-neutral-text-default);
-  color: var(--ds-color-neutral-text-default);
-}
-
-.ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon {
-  padding-top: 0;
-}
-
-.ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon {
-  stroke: var(--ds-color-text-default);
-  color: var(--ds-color-text-default);
-}
-
-.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon {
-  color: white;
-  stroke: white;
-}
-
-.ds-combobox__option__description {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: var(--ds-spacing-1);
-  color: var(--ds-color-neutral-text-subtle);
-  font-weight: 400;
-}

package/dist/button.css

@@ -1 +0,0 @@
-.ds-button{--dsc-button-background--active:var(--ds-color-accent-base-active);--dsc-button-background--hover:var(--ds-color-accent-base-hover);--dsc-button-background:var(--ds-color-accent-base-default);--dsc-button-color:var(--ds-color-accent-contrast-default);--dsc-button-border-color:transparent}.ds-button[data-variant=secondary],.ds-button[data-variant=tertiary]{--dsc-button-background:transparent;--dsc-button-background--active:var(--ds-color-accent-surface-hover);--dsc-button-background--hover:var(--ds-color-accent-surface-default);--dsc-button-color:var(--ds-color-accent-text-subtle)}.ds-button[data-variant=secondary]{--dsc-button-border-color:var(--ds-color-accent-border-strong)}.ds-button[data-color]{--dsc-button-background--active:var(--ds-color-base-active);--dsc-button-background--hover:var(--ds-color-base-hover);--dsc-button-background:var(--ds-color-base-default);--dsc-button-color:var(--ds-color-contrast-default)}.ds-button[data-color][data-variant=secondary],.ds-button[data-color][data-variant=tertiary]{--dsc-button-background:transparent;--dsc-button-background--active:var(--ds-color-surface-hover);--dsc-button-background--hover:var(--ds-color-surface-default);--dsc-button-color:var(--ds-color-text-subtle)}.ds-button[data-color][data-variant=secondary]{--dsc-button-border-color:var(--ds-color-border-strong)}.ds-button{--dsc-button-font-size:var(--ds-font-size-5);--dsc-button-gap:var(--ds-spacing-2);--dsc-button-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-button-size:var(--ds-sizing-12);align-items:center;background:var(--dsc-button-background);border:var(--ds-border-width-default) solid var(--dsc-button-border-color);border-radius:var(--ds-border-radius-default);box-sizing:border-box;color:var(--dsc-button-color);cursor:pointer;font-family:inherit;font-weight:var(--ds-font-weight-medium);gap:var(--dsc-button-gap);justify-content:center;line-height:var(--ds-line-height-sm);min-height:var(--dsc-button-size);min-width:var(--dsc-button-size);outline:none;padding:var(--dsc-button-padding);text-align:inherit;text-decoration:none}.ds-button:focus-visible{box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}.ds-button:focus-visible *{--ds--focus: }.ds-button:not([data-size]){font-size:inherit}.ds-button :where(img,svg){flex-shrink:0;font-size:1.25em}.ds-button:focus-visible{position:relative}.ds-button:not([hidden]){display:flex}.ds-button[data-icon]{height:var(--dsc-button-size);padding:0;width:var(--dsc-button-size)}.ds-button[data-fullwidth]{text-align:center;width:100%}@media (hover:hover) and (pointer:fine){.ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):hover{background:var(--dsc-button-background--hover)}}.ds-button[aria-busy=true]{cursor:progress}.ds-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):active{background-color:var(--dsc-button-background--active)}