
.kds-avatar[data-v-4a34a186] {
  position: relative;
  display: inline-block;
  inline-size: var(--kds-dimension-component-width-1-5x);
  block-size: var(--kds-dimension-component-width-1-5x);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  vertical-align: middle;
  border-radius: var(--kds-border-radius-container-pill);
}
.kds-avatar[data-v-4a34a186]::after {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  content: "";
  border: var(--kds-border-base-muted);
  border-radius: inherit;
}
.kds-avatar-image[data-v-4a34a186] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.kds-avatar-initials[data-v-4a34a186] {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  container-type: inline-size;
  font: var(--kds-font-base-body-small-strong);
  color: var(--kds-color-text-and-icon-primary-inverted);
  user-select: none;
  background: var(--kds-color-background-primary-bold-initial);
}
.kds-avatar-initials > span[data-v-4a34a186] {
  font-size: calc(1em + calc(100cqi - 2em) / 2);
}

.kds-color-swatch[data-v-c8fc7e8e] {
  display: inline-block;
  width: var(--kds-dimension-icon-0-75x);
  height: var(--kds-dimension-icon-0-75x);
  overflow: hidden;
  line-height: 0;
  border: var(--kds-border-base-muted);
  border-radius: var(--kds-border-radius-container-0-25x);
}
.kds-icon {
&[data-v-3a57d423] {
  --icon-width: var(--kds-dimension-icon-1x);
  --icon-height: var(--kds-dimension-icon-1x);
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);

  display: inline-block;
  width: var(--icon-width);
  /* min sizes, otherwise they might collapse if there is not enough space */
  min-width: var(--icon-width);
  height: var(--icon-height);
  min-height: var(--icon-height);
  vertical-align: middle;
  stroke-width: var(--icon-stroke-width);
  shape-rendering: geometricPrecision;
}
&.xsmall[data-v-3a57d423] {
    --icon-width: var(--kds-dimension-icon-0-56x);
    --icon-height: var(--kds-dimension-icon-0-56x);
    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
@media (max-resolution: 1.5dppx) {
      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
      rendering issues which manifests in misaligned or 'jumping' svg content.
      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
      CSS transform. Thus the position of the SVG elements stays intact. */
&[data-v-3a57d423] {
        --scaling-factor: 0.75;
        --icon-width: var(--kds-dimension-icon-0-75x);
        --icon-height: var(--kds-dimension-icon-0-75x);
        --icon-stroke-width: calc(
          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
        );
        transform: scale(var(--scaling-factor));
}
}
}
&.small[data-v-3a57d423] {
    --icon-width: var(--kds-dimension-icon-0-75x);
    --icon-height: var(--kds-dimension-icon-0-75x);
    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
}
&.large[data-v-3a57d423] {
    --icon-width: var(--kds-dimension-icon-1-25x);
    --icon-height: var(--kds-dimension-icon-1-25x);
    --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
}
}
.kds-icon {
&[data-v-d7166d18] {
  --icon-width: var(--kds-dimension-icon-1x);
  --icon-height: var(--kds-dimension-icon-1x);
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);

  display: inline-block;
  width: var(--icon-width);
  /* min sizes, otherwise they might collapse if there is not enough space */
  min-width: var(--icon-width);
  height: var(--icon-height);
  min-height: var(--icon-height);
  vertical-align: middle;
  stroke-width: var(--icon-stroke-width);
  shape-rendering: geometricPrecision;
}
&.xsmall[data-v-d7166d18] {
    --icon-width: var(--kds-dimension-icon-0-56x);
    --icon-height: var(--kds-dimension-icon-0-56x);
    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
@media (max-resolution: 1.5dppx) {
      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
      rendering issues which manifests in misaligned or 'jumping' svg content.
      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
      CSS transform. Thus the position of the SVG elements stays intact. */
&[data-v-d7166d18] {
        --scaling-factor: 0.75;
        --icon-width: var(--kds-dimension-icon-0-75x);
        --icon-height: var(--kds-dimension-icon-0-75x);
        --icon-stroke-width: calc(
          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
        );
        transform: scale(var(--scaling-factor));
}
}
}
&.small[data-v-d7166d18] {
    --icon-width: var(--kds-dimension-icon-0-75x);
    --icon-height: var(--kds-dimension-icon-0-75x);
    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
}
&.large[data-v-d7166d18] {
    --icon-width: var(--kds-dimension-icon-1-25x);
    --icon-height: var(--kds-dimension-icon-1-25x);
    --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
}
}
.kds-data-type-icon-container {
&[data-v-d7166d18] {
  --data-type-height: var(--kds-dimension-component-height-1x);
  --data-type-width: var(--kds-dimension-component-width-1x);
  --data-type-padding: var(--kds-spacing-container-0-12x);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--data-type-width);
  height: var(--data-type-height);
  padding: var(--data-type-padding);
  color: var(--kds-color-desktop-header-text-and-icon-muted);
  background-color: var(--kds-color-page-default);
  border: var(--kds-border-base-muted);
  border-radius: var(--kds-border-radius-container-0-12x);

  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
}
&.small[data-v-d7166d18] {
    --data-type-height: var(--kds-dimension-icon-0-75x);
    --data-type-width: var(--kds-dimension-icon-0-75x);
    --data-type-padding: var(--kds-spacing-container-none);
}
&.large[data-v-d7166d18] {
    --data-type-height: var(--kds-dimension-component-height-1-25x);
    --data-type-width: var(--kds-dimension-component-width-1-25x);
}
& .kds-icon.kds-data-type-icon {
&.small[data-v-d7166d18] {
      --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
}
&.medium[data-v-d7166d18] {
      --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
}
}
}

.kds-live-status {
&[data-v-8bf6a94a] {
  --dot-color: var(--kds-color-text-and-icon-disabled);

  display: inline-flex;
  flex-shrink: 0;
  gap: 0; /* gap already included in dot */
  align-items: center;
  line-height: 0;
}
&.red[data-v-8bf6a94a] {
    --dot-color: var(--kds-color-text-and-icon-danger);
}
&.orange[data-v-8bf6a94a] {
    --dot-color: var(--kds-color-text-and-icon-warning);
}
&.green[data-v-8bf6a94a] {
    --dot-color: var(--kds-color-text-and-icon-success);
}
.dot {
&[data-v-8bf6a94a] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--kds-dimension-icon-1-25x);
    height: var(--kds-dimension-icon-1-25x);
}
&[data-v-8bf6a94a]::after {
      display: block;
      width: 50%;
      height: 50%;
      content: "";
      background-color: var(--dot-color);
      border-radius: var(--kds-border-radius-container-pill);
}
}
.label[data-v-8bf6a94a] {
    font: var(--kds-font-base-subtext-medium);
    color: var(--kds-color-text-and-icon-neutral);
    white-space: nowrap;
}
&.size-medium {
.dot[data-v-8bf6a94a] {
      width: var(--kds-dimension-icon-1x);
      height: var(--kds-dimension-icon-1x);
}
.label[data-v-8bf6a94a] {
      font: var(--kds-font-base-subtext-small);
}
}
&.size-small {
.dot[data-v-8bf6a94a] {
      width: var(--kds-dimension-icon-0-75x);
      height: var(--kds-dimension-icon-0-75x);
}
.label[data-v-8bf6a94a] {
      font: var(--kds-font-base-subtext-xsmall);
}
}
}

.kds-loading-spinner {
&[data-v-74bb7c3d] {
  --icon-width: var(--kds-dimension-icon-1x);
  --icon-height: var(--kds-dimension-icon-1x);
  --icon-stroke-width: 12; /* 10% of size */

  width: var(--icon-width);
  height: var(--icon-height);

  --color-track: var(--kds-color-loading-spinner-track-on-surface);
  --color-loader: var(--kds-color-loading-spinner-progress-on-surface);
}
&.xsmall[data-v-74bb7c3d] {
    --icon-width: var(--kds-dimension-icon-0-56x);
    --icon-height: var(--kds-dimension-icon-0-56x);
}
&.small[data-v-74bb7c3d] {
    --icon-width: var(--kds-dimension-icon-0-75x);
    --icon-height: var(--kds-dimension-icon-0-75x);
}
&.large[data-v-74bb7c3d] {
    --icon-width: var(--kds-dimension-icon-1-25x);
    --icon-height: var(--kds-dimension-icon-1-25x);
}
&[data-style="onPrimary"][data-v-74bb7c3d] {
    --color-track: var(--kds-color-loading-spinner-track-on-primary);
    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
}
& .track[data-v-74bb7c3d] {
    fill: none;
    stroke: var(--color-track);
    stroke-width: var(--icon-stroke-width);
}
& .loader[data-v-74bb7c3d] {
    fill: none;
    stroke: var(--color-loader);
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-dasharray: 80 240;
    transform: rotate(-90deg);
    transform-origin: center;

    /* REQUIRED for SVG rotation */
    transform-box: fill-box;
    animation: spin-74bb7c3d 1.2s linear infinite;
}
}
@keyframes spin-74bb7c3d {
from {
    transform: rotate(-90deg);
}
to {
    transform: rotate(270deg);
}
}

html.kds-legacy {
  --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
}

.button {
&[data-v-b0f9559f] {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 15px;
  max-width: 100%;
  overflow: hidden;
  cursor: pointer;

  /* for LinkButton */
}
&[data-v-b0f9559f]:is(a) {
    text-decoration: none;
}
&.disabled[data-v-b0f9559f] {
    cursor: default;
}
&[data-v-b0f9559f]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&.filled {
&[data-v-b0f9559f] {
    color: var(--kds-color-text-and-icon-primary-inverted);
    background-color: var(--kds-color-background-primary-bold-initial);
    border: var(--kds-border-action-transparent);
}
&.disabled[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-disabled-inverted);
      background-color: var(--kds-color-background-disabled-primary);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
        background-color: var(--kds-color-background-primary-bold-hover);
}
&[data-v-b0f9559f]:active {
        background-color: var(--kds-color-background-primary-bold-active);
}
}
&.destructive {
&[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-danger-inverted);
      background-color: var(--kds-color-background-danger-bold-initial);
}
&.disabled[data-v-b0f9559f] {
        color: var(--kds-color-text-and-icon-disabled-inverted);
        background-color: var(--kds-color-background-disabled-danger);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
          background-color: var(--kds-color-background-danger-bold-hover);
}
&[data-v-b0f9559f]:active {
          background-color: var(--kds-color-background-danger-bold-active);
}
}
}
}
&.outlined {
&[data-v-b0f9559f] {
    color: var(--kds-color-text-and-icon-neutral);
    background-color: var(--kds-color-background-neutral-initial);
    border: var(--kds-border-action-default);
}
&.disabled[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-disabled);
      border: var(--kds-border-action-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
        background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-b0f9559f]:active {
        background-color: var(--kds-color-background-neutral-active);
}
}
&.destructive {
&[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-danger);
      border: var(--kds-border-action-error);
}
&.disabled[data-v-b0f9559f] {
        color: var(--kds-color-text-and-icon-disabled);
        border: var(--kds-border-action-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
          background-color: var(--kds-color-background-danger-hover);
}
&[data-v-b0f9559f]:active {
          background-color: var(--kds-color-background-danger-active);
}
}
}
}
&.transparent {
&[data-v-b0f9559f] {
    color: var(--kds-color-text-and-icon-neutral);
    background-color: var(--kds-color-background-neutral-initial);
    border: var(--kds-border-action-transparent);
}
&.disabled[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
        background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-b0f9559f]:active {
        background-color: var(--kds-color-background-neutral-active);
}
}
&.destructive {
&[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-danger);
}
&.disabled[data-v-b0f9559f] {
        color: var(--kds-color-text-and-icon-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
          background-color: var(--kds-color-background-danger-hover);
}
&[data-v-b0f9559f]:active {
          background-color: var(--kds-color-background-danger-active);
}
}
}
}
&.toggled {
&[data-v-b0f9559f] {
    color: var(--kds-color-text-and-icon-selected);
    background-color: var(--kds-color-background-selected-initial);
    border: var(--kds-border-action-selected);
}
&.disabled[data-v-b0f9559f] {
      color: var(--kds-color-text-and-icon-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-b0f9559f]:hover {
        background-color: var(--kds-color-background-selected-hover);
}
&[data-v-b0f9559f]:active {
        background-color: var(--kds-color-background-selected-active);
}
}
}
& .label[data-v-b0f9559f] {
    max-width: 200px;
    padding: 0 var(--kds-spacing-container-0-12x);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-rendering: geometricprecision;
}
&.xsmall[data-v-b0f9559f] {
    gap: var(--kds-spacing-container-0-12x);
    height: var(--kds-dimension-component-height-1-25x);
    padding: 0
      calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */

    font: var(--kds-font-base-interactive-xsmall-strong);
    border-radius: var(
      --kds-legacy-button-border-radius,
      var(--kds-border-radius-container-0-25x)
    );
}
&.small[data-v-b0f9559f] {
    gap: var(--kds-spacing-container-0-12x);
    height: var(--kds-dimension-component-height-1-5x);
    padding: 0
      calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */

    font: var(--kds-font-base-interactive-small-strong);
    border-radius: var(
      --kds-legacy-button-border-radius,
      var(--kds-border-radius-container-0-37x)
    );
}
&.medium[data-v-b0f9559f] {
    gap: var(--kds-spacing-container-0-25x);
    height: var(--kds-dimension-component-height-1-75x);
    padding: 0
      calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */

    font: var(--kds-font-base-interactive-medium-strong);
    border-radius: var(
      --kds-legacy-button-border-radius,
      var(--kds-border-radius-container-0-37x)
    );
}
&.large {
&[data-v-b0f9559f] {
    gap: var(--kds-spacing-container-0-25x);
    height: var(--kds-dimension-component-height-2-25x);
    padding: 0
      calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */

    font: var(--kds-font-base-interactive-large-strong);
    border-radius: var(
      --kds-legacy-button-border-radius,
      var(--kds-border-radius-container-0-50x)
    );
}
& .label[data-v-b0f9559f] {
      padding: 0 var(--kds-spacing-container-0-25x);
}
}
&.success[data-v-b0f9559f] {
    color: var(--kds-color-text-and-icon-success-inverted);
    background-color: var(--kds-color-background-success-bold-initial);
    border: var(--kds-border-action-transparent);
    transition:
      background-color 200ms ease-out,
      border-color 200ms ease-out,
      color 200ms ease-out;
}
&.error[data-v-b0f9559f] {
    color: var(--kds-color-text-and-icon-danger-inverted);
    background-color: var(--kds-color-background-danger-bold-initial);
    border: var(--kds-border-action-transparent);
    transition:
      background-color 200ms ease-out,
      border-color 200ms ease-out,
      color 200ms ease-out;
}
}

.leading {
&[data-v-ec08a9ba] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kds-dimension-icon-1x);
  height: var(--kds-dimension-icon-1x);
}
&.xsmall[data-v-ec08a9ba] {
    width: var(--kds-dimension-icon-0-56x);
    height: var(--kds-dimension-icon-0-56x);
}
&.small[data-v-ec08a9ba] {
    width: var(--kds-dimension-icon-0-75x);
    height: var(--kds-dimension-icon-0-75x);
}
&.large[data-v-ec08a9ba] {
    width: var(--kds-dimension-icon-1-25x);
    height: var(--kds-dimension-icon-1-25x);
}
}
.leading-icon[data-v-ec08a9ba],
.spinner[data-v-ec08a9ba] {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.leading-icon[data-visible="true"][data-v-ec08a9ba],
.spinner[data-visible="true"][data-v-ec08a9ba] {
  opacity: 1;
}

.kds-label-wrapper[data-v-1a5dc1ba] {
  display: flex;
  gap: var(--kds-spacing-container-0-12x);
  align-items: center;
  max-width: 100%;
  min-height: var(--kds-dimension-component-height-0-75x);
  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
}
.label[data-v-1a5dc1ba] {
  display: block;
  flex-grow: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--kds-font-base-title-small-strong);
  color: var(--kds-color-text-and-icon-neutral);
  white-space: nowrap;
}

.subtext {
&[data-v-df9a85a4] {
  display: flex;
  gap: var(--kds-spacing-container-0-25x);
  min-height: 1lh;
  margin-top: var(--kds-spacing-container-0-25x);
  font: var(--kds-font-base-subtext-small);
  color: var(--kds-color-text-and-icon-muted);
}
&.error[data-v-df9a85a4] {
    color: var(--kds-color-text-and-icon-danger);
}
& .subtext-text[data-v-df9a85a4] {
    min-width: 0;
}
}

.checkbox {
&[data-v-428e95ca] {
  --bg-initial: var(--kds-color-background-input-initial);
  --bg-hover: var(--kds-color-background-input-hover);
  --bg-active: var(--kds-color-background-input-active);
  --border: var(--kds-border-action-input);
  --icon-color: var(--kds-color-text-and-icon-selected);
  --text-color: var(--kds-color-text-and-icon-neutral);
  --helper-text-color: var(--kds-color-text-and-icon-muted);

  display: flex;
  gap: var(--kds-spacing-container-0-37x);
  align-items: flex-start;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  outline: none;
  background: none;
  border: none;
}
.control[data-v-428e95ca] {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--kds-dimension-component-height-0-88x);
    height: var(--kds-dimension-component-height-0-88x);
    color: var(--icon-color);
    background: var(--bg-initial);
    border: var(--border);
    border-radius: var(--kds-border-radius-container-0-25x);
}
&:focus-visible .control[data-v-428e95ca] {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&:hover:not(.disabled) .control[data-v-428e95ca] {
    background: var(--bg-hover);
}
&:active:not(.disabled) .control[data-v-428e95ca] {
    background: var(--bg-active);
}
&.checked[data-v-428e95ca],
  &.indeterminate[data-v-428e95ca] {
    --bg-initial: var(--kds-color-background-selected-initial);
    --bg-hover: var(--kds-color-background-selected-hover);
    --bg-active: var(--kds-color-background-selected-active);
    --border: var(--kds-border-action-selected);
}
.content {
&[data-v-428e95ca] {
    display: flex;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-12x);
    text-rendering: geometricprecision;
}
& .label[data-v-428e95ca] {
      padding-top: var(--kds-spacing-container-0-10x);
      font: var(--kds-font-base-interactive-small);
      color: var(--text-color);
}
& .helper-text[data-v-428e95ca] {
      font: var(--kds-font-base-subtext-small);
      color: var(--helper-text-color);
}
}
&.disabled[data-v-428e95ca] {
    --border: var(--kds-border-action-disabled);
    --icon-color: var(--kds-color-text-and-icon-disabled);
    --text-color: var(--kds-color-text-and-icon-disabled);
    --helper-text-color: var(--kds-color-text-and-icon-disabled);

    cursor: default;
}
&.error {
&[data-v-428e95ca] {
    --border: var(--kds-border-action-error);
    --icon-color: var(--kds-color-text-and-icon-danger);
    --text-color: var(--kds-color-text-and-icon-danger);
    --bg-hover: var(--kds-color-background-danger-hover);
    --bg-active: var(--kds-color-background-danger-active);
}
&.checked[data-v-428e95ca],
    &.indeterminate[data-v-428e95ca] {
      --bg-initial: var(--kds-color-background-danger-initial);
}
}
}
.subtext-wrapper[data-v-428e95ca] {
  padding-left: calc(
    var(--kds-dimension-component-height-0-88x) +
      var(--kds-spacing-container-0-37x)
  );
}

.checkbox-group[data-v-c38eeda5] {
  padding: 0;
  margin: 0;
  border: none;
}
.options[data-v-c38eeda5] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
}
.options.horizontal[data-v-c38eeda5] {
  flex-flow: row wrap;
  align-items: flex-start;
}

.radio {
&[data-v-a7490a52] {
  --bg-initial: var(--kds-color-background-input-initial);
  --bg-hover: var(--kds-color-background-input-hover);
  --bg-active: var(--kds-color-background-input-active);
  --border: var(--kds-border-action-input);
  --dot-color: var(--kds-color-text-and-icon-selected);
  --text-color: var(--kds-color-text-and-icon-neutral);
  --helper-text-color: var(--kds-color-text-and-icon-muted);

  display: flex;
  gap: var(--kds-spacing-container-0-37x);
  align-items: flex-start;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  outline: none;
  background: none;
  border: none;
}
.control[data-v-a7490a52] {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--kds-dimension-component-height-0-88x);
    height: var(--kds-dimension-component-height-0-88x);
    background: var(--bg-initial);
    border: var(--border);
    border-radius: 50%;
}
.control .dot[data-v-a7490a52] {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}
.control .dot circle[data-v-a7490a52] {
    fill: var(--dot-color);
    transform: scale(0.5);
    transform-origin: center;
    transform-box: fill-box;
}
&:focus-visible .control[data-v-a7490a52] {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&:hover:not(.disabled) .control[data-v-a7490a52] {
    background: var(--bg-hover);
}
&:active:not(.disabled) .control[data-v-a7490a52] {
    background: var(--bg-active);
}
&.selected[data-v-a7490a52] {
    --border: var(--kds-border-action-selected);
    --bg-initial: var(--kds-color-background-selected-initial);
    --bg-hover: var(--kds-color-background-selected-hover);
    --bg-active: var(--kds-color-background-selected-active);
}
.content {
&[data-v-a7490a52] {
    display: flex;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-25x);
}
& .label[data-v-a7490a52] {
      padding-top: var(--kds-spacing-container-0-10x);
      font: var(--kds-font-base-interactive-small);
      color: var(--text-color);
}
& .helper-text[data-v-a7490a52] {
      font: var(--kds-font-base-subtext-small);
      color: var(--helper-text-color);
}
}
&.disabled[data-v-a7490a52] {
    --bg-initial: var(--kds-color-background-input-initial);
    --border: var(--kds-border-action-disabled);
    --dot-color: var(--kds-color-text-and-icon-disabled);
    --text-color: var(--kds-color-text-and-icon-disabled);
    --helper-text-color: var(--kds-color-text-and-icon-disabled);

    cursor: default;
}
&.error {
&[data-v-a7490a52] {
    --bg-hover: var(--kds-color-background-danger-hover);
    --bg-active: var(--kds-color-background-danger-active);
    --border: var(--kds-border-action-error);
    --dot-color: var(--kds-color-text-and-icon-danger);
    --text-color: var(--kds-color-text-and-icon-danger);
}
&.selected[data-v-a7490a52] {
      --bg-initial: var(--kds-color-background-danger-initial);
      --border: var(--kds-border-action-error);
}
}
}

.radio-button-group[data-v-9cc4dcdd] {
  padding: 0;
  margin: 0;
  border: none;
}
.options[data-v-9cc4dcdd] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
}
.options.horizontal[data-v-9cc4dcdd] {
  flex-flow: row wrap;
  align-items: flex-start;
}

.option {
&[data-v-93f3f577] {
  display: flex;
  flex: 0 1 auto;
  gap: var(--kds-spacing-container-0-25x);
  align-items: center;
  justify-content: center;
  min-width: calc(
    var(--kds-dimension-icon-1x) + (2 * var(--kds-spacing-container-0-37x))
  );
  max-width: 100%;
  height: var(--kds-dimension-component-height-1-5x);
  padding: 0 var(--kds-spacing-container-0-37x);
  font: var(--kds-font-base-interactive-medium-strong);
  color: var(--kds-color-text-and-icon-neutral);
  text-align: center;
  cursor: pointer;

  /* variant=default */
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-action-transparent);
  border-radius: var(--kds-border-radius-container-0-25x);
}
&.size-small[data-v-93f3f577] {
    height: var(--kds-dimension-component-height-1-25x);
    font: var(--kds-font-base-interactive-small-strong);
}
&[data-v-93f3f577]:focus-visible {
    outline: none;
}
&[data-v-93f3f577]:hover:not(:disabled) {
    background: var(--kds-color-background-neutral-hover);
}
&[data-v-93f3f577]:active:not(:disabled) {
    background: var(--kds-color-background-neutral-active);
}
&.selected {
&[data-v-93f3f577] {
    color: var(--kds-color-text-and-icon-selected);
    background: var(--kds-color-background-selected-initial);
    border: var(--kds-border-action-selected);
}
&[data-v-93f3f577]:hover:not(:disabled) {
      background: var(--kds-color-background-selected-hover);
}
&[data-v-93f3f577]:active:not(:disabled) {
      background: var(--kds-color-background-selected-active);
}
&.variant-muted {
&[data-v-93f3f577] {
      color: var(--kds-color-text-and-icon-neutral);
      background: var(--kds-color-background-input-initial);
}
&[data-v-93f3f577]:hover:not(:disabled) {
        background: var(--kds-color-background-input-hover);
}
&[data-v-93f3f577]:active:not(:disabled) {
        background: var(--kds-color-background-input-active);
}
}
}
&.disabled[data-v-93f3f577] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
&.disabled.selected[data-v-93f3f577] {
    color: var(--kds-color-text-and-icon-disabled);
    border: var(--kds-border-action-disabled);
}
}
.option-label[data-v-93f3f577] {
  min-width: 0;
  padding: 0 var(--kds-spacing-container-0-12x);
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
  white-space: nowrap;
}

.value-switch[data-v-666d4c10] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  border: none;
}
.options {
&[data-v-666d4c10] {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--kds-spacing-container-none);
  align-items: flex-start;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding: calc(
    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
  );
  overflow: hidden;
  background: var(--kds-color-surface-muted);
  border: var(--kds-border-action-transparent);
  border-radius: var(--kds-border-radius-container-0-37x);
  box-shadow: var(--kds-fake-border-xs-muted);
  }
&[data-v-666d4c10]:has(:focus-visible) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
    border-radius: var(--kds-border-radius-container-0-44x);
}
&.error[data-v-666d4c10] {
    border: var(--kds-border-action-error);
    box-shadow: none;
}
}

.kds-form-field[data-v-5d99c134] {
  display: flex;
  flex-direction: column;
}

.container {
&[data-v-cf72eb5a] {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--kds-dimension-component-height-1-75x);
  padding: 0 var(--kds-spacing-container-0-25x);
  cursor: text;
  background: var(--kds-color-background-input-initial);
  border: var(--kds-border-action-input);
  border-radius: var(--kds-border-radius-container-0-37x);
}
&[data-v-cf72eb5a]:has(input:focus:not(:disabled)) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-cf72eb5a]:has(.input-field:hover:not(:disabled, :focus)) {
    background: var(--kds-color-background-input-hover);
}
&.error[data-v-cf72eb5a] {
    border: var(--kds-border-action-error);
}
&.disabled[data-v-cf72eb5a] {
    cursor: default;
    border: var(--kds-border-action-disabled);
    border-color: var(--kds-color-border-disabled);
}
}
.icon-wrapper {
&[data-v-cf72eb5a] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--kds-color-text-and-icon-subtle);
}
&.leading[data-v-cf72eb5a] {
    padding-left: var(--kds-spacing-container-0-12x);
}
&.trailing[data-v-cf72eb5a] {
    padding-right: var(--kds-spacing-container-0-12x);
}
.container.disabled &[data-v-cf72eb5a] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
.container:focus-within &[data-v-cf72eb5a],
  .container:has(.input-field.has-value) &[data-v-cf72eb5a] {
    color: var(--kds-color-text-and-icon-neutral);
}
}
.input-field {
&[data-v-cf72eb5a] {
  flex: 1 0 0;
  min-width: 0;
  height: var(--kds-dimension-component-height-1-75x);
  padding: var(--kds-spacing-container-0-25x);
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  white-space: nowrap;
  outline: none;
  background: transparent;
  border: none;

  /* hide native steppers, we provide our own in NumberInput */

  /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
}
&[type="number"] {
&[data-v-cf72eb5a] {
    appearance: textfield;
}
&[data-v-cf72eb5a]::-webkit-outer-spin-button,
    &[data-v-cf72eb5a]::-webkit-inner-spin-button {
      margin: 0;
      appearance: none;
}
}
&[type="search"][data-v-cf72eb5a]::-webkit-search-cancel-button {
    appearance: none;
}
&[data-v-cf72eb5a]::placeholder {
    color: var(--kds-color-text-and-icon-subtle);
}
&:disabled {
&[data-v-cf72eb5a] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
&[data-v-cf72eb5a]::placeholder {
      color: var(--kds-color-text-and-icon-disabled);
}
}
}
.unit {
&[data-v-cf72eb5a] {
  flex-shrink: 0;
  min-width: 0;
  margin: 0 var(--kds-spacing-container-0-12x);
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  white-space: nowrap;
}
&.placeholder[data-v-cf72eb5a] {
    color: var(--kds-color-text-and-icon-subtle);
}
&.disabled[data-v-cf72eb5a] {
    color: var(--kds-color-text-and-icon-disabled);
}
.container:focus-within &[data-v-cf72eb5a] {
    color: var(--kds-color-text-and-icon-neutral);
}
}
.clear-button[data-v-cf72eb5a] {
  margin-left: var(--kds-spacing-container-0-12x);
}
.trailing-slot[data-v-cf72eb5a] {
  display: flex;
  flex-shrink: 0;
  gap: var(--kds-spacing-container-0-12x);
  align-items: center;
  margin-left: var(--kds-spacing-container-0-12x);
}

textarea {
&[data-v-2e4d2d42] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--kds-spacing-container-0-5x);
  overflow: hidden;
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  resize: none;
  outline: none;
  scrollbar-width: none;
  background: var(--kds-color-background-input-initial);
  border: var(--kds-border-action-input);
  border-radius: var(--kds-border-radius-container-0-37x);
  -ms-overflow-style: none;
}
&.invalid[data-v-2e4d2d42] {
    border: var(--kds-border-action-error);
}
&[data-v-2e4d2d42]::placeholder {
    color: var(--kds-color-text-and-icon-subtle);
}
&:disabled {
&[data-v-2e4d2d42] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
    border: var(--kds-border-action-disabled);
    border-color: var(--kds-color-border-disabled);
}
&[data-v-2e4d2d42]::placeholder {
      color: var(--kds-color-text-and-icon-disabled);
}
}
&[data-v-2e4d2d42]:hover:not(:disabled, :focus) {
    background: var(--kds-color-background-input-hover);
}
&[data-v-2e4d2d42]:focus:not(:disabled) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
}
textarea[data-v-2e4d2d42]::-webkit-scrollbar {
  display: none;
}

.kds-popover {
&[data-v-1e24f98e] {
  padding: 0;
  margin: 0;
  overflow: visible;
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  /* noinspection CssInvalidFunction */

  /* noinspection CssInvalidFunction,CssInvalidAtRule */

  /* noinspection CssInvalidFunction,CssInvalidAtRule */

  /* noinspection CssInvalidFunction,CssInvalidAtRule */

  /* noinspection CssInvalidFunction,CssInvalidAtRule */
}
&.full-width[data-v-1e24f98e] {
    min-inline-size: anchor-size(width);
}
&.floating.top-right[data-v-1e24f98e] {
    inset: auto anchor(right) anchor(top) auto;
    margin: var(--kds-spacing-container-0-25x) 0
      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
    position-try-fallbacks:
      --kds-popover-try-top-left, --kds-popover-try-bottom-right,
      --kds-popover-try-bottom-left, --kds-popover-try-top-right;
}
&.floating.top-left[data-v-1e24f98e] {
    inset: auto auto anchor(top) anchor(left);
    margin: var(--kds-spacing-container-0-25x)
      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
    position-try-fallbacks:
      --kds-popover-try-top-right, --kds-popover-try-bottom-left,
      --kds-popover-try-bottom-right, --kds-popover-try-top-left;
}
&.floating.bottom-right[data-v-1e24f98e] {
    inset: anchor(bottom) anchor(right) auto auto;
    margin: var(--kds-spacing-container-0-25x) 0
      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
    position-try-fallbacks:
      --kds-popover-try-bottom-left, --kds-popover-try-top-right,
      --kds-popover-try-top-left, --kds-popover-try-bottom-right;
}
&.floating.bottom-left[data-v-1e24f98e] {
    inset: anchor(bottom) auto auto anchor(left);
    margin: var(--kds-spacing-container-0-25x)
      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
    position-try-fallbacks:
      --kds-popover-try-bottom-right, --kds-popover-try-top-left,
      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
}
}

/* noinspection CssInvalidFunction,CssInvalidAtRule */
@position-try --kds-popover-try-top-right {
  inset: auto anchor(right) anchor(top) auto;
  margin: var(--kds-spacing-container-0-25x) 0
    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
}

/* noinspection CssInvalidFunction,CssInvalidAtRule */
@position-try --kds-popover-try-top-left {
  inset: auto auto anchor(top) anchor(left);
  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
    var(--kds-spacing-container-0-25x) 0;
}

/* noinspection CssInvalidFunction,CssInvalidAtRule */
@position-try --kds-popover-try-bottom-right {
  inset: anchor(bottom) anchor(right) auto auto;
  margin: var(--kds-spacing-container-0-25x) 0
    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
}

/* noinspection CssInvalidFunction,CssInvalidAtRule */
@position-try --kds-popover-try-bottom-left {
  inset: anchor(bottom) auto auto anchor(left);
  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
    var(--kds-spacing-container-0-25x) 0;
}
.kds-popover-default-content[data-v-1e24f98e] {
  padding: var(--kds-spacing-container-0-75x);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-37x);
  box-shadow: var(--kds-elevation-level-3);
}

.kds-info-popover-content[data-v-64f7db25] {
  max-width: var(--kds-dimension-component-width-25x);
  padding: var(--kds-spacing-container-0-75x);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  white-space: pre-wrap;
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-37x);
  box-shadow: var(--kds-elevation-level-3);
}

.info-toggle-button {
&[data-v-5070a398] {
  --bg-initial: transparent;
  --bg-hover: var(--kds-color-background-neutral-hover);
  --bg-active: var(--kds-color-background-neutral-active);
  --border: var(--kds-border-action-transparent);
  --icon-color: var(--kds-color-text-and-icon-neutral);

  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--kds-dimension-component-width-1x);
  height: var(--kds-dimension-component-height-1x);
  padding: 0;
  color: var(--icon-color);
  cursor: pointer;
  background-color: var(--bg-initial);
  border: var(--border);
  border-radius: var(--kds-border-radius-container-0-12x);
  opacity: 1;
}
&.hidden[data-v-5070a398] {
    opacity: 0;
}
&[data-v-5070a398]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-5070a398]:hover {
    background-color: var(--bg-hover);
}
&[data-v-5070a398]:active {
    background-color: var(--bg-active);
}
&.selected[data-v-5070a398] {
    --bg-initial: var(--kds-color-background-selected-initial);
    --bg-hover: var(--kds-color-background-selected-hover);
    --bg-active: var(--kds-color-background-selected-active);
    --border: var(--kds-border-action-selected);
    --icon-color: var(--kds-color-text-and-icon-selected);
}
}

.kds-variable-popover[data-v-54c206b9] {
  width: var(--kds-dimension-component-width-25x);
  max-width: 100%;
  padding: var(--kds-spacing-container-0-75x);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  white-space: pre-wrap;
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-37x);
  box-shadow: var(--kds-elevation-level-3);
}

.variable-toggle-button {
&[data-v-64296d74] {
  --bg-initial: var(--kds-color-background-neutral-initial);
  --bg-hover: var(--kds-color-background-neutral-hover);
  --bg-active: var(--kds-color-background-neutral-active);
  --border: var(--kds-border-action-transparent);
  --icon-color: var(--kds-color-text-and-icon-neutral);

  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--kds-dimension-component-width-1x);
  height: var(--kds-dimension-component-height-1x);
  padding: 0;
  color: var(--icon-color);
  cursor: pointer;
  background-color: var(--bg-initial);
  border: var(--border);
  border-radius: var(--kds-border-radius-container-0-12x);
  opacity: 1;
}
&.hidden[data-v-64296d74] {
    opacity: 0;
}
&[data-v-64296d74]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-64296d74]:hover {
    background-color: var(--bg-hover);
}
&[data-v-64296d74]:active {
    background-color: var(--bg-active);
}
&.pressed-or-set[data-v-64296d74] {
    --bg-initial: var(--kds-color-background-selected-initial);
    --bg-hover: var(--kds-color-background-selected-hover);
    --bg-active: var(--kds-color-background-selected-active);
    --border: var(--kds-border-action-selected);
    --icon-color: var(--kds-color-text-and-icon-success);
}
&.error[data-v-64296d74] {
    --bg-initial: var(--kds-color-background-danger-initial);
    --bg-hover: var(--kds-color-background-danger-hover);
    --bg-active: var(--kds-color-background-danger-active);
    --border: var(--kds-border-action-error);
    --icon-color: var(--kds-color-text-and-icon-danger);
}
}

.modal-header {
&[data-v-7dbd159b] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
    var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
  font: var(--kds-font-base-title-medium-strong);
  color: var(--kds-color-text-and-icon-neutral);
}
& .modal-header-title[data-v-7dbd159b] {
    flex: 1 1 auto;
}
}
.modal-body {
&[data-v-7dbd159b] {
  --modal-padding-left: var(--kds-spacing-container-1-5x);
  --modal-padding-right: var(--kds-spacing-container-1-5x);
  --modal-padding-top: var(--kds-spacing-container-0-5x);
  --modal-padding-bottom: var(--kds-spacing-container-1x);
  --modal-gap: var(--kds-spacing-container-1x);

  display: flex;
  flex-direction: column;
  overflow: var(--v3305d0f4);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
}
&[data-variant="padded"][data-v-7dbd159b] {
    gap: var(--modal-gap);
    padding: var(--modal-padding-top) var(--modal-padding-right)
      var(--modal-padding-bottom) var(--modal-padding-left);
}
}
.modal-footer[data-v-7dbd159b] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  justify-content: right;
  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
}

/** see: https://github.com/whatwg/html/issues/7732  */
body:has(dialog.modal[open]) {
  overflow: hidden;
}

.kds-modal {
&[data-v-d8ed98e7] {
  /* rule is broken it complains about local variables for no reason */
  /* stylelint-disable csstools/value-no-unknown-custom-properties */
  --modal-full-size: 95%;
  --modal-backdrop-animation-time: 125ms;

  display: flex;
  flex-direction: column;
  width: min(var(--modal-full-size), var(--modal-width));
  height: var(--modal-height);
  max-height: var(--modal-full-size);
  padding: 0;
  overflow: var(--v1ee8fa3c);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  background-color: var(--kds-color-surface-default);
  border: none;
  border-radius: var(--kds-border-radius-container-0-37x);
  box-shadow: var(--kds-elevation-level-3);

  /** Animation */
  opacity: 0;
  transform: scale(var(--modal-scale-base));
  transition: var(--modal-animation-time) allow-discrete;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: display, opacity, overlay, transform;

  /* hide if its not open */
}
&.width-small[data-v-d8ed98e7] {
    --modal-width: var(--kds-dimension-component-width-25x);
    --modal-animation-time: 100ms;
    --modal-scale-base: 0.85;
}
&.width-medium[data-v-d8ed98e7] {
    --modal-width: var(--kds-dimension-component-width-32x);
    --modal-animation-time: 140ms;
    --modal-scale-base: 0.88;
}
&.width-large[data-v-d8ed98e7] {
    --modal-width: var(--kds-dimension-component-width-45x);
    --modal-animation-time: 210ms;
    --modal-scale-base: 0.88;
}
&.width-xlarge[data-v-d8ed98e7] {
    --modal-width: var(--kds-dimension-component-width-61x);
    --modal-animation-time: 300ms;
    --modal-scale-base: 0.88;
}
&.width-full[data-v-d8ed98e7] {
    --modal-width: var(--modal-full-size);
    --modal-animation-time: 350ms;
    --modal-scale-base: 0.92;
}
&.height-full[data-v-d8ed98e7] {
    --modal-height: var(--modal-full-size);
}
&.height-auto[data-v-d8ed98e7] {
    --modal-height: fit-content;
}
&[data-v-d8ed98e7]:not([open]) {
    display: none;
}
&[data-v-d8ed98e7]:focus-visible,
  &[data-v-d8ed98e7]:focus {
    outline: none;
}
&[data-v-d8ed98e7]::backdrop {
    background: var(--kds-color-blanket-default);
    opacity: 0;
    transition: var(--modal-animation-time) allow-discrete;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-property: display, opacity, overlay;
}
&[open][data-v-d8ed98e7]::backdrop {
    opacity: 1;
}
&[open][data-v-d8ed98e7] {
    opacity: 1;
    transform: scale(1);
}
}

/** Animation starting styles */
@starting-style {
.kds-modal {
&[data-v-d8ed98e7] {
    opacity: 1;
    transform: scale(1);
}
&[open][data-v-d8ed98e7] {
      opacity: 0;
      transform: scale(var(--modal-scale-base));
}
&[data-v-d8ed98e7]::backdrop {
      opacity: 1;
}
&[open][data-v-d8ed98e7]::backdrop {
      opacity: 0;
}
}
}

.ask-again[data-v-67e036b5] {
  padding: var(--kds-spacing-container-0-5x) 0 0 0;
}
.flush-left[data-v-67e036b5] {
  margin-right: auto;
}

.kds-card {
&[data-v-c64f0e2e] {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
  border-style: solid;
  border-radius: var(--kds-border-radius-container-0-50x);
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
&[data-v-c64f0e2e]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
    border-radius: var(--kds-border-radius-container-0-56x);
}
&.disabled[data-v-c64f0e2e] {
    cursor: default;
}
}

/* Variant: Filled, Value: False */
.variant-filled {
&[data-v-c64f0e2e] {
  background: var(--kds-color-surface-default);
  border: var(--kds-border-base-subtle);
}
&[data-v-c64f0e2e]:hover:not(.disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-c64f0e2e]:active:not(.disabled) {
    background: var(--kds-color-background-neutral-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

/* Variant: Outlined, Value: False */
.variant-outlined {
&[data-v-c64f0e2e] {
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-base-muted);
}
&[data-v-c64f0e2e]:hover:not(.disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-c64f0e2e]:active:not(.disabled) {
    background: var(--kds-color-background-neutral-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

/* Variant: Transparent, Value: False */
.variant-transparent {
&[data-v-c64f0e2e] {
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-action-transparent);
}
&[data-v-c64f0e2e]:hover:not(.disabled) {
    background: var(--kds-color-background-neutral-hover);
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-c64f0e2e]:active:not(.disabled) {
    background: var(--kds-color-background-neutral-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

/* Variant: Filled, Value: True */
.variant-filled.selected {
&[data-v-c64f0e2e] {
  background: var(--kds-color-background-selected-initial);
  border: var(--kds-border-action-selected);
}
&[data-v-c64f0e2e]:hover:not(.disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-c64f0e2e]:active:not(.disabled) {
    background: var(--kds-color-background-selected-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

/* Variant: Outlined, Value: True */
.variant-outlined.selected {
&[data-v-c64f0e2e] {
  background: var(--kds-color-background-selected-initial);
  border: var(--kds-border-action-selected);
}
&[data-v-c64f0e2e]:hover:not(.disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-c64f0e2e]:active:not(.disabled) {
    background: var(--kds-color-background-selected-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

/* Variant: Transparent, Value: True */
.variant-transparent.selected {
&[data-v-c64f0e2e] {
  background: var(--kds-color-background-selected-initial);
  border: var(--kds-border-action-selected);
}
&[data-v-c64f0e2e]:hover:not(.disabled) {
    background: var(--kds-color-background-selected-initial);
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-c64f0e2e]:active:not(.disabled) {
    background: var(--kds-color-background-selected-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

.kds-empty-state[data-v-059bb01e] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  max-width: 280px;
  padding: var(--kds-spacing-container-0-5x);
}
.kds-empty-state-headline[data-v-059bb01e] {
  margin: 0;
  font: var(--kds-font-base-title-small);
  color: var(--kds-color-text-and-icon-muted);
  text-align: center;
}
.kds-empty-state-description[data-v-059bb01e] {
  margin: 0;
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-muted);
  text-align: center;
}
.kds-empty-state-action[data-v-059bb01e] {
  margin-top: var(--kds-spacing-container-0-12x);
}
