
.kds-avatar {
&[data-v-c90668bf] {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  vertical-align: middle;
  border-radius: var(--kds-border-radius-container-pill);
}
&.small[data-v-c90668bf] {
    inline-size: var(--kds-dimension-icon-0-75x);
    block-size: var(--kds-dimension-icon-0-75x);
}
&.medium[data-v-c90668bf] {
    inline-size: var(--kds-dimension-icon-1x);
    block-size: var(--kds-dimension-icon-1x);
}
&.large[data-v-c90668bf] {
    inline-size: var(--kds-dimension-component-width-1-25x);
    block-size: var(--kds-dimension-component-height-1-25x);
}
&.xlarge[data-v-c90668bf] {
    inline-size: var(--kds-dimension-component-width-1-5x);
    block-size: var(--kds-dimension-component-height-1-5x);
}
}
.kds-avatar[data-v-c90668bf]::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-c90668bf] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.kds-avatar-initials[data-v-c90668bf] {
  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-c90668bf] {
  font-size: calc(1em + calc(100cqi - 2em) / 2);
}
.kds-icon {
&[data-v-fb124eb6] {
  --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-fb124eb6] {
    --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-fb124eb6] {
        --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-fb124eb6] {
    --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-fb124eb6] {
    --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.disabled[data-v-fb124eb6] {
  color: var(--kds-color-text-and-icon-disabled);
}
.kds-icon {
&[data-v-3b8ebdbd] {
  --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-3b8ebdbd] {
    --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-3b8ebdbd] {
        --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-3b8ebdbd] {
    --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-3b8ebdbd] {
    --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-3b8ebdbd] {
  --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 */
}
&.disabled[data-v-3b8ebdbd] {
    color: var(--kds-color-text-and-icon-disabled);
}
&.small[data-v-3b8ebdbd] {
    --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-3b8ebdbd] {
    --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-3b8ebdbd] {
      --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
}
&.medium[data-v-3b8ebdbd] {
      --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
}
}
}

.kds-badge {
&[data-v-df64f7cf] {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: var(--kds-border-radius-container-pill);
}
& .label-wrapper[data-v-df64f7cf] {
    min-width: 0;
    max-width: var(--kds-dimension-component-width-16x);
    padding: 0 var(--kds-spacing-container-0-12x);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
&.xxsmall[data-v-df64f7cf] {
    height: var(--kds-dimension-component-height-1x);
    padding: 0 var(--kds-spacing-container-0-25x);
    font: var(--kds-font-base-title-xsmall);
}
&.xsmall[data-v-df64f7cf] {
    gap: var(--kds-spacing-container-0-12x);
    height: var(--kds-dimension-component-height-1-25x);
    padding: 0 var(--kds-spacing-container-0-37x);
    font: var(--kds-font-base-title-small);
}
&.neutral[data-v-df64f7cf] {
    color: var(--kds-color-text-and-icon-neutral);
    background-color: var(--kds-color-background-neutral-bold-initial);
    border: var(--kds-border-base-subtle);
}
&.info[data-v-df64f7cf] {
    color: var(--kds-color-text-and-icon-info);
    background-color: var(--kds-color-background-static-info);
    border: var(--kds-border-base-info);
}
&.warning[data-v-df64f7cf] {
    color: var(--kds-color-text-and-icon-warning);
    background-color: var(--kds-color-background-static-warning);
    border: var(--kds-border-base-warning);
}
&.success[data-v-df64f7cf] {
    color: var(--kds-color-text-and-icon-success);
    background-color: var(--kds-color-background-static-success);
    border: var(--kds-border-base-success);
}
&.error[data-v-df64f7cf] {
    color: var(--kds-color-text-and-icon-danger);
    background-color: var(--kds-color-background-static-danger);
    border: var(--kds-border-base-danger);
}
&.ghost[data-v-df64f7cf] {
    color: var(--kds-color-text-and-icon-neutral);
    background-color: transparent;
    border: var(--kds-border-base-subtle);
}
}

.kds-color-swatch {
&[data-v-91e0130d] {
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 0;
  background-origin: border-box;
  border: var(--kds-border-base-muted);
  border-radius: var(--kds-border-radius-container-0-25x);
}
&.small[data-v-91e0130d] {
    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);

    width: var(--kds-dimension-icon-0-75x);
    height: var(--kds-dimension-icon-0-75x);
}
&.medium[data-v-91e0130d] {
    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);

    width: var(--kds-dimension-icon-1x);
    height: var(--kds-dimension-icon-1x);
}
&.large[data-v-91e0130d] {
    --kds-color-swatch-checker-size: calc(
      var(--kds-dimension-component-width-1-25x) / 4
    );

    width: var(--kds-dimension-component-width-1-25x);
    height: var(--kds-dimension-component-height-1-25x);
}
}

.kds-live-status {
&[data-v-01555495] {
  --dot-color: var(--kds-color-state-disabled);
  --dot-border-color: var(--kds-color-state-disabled-border);

  display: inline-flex;
  flex-shrink: 0;
  gap: 0; /* gap already included in dot */
  align-items: center;
  max-width: 100%;
  line-height: 0;
}
&.red[data-v-01555495] {
    --dot-color: var(--kds-color-state-error);
    --dot-border-color: var(--kds-color-state-error-border);
}
&.orange[data-v-01555495] {
    --dot-color: var(--kds-color-state-warning);
    --dot-border-color: var(--kds-color-state-warning-border);
}
&.green[data-v-01555495] {
    --dot-color: var(--kds-color-state-success);
    --dot-border-color: var(--kds-color-state-success-border);
}
.dot {
&[data-v-01555495] {
    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-01555495]::after {
      display: block;
      width: 50%;
      height: 50%;
      content: "";
      background-color: var(--dot-color);
      border-color: var(--dot-border-color);
      border-style: solid;
      border-width: var(--kds-border-width-icon-stroke-l);
      border-radius: var(--kds-border-radius-container-pill);
}
}
.label[data-v-01555495] {
    overflow: hidden;
    text-overflow: ellipsis;
    font: var(--kds-font-base-subtext-medium);
    color: var(--kds-color-text-and-icon-neutral);
    white-space: nowrap;
}
&.size-medium {
.dot[data-v-01555495] {
      width: var(--kds-dimension-icon-1x);
      height: var(--kds-dimension-icon-1x);
}
&[data-v-01555495]::after {
      border-width: var(--kds-border-width-icon-stroke-m);
}
.label[data-v-01555495] {
      font: var(--kds-font-base-subtext-small);
}
}
&.size-small {
.dot[data-v-01555495] {
      width: var(--kds-dimension-icon-0-75x);
      height: var(--kds-dimension-icon-0-75x);
}
&[data-v-01555495]::after {
      border-width: var(--kds-border-width-icon-stroke-s);
}
.label[data-v-01555495] {
      font: var(--kds-font-base-subtext-xsmall);
}
}
}

.kds-loading-spinner {
&[data-v-54835dc0] {
  --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-54835dc0] {
    --icon-width: var(--kds-dimension-icon-0-56x);
    --icon-height: var(--kds-dimension-icon-0-56x);
}
&.small[data-v-54835dc0] {
    --icon-width: var(--kds-dimension-icon-0-75x);
    --icon-height: var(--kds-dimension-icon-0-75x);
}
&.large[data-v-54835dc0] {
    --icon-width: var(--kds-dimension-icon-1-25x);
    --icon-height: var(--kds-dimension-icon-1-25x);
}
&[data-style="onPrimary"][data-v-54835dc0] {
    --color-track: var(--kds-color-loading-spinner-track-on-primary);
    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
}
& .track[data-v-54835dc0] {
    fill: none;
    stroke: var(--color-track);
    stroke-width: var(--icon-stroke-width);
}
& .loader[data-v-54835dc0] {
    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-54835dc0 1.2s linear infinite;
}
}
@keyframes spin-54835dc0 {
from {
    transform: rotate(-90deg);
}
to {
    transform: rotate(270deg);
}
}

.kds-inline-message {
&[data-v-af14056f] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-25x);
  align-items: flex-start;
  padding: calc(
    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
  );
  color: var(--kds-color-text-and-icon-neutral);
  border-radius: var(--kds-border-radius-container-0-50x);
}
.header {
&[data-v-af14056f] {
    display: flex;
    gap: var(--kds-spacing-container-0-25x);
    align-items: flex-start;
}
.icon[data-v-af14056f] {
      align-self: flex-start;
      margin-top: var(--kds-spacing-container-0-12x);
      color: var(--icon-color);
}
.headline[data-v-af14056f] {
      font: var(--kds-font-base-title-small-strong);
}
}
.body[data-v-af14056f] {
    align-self: stretch;
    padding-left: var(--kds-spacing-container-1x);
    font: var(--kds-font-base-body-small);
    color: var(--kds-color-text-and-icon-muted);
}
&.info[data-v-af14056f] {
    --icon-color: var(--kds-color-text-and-icon-info);

    background-color: var(--kds-color-background-static-info-muted);
    border: var(--kds-border-base-info);
}
&.success[data-v-af14056f] {
    --icon-color: var(--kds-color-text-and-icon-success);

    background-color: var(--kds-color-background-static-success-muted);
    border: var(--kds-border-base-success);
}
&.error[data-v-af14056f] {
    --icon-color: var(--kds-color-text-and-icon-danger);

    background-color: var(--kds-color-background-static-danger-muted);
    border: var(--kds-border-base-danger);
}
&.warning[data-v-af14056f] {
    --icon-color: var(--kds-color-text-and-icon-warning);

    background-color: var(--kds-color-background-static-warning-muted);
    border: var(--kds-border-base-warning);
}
}

.donut-container {
&[data-v-66e88c70] {
  display: flex;
  gap: var(--kds-spacing-container-0-75x);
  align-items: center;
}
& .donut-chart {
&[data-v-66e88c70] {
    display: block;
    flex-shrink: 0;
}
& .background-circle[data-v-66e88c70] {
      stroke: var(--kds-color-background-static-chart-0);
}
& .primary-circle[data-v-66e88c70] {
      stroke: var(--kds-color-background-static-chart-1);
}
& .secondary-circle[data-v-66e88c70] {
      stroke: var(--kds-color-background-static-chart-2);
}
& .value-wedge {
&.animate[data-v-66e88c70] {
        transition:
          stroke-dashoffset 0.5s,
          stroke 0.5s;
}
}
}
& .donut-text {
&[data-v-66e88c70] {
    display: flex;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-12x);
    overflow: hidden;
    color: var(--kds-color-text-and-icon-neutral);
}
& .title[data-v-66e88c70] {
      overflow: hidden;
      text-overflow: ellipsis;
      font: var(--kds-font-base-title-medium-strong);
      white-space: nowrap;
}
& .sub-text[data-v-66e88c70] {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      font: var(--kds-font-base-subtext-medium);
      -webkit-box-orient: vertical;
}
}
}

.kds-divider[data-v-4d059bd3] {
  margin: 0 0 var(--kds-spacing-container-0-12x);
  border: none;
  border-bottom: var(--kds-border-base-subtle);
}

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

.button {
&[data-v-a696a1ec] {
  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-a696a1ec]:is(a) {
    text-decoration: none;
}
&.disabled[data-v-a696a1ec] {
    cursor: default;
}
&[data-v-a696a1ec]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&.filled {
&[data-v-a696a1ec] {
    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-a696a1ec] {
      color: var(--kds-color-text-and-icon-disabled-inverted);
      background-color: var(--kds-color-background-disabled-primary);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
        background-color: var(--kds-color-background-primary-bold-hover);
}
&[data-v-a696a1ec]:active {
        background-color: var(--kds-color-background-primary-bold-active);
}
}
&.destructive {
&[data-v-a696a1ec] {
      color: var(--kds-color-text-and-icon-danger-inverted);
      background-color: var(--kds-color-background-danger-bold-initial);
}
&.disabled[data-v-a696a1ec] {
        color: var(--kds-color-text-and-icon-disabled-inverted);
        background-color: var(--kds-color-background-disabled-danger);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
          background-color: var(--kds-color-background-danger-bold-hover);
}
&[data-v-a696a1ec]:active {
          background-color: var(--kds-color-background-danger-bold-active);
}
}
}
}
&.outlined {
&[data-v-a696a1ec] {
    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-a696a1ec] {
      color: var(--kds-color-text-and-icon-disabled);
      border: var(--kds-border-action-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
        background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-a696a1ec]:active {
        background-color: var(--kds-color-background-neutral-active);
}
}
&.destructive {
&[data-v-a696a1ec] {
      color: var(--kds-color-text-and-icon-danger);
      border: var(--kds-border-action-error);
}
&.disabled[data-v-a696a1ec] {
        color: var(--kds-color-text-and-icon-disabled);
        border: var(--kds-border-action-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
          background-color: var(--kds-color-background-danger-hover);
}
&[data-v-a696a1ec]:active {
          background-color: var(--kds-color-background-danger-active);
}
}
}
}
&.transparent {
&[data-v-a696a1ec] {
    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-a696a1ec] {
      color: var(--kds-color-text-and-icon-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
        background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-a696a1ec]:active {
        background-color: var(--kds-color-background-neutral-active);
}
}
&.destructive {
&[data-v-a696a1ec] {
      color: var(--kds-color-text-and-icon-danger);
}
&.disabled[data-v-a696a1ec] {
        color: var(--kds-color-text-and-icon-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
          background-color: var(--kds-color-background-danger-hover);
}
&[data-v-a696a1ec]:active {
          background-color: var(--kds-color-background-danger-active);
}
}
}
}
&.toggled {
&[data-v-a696a1ec] {
    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-a696a1ec] {
      color: var(--kds-color-text-and-icon-disabled);
}
&:not(.disabled, .success, .error) {
&[data-v-a696a1ec]:hover {
        background-color: var(--kds-color-background-selected-hover);
}
&[data-v-a696a1ec]:active {
        background-color: var(--kds-color-background-selected-active);
}
}
}
& .label[data-v-a696a1ec] {
    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-a696a1ec] {
    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-a696a1ec] {
    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-a696a1ec] {
    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-a696a1ec] {
    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-a696a1ec] {
      padding: 0 var(--kds-spacing-container-0-25x);
}
}
&.success[data-v-a696a1ec] {
    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-a696a1ec] {
    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;
}
&.remove-border-radius-left[data-v-a696a1ec] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
&.remove-border-radius-right[data-v-a696a1ec] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
}

.kds-link {
&[data-v-56e748a8] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: var(--kds-spacing-container-none) var(--kds-spacing-container-0-10x);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  white-space: nowrap;
  text-decoration-line: underline;
  border-radius: var(--kds-border-radius-container-0-12x);
}
&[data-v-56e748a8]:is(a) {
    cursor: pointer;
}
&[data-v-56e748a8]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-container-none);
}
& .label[data-v-56e748a8],
  & .file-size[data-v-56e748a8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
&.variant-internal {
&[data-v-56e748a8] {
    color: var(--kds-color-text-and-icon-neutral);
}
&:not(.disabled) {
&[data-v-56e748a8]:visited {
        color: var(--kds-color-text-and-icon-info);
}
&[data-v-56e748a8]:hover {
        background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-56e748a8]:active {
        background-color: var(--kds-color-background-neutral-active);
}
}
}
&.variant-external[data-v-56e748a8] {
    gap: var(--kds-spacing-container-0-12x);
}
&:is(.variant-external, .variant-document) {
&[data-v-56e748a8] {
    color: var(--kds-color-text-and-icon-selected);
}
&:not(.disabled) {
&[data-v-56e748a8]:visited {
        color: var(--kds-color-text-and-icon-info);
}
&[data-v-56e748a8]:hover {
        color: var(--kds-color-text-and-icon-primary-inverted);
        background-color: var(--kds-color-background-primary-bold-hover);
}
&[data-v-56e748a8]:active {
        color: var(--kds-color-text-and-icon-selected-inverted);
        background-color: var(--kds-color-background-primary-bold-active);
}
}
}
&.disabled[data-v-56e748a8] {
    color: var(--kds-color-text-and-icon-disabled);
    pointer-events: none;
    cursor: default;
}
}

.leading {
&[data-v-d38d7ade] {
  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-d38d7ade] {
    width: var(--kds-dimension-icon-0-56x);
    height: var(--kds-dimension-icon-0-56x);
}
&.small[data-v-d38d7ade] {
    width: var(--kds-dimension-icon-0-75x);
    height: var(--kds-dimension-icon-0-75x);
}
&.large[data-v-d38d7ade] {
    width: var(--kds-dimension-icon-1-25x);
    height: var(--kds-dimension-icon-1-25x);
}
}
.leading-icon[data-v-d38d7ade],
.spinner[data-v-d38d7ade] {
  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-d38d7ade],
.spinner[data-visible="true"][data-v-d38d7ade] {
  opacity: 1;
}

.kds-list-item {
&[data-v-def6165b] {
  position: relative;
  display: flex;
  flex-shrink: 0;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  width: 100%;
  min-height: var(--kds-dimension-component-height-1-5x);
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
  color: var(--kds-color-text-and-icon-neutral);
  cursor: pointer;
  user-select: none;
  background: var(--kds-color-background-neutral-initial);
  border: none;
  border-radius: var(--kds-border-radius-container-0-31x);
}
&.small {
&[data-v-def6165b] {
    gap: var(--kds-spacing-container-0-25x);
    align-items: flex-start;
    padding: var(--kds-spacing-container-0-25x)
      var(--kds-spacing-container-0-5x);
    font: var(--kds-font-base-interactive-small);
}
.accessory[data-v-def6165b] {
      display: flex;
      padding: var(--kds-spacing-container-0-12x) 0;
}
}
&.large {
&[data-v-def6165b] {
    font: var(--kds-font-base-interactive-small-strong);
}
.accessory[data-v-def6165b] {
      display: flex;
      align-items: center;
}
}
.content {
&[data-v-def6165b] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-12x);
    min-width: 0;
}
.large &[data-v-def6165b] {
      justify-content: center;
      min-height: calc(
        var(--kds-dimension-component-height-2-5x) - 2 *
          var(--kds-spacing-container-0-25x)
      );
}
.label {
&[data-v-def6165b] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}
.prefix[data-v-def6165b] {
        flex-shrink: 0;
}
.special[data-v-def6165b] {
        font: var(--kds-font-base-interactive-small-italic);
}
}
.subtext[data-v-def6165b] {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      font: var(--kds-font-base-subtext-small);
      color: var(--kds-color-text-and-icon-muted);
      -webkit-box-orient: vertical;
}
}
.trailing-item {
&[data-v-def6165b] {
    display: flex;
    flex-shrink: 0;
    gap: var(--kds-spacing-container-0-12x);
    align-items: center;
    align-self: center;
    justify-content: flex-end;
}
.shortcut[data-v-def6165b] {
      flex-shrink: 0;
      font: var(--kds-font-base-interactive-xsmall-strong);
      color: var(--kds-color-text-and-icon-muted);
      text-align: right;
      white-space: nowrap;
}
.trailing-item-reserve-space[data-v-def6165b] {
      width: var(--kds-dimension-icon-0-75x);
}
}
&[data-v-def6165b]:hover:not(.disabled),
  &.active[data-v-def6165b]:not(.disabled) {
    background: var(--kds-color-background-neutral-hover);
}
&[data-v-def6165b]:active:not(.disabled) {
    background: var(--kds-color-background-neutral-active);
}
&.selected {
&[data-v-def6165b] {
    color: var(--kds-color-text-and-icon-selected);
    background: var(--kds-color-background-selected-initial);
}
.subtext[data-v-def6165b] {
      color: var(--kds-color-text-and-icon-selected);
}
&[data-v-def6165b]:hover,
    &.active[data-v-def6165b] {
      background: var(--kds-color-background-selected-hover);
}
&[data-v-def6165b]:active {
      background: var(--kds-color-background-selected-active);
}
&.disabled[data-v-def6165b] {
      background: var(--kds-color-background-selected-initial);
}
}
&.missing {
&[data-v-def6165b] {
    color: var(--kds-color-text-and-icon-danger);
    background: var(--kds-color-background-danger-initial);
}
.subtext[data-v-def6165b] {
      color: var(--kds-color-text-and-icon-danger);
}
&[data-v-def6165b]:hover,
    &.active[data-v-def6165b] {
      background: var(--kds-color-background-danger-hover);
}
&[data-v-def6165b]:active {
      background: var(--kds-color-background-danger-active);
}
&.disabled[data-v-def6165b] {
      background: var(--kds-color-background-danger-initial);
}
}
&.disabled {
&[data-v-def6165b] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
.shortcut[data-v-def6165b],
    .subtext[data-v-def6165b] {
      color: var(--kds-color-text-and-icon-disabled);
}
}
}

.kds-list-item-section-title {
&[data-v-5eeb1226] {
  display: flex;
  flex-shrink: 0;
  gap: var(--kds-spacing-container-0-25x);
  align-items: center;
  width: 100%;
  min-height: var(--kds-dimension-component-height-1-5x);
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
  color: var(--kds-color-text-and-icon-muted);
}
.icon[data-v-5eeb1226] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}
.label[data-v-5eeb1226] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font: var(--kds-font-base-title-xsmall);
    white-space: nowrap;
}
}

.kds-menu-container {
&[data-v-68200614] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-10x);
  min-width: var(--kds-dimension-component-width-12x);
  max-width: var(--kds-dimension-component-width-20x);
  padding: var(--kds-spacing-container-0-25x);
  overflow-y: auto;
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
&[data-v-68200614]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
}

.kds-popover {
&[data-v-1e5f9d24] {
  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 */

  /*
   * For custom placement the popover is positioned statically via inline
   * left/top styles. Explicitly clear the UA default `inset: 0` so the
   * popover doesn't stretch to the viewport edges (which would break
   * light-dismiss / click-outside behavior).
   */
}
&.full-width[data-v-1e5f9d24] {
    min-inline-size: anchor-size(width);
}
&.floating.top-right[data-v-1e5f9d24] {
    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-1e5f9d24] {
    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-1e5f9d24] {
    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-1e5f9d24] {
    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;
}
&.floating.custom[data-v-1e5f9d24] {
    position: fixed;
    inset: auto;
    margin: 0;
}
}

/* 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-1e5f9d24] {
  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-split-button {
&[data-v-8f48b87a] {
  display: flex;
}
&.filled[data-v-8f48b87a] {
    gap: var(--kds-spacing-container-0-10x);
}
&.outlined[data-v-8f48b87a] {
    gap: var(--kds-spacing-container-none);
}
& .kds-split-button-primary.outlined[data-v-8f48b87a] {
    border-right: none;
}
}
.kds-split-button-primary[data-v-8f48b87a] {
  flex-shrink: 1;
  min-width: 0;
}
.kds-split-button-secondary[data-v-8f48b87a] {
  flex-shrink: 0;
}

.kds-empty-state[data-v-e913660a] {
  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-e913660a] {
  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-e913660a] {
  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-e913660a] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin-top: var(--kds-spacing-container-0-12x);
}
.kds-empty-state.disabled {
& .kds-empty-state-headline[data-v-e913660a],
  & .kds-empty-state-description[data-v-e913660a] {
    color: var(--kds-color-text-and-icon-disabled);
}
}

.kds-list-container {
&[data-v-5e1d539e] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-10x);
  min-width: var(--kds-dimension-component-width-12x);
  padding: var(--kds-spacing-container-0-25x);
  overflow-y: auto;
}
&.standalone[data-v-5e1d539e] {
    border: var(--kds-border-base-subtle);
    border-radius: var(--kds-border-radius-container-0-31x);
}
&.menu[data-v-5e1d539e] {
    border: none;
}
&[data-v-5e1d539e]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
    border-radius: var(--kds-border-radius-container-0-31x);
}
}
.kds-list-container-empty[data-v-5e1d539e] {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.kds-list-item-divider[data-v-5e1d539e] {
  flex-shrink: 0;
  width: 100%;
  padding: 0;
}

.kds-label-wrapper[data-v-efe3313e] {
  display: flex;
  gap: var(--kds-spacing-container-0-12x);
  align-items: flex-start;
  max-width: 100%;
  min-height: var(--kds-dimension-component-height-0-75x);
}
.label[data-v-efe3313e] {
  display: block;
  flex-grow: 1;
  max-width: 100%;
  height: calc(
    var(--kds-dimension-component-height-1x) +
      var(--kds-spacing-input-label-spacing-bottom)
  );
  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
  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-2e6ba10c] {
  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-2e6ba10c] {
    color: var(--kds-color-text-and-icon-danger);
}
& .subtext-text[data-v-2e6ba10c] {
    min-width: 0;
}
}

.checkbox {
&[data-v-7bfc5667] {
  --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-7bfc5667] {
    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-7bfc5667] {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&:hover:not(.disabled) .control[data-v-7bfc5667] {
    background: var(--bg-hover);
}
&:active:not(.disabled) .control[data-v-7bfc5667] {
    background: var(--bg-active);
}
&.checked[data-v-7bfc5667],
  &.indeterminate[data-v-7bfc5667] {
    --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-7bfc5667] {
    display: flex;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-12x);
    text-rendering: geometricprecision;
}
& .label[data-v-7bfc5667] {
      font: var(--kds-font-base-interactive-small);
      color: var(--text-color);
}
& .helper-text[data-v-7bfc5667] {
      font: var(--kds-font-base-subtext-small);
      color: var(--helper-text-color);
}
}
&.disabled[data-v-7bfc5667] {
    --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-7bfc5667] {
    --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-7bfc5667],
    &.indeterminate[data-v-7bfc5667] {
      --bg-initial: var(--kds-color-background-danger-initial);
}
}
}
.subtext-wrapper[data-v-7bfc5667] {
  padding-left: calc(
    var(--kds-dimension-component-height-0-88x) +
      var(--kds-spacing-container-0-37x)
  );
}

.kds-fieldset[data-v-a44731da] {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: none;
}
.kds-fieldset-legend[data-v-a44731da] {
  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: 0 0 var(--kds-spacing-input-label-spacing-bottom);
}
.kds-fieldset-content[data-v-a44731da] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-75x);
}
.legend-text[data-v-a44731da] {
  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;
}

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

.radio {
&[data-v-f4f6392a] {
  --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-f4f6392a] {
    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-f4f6392a] {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}
.control .dot circle[data-v-f4f6392a] {
    fill: var(--dot-color);
    transform: scale(0.5);
    transform-origin: center;
    transform-box: fill-box;
}
&:focus-visible .control[data-v-f4f6392a] {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&:hover:not(.disabled) .control[data-v-f4f6392a] {
    background: var(--bg-hover);
}
&:active:not(.disabled) .control[data-v-f4f6392a] {
    background: var(--bg-active);
}
&.selected[data-v-f4f6392a] {
    --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-f4f6392a] {
    display: flex;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-25x);
}
& .label[data-v-f4f6392a] {
      font: var(--kds-font-base-interactive-small);
      color: var(--text-color);
}
& .helper-text[data-v-f4f6392a] {
      font: var(--kds-font-base-subtext-small);
      color: var(--helper-text-color);
}
}
&.disabled[data-v-f4f6392a] {
    --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-f4f6392a] {
    --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-f4f6392a] {
      --bg-initial: var(--kds-color-background-danger-initial);
      --border: var(--kds-border-action-error);
}
}
}

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

.option {
&[data-v-5c6f0f1f] {
  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-5c6f0f1f] {
    height: var(--kds-dimension-component-height-1-25x);
    font: var(--kds-font-base-interactive-small-strong);
}
&[data-v-5c6f0f1f]:focus-visible {
    outline: none;
}
&[data-v-5c6f0f1f]:focus:not(.selected) {
    border: var(--kds-border-action-selected);
}
&[data-v-5c6f0f1f]:hover:not(:disabled) {
    background: var(--kds-color-background-neutral-hover);
}
&[data-v-5c6f0f1f]:active:not(:disabled) {
    background: var(--kds-color-background-neutral-active);
}
&.selected {
&[data-v-5c6f0f1f] {
    color: var(--kds-color-text-and-icon-selected);
    background: var(--kds-color-background-selected-initial);
    border: var(--kds-border-action-selected);
}
&[data-v-5c6f0f1f]:hover:not(:disabled) {
      background: var(--kds-color-background-selected-hover);
}
&[data-v-5c6f0f1f]:active:not(:disabled) {
      background: var(--kds-color-background-selected-active);
}
&.variant-muted {
&[data-v-5c6f0f1f] {
      color: var(--kds-color-text-and-icon-neutral);
      background: var(--kds-color-background-input-initial);
}
&[data-v-5c6f0f1f]:hover:not(:disabled) {
        background: var(--kds-color-background-input-hover);
}
&[data-v-5c6f0f1f]:active:not(:disabled) {
        background: var(--kds-color-background-input-active);
}
}
}
&.disabled[data-v-5c6f0f1f] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
&.disabled.selected[data-v-5c6f0f1f] {
    color: var(--kds-color-text-and-icon-disabled);
    border: var(--kds-border-action-disabled);
}
}
.option-label[data-v-5c6f0f1f] {
  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-640271e0] {
  align-items: flex-start;
}
.options {
&[data-v-640271e0] {
  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-640271e0]: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-640271e0] {
    border: var(--kds-border-action-error);
    box-shadow: none;
}
}

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

.container {
&[data-v-69242818] {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--kds-dimension-component-height-1-75x);
  padding: 0
    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
  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-69242818]:has(input:focus:not(:disabled)) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-69242818]:has(.input-field:hover:not(:disabled, :focus)) {
    background: var(--kds-color-background-input-hover);
}
&.error[data-v-69242818] {
    border: var(--kds-border-action-error);
}
&.disabled[data-v-69242818] {
    cursor: default;
    border: var(--kds-border-action-disabled);
    border-color: var(--kds-color-border-disabled);
}
}
.icon-wrapper {
&[data-v-69242818] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--kds-color-text-and-icon-subtle);
}
&.leading[data-v-69242818] {
    padding-left: var(--kds-spacing-container-0-12x);
}
&.trailing[data-v-69242818] {
    padding-right: var(--kds-spacing-container-0-12x);
}
.container.disabled &[data-v-69242818] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
.container:focus-within &[data-v-69242818],
  .container:has(.input-field.has-value) &[data-v-69242818] {
    color: var(--kds-color-text-and-icon-neutral);
}
}
.input-field {
&[data-v-69242818] {
  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-69242818] {
    appearance: textfield;
}
&[data-v-69242818]::-webkit-outer-spin-button,
    &[data-v-69242818]::-webkit-inner-spin-button {
      margin: 0;
      appearance: none;
}
}
&[type="search"][data-v-69242818]::-webkit-search-cancel-button {
    appearance: none;
}
&[data-v-69242818]::placeholder {
    color: var(--kds-color-text-and-icon-subtle);
}
&.empty-mask[data-v-69242818] {
    color: var(--kds-color-text-and-icon-subtle);
}
&:disabled {
&[data-v-69242818] {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: default;
}
&[data-v-69242818]::placeholder {
      color: var(--kds-color-text-and-icon-disabled);
}
}
}
.unit {
&[data-v-69242818] {
  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-69242818] {
    color: var(--kds-color-text-and-icon-subtle);
}
&.disabled[data-v-69242818] {
    color: var(--kds-color-text-and-icon-disabled);
}
.container:focus-within &[data-v-69242818] {
    color: var(--kds-color-text-and-icon-neutral);
}
}
.clear-button[data-v-69242818] {
  margin-left: var(--kds-spacing-container-0-12x);
}
.leading-slot[data-v-69242818] {
  display: flex;
  flex-shrink: 0;
  gap: var(--kds-spacing-container-0-12x);
  align-items: center;
}
.trailing-slot[data-v-69242818] {
  display: flex;
  flex-shrink: 0;
  gap: var(--kds-spacing-container-0-12x);
  align-items: center;
  margin-left: var(--kds-spacing-container-0-12x);
}

.kds-text-input-suggestions[data-v-c9f1be40] {
  max-height: var(--kds-dimension-component-height-12x);
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}

.kds-color-picker-slider {
&[data-v-f4be2bd4] {
  position: relative;
  width: 100%;
  height: var(--kds-dimension-component-height-0-75x);
  touch-action: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  border-radius: var(--kds-border-radius-container-pill);
}
& .handle[data-v-f4be2bd4] {
    position: absolute;
    top: 50%;
    left: var(--v087094b8);
    width: var(--kds-dimension-icon-0-75x);
    height: var(--kds-dimension-icon-0-75x);
    pointer-events: none;
    border: var(--kds-border-color-picker-handle-initial);
    border-radius: var(--kds-border-radius-container-pill);
    box-shadow: var(--kds-elevation-level-3);
    transform: translate(-50%, -50%);
}
}
.kds-color-picker-slider[data-v-f4be2bd4]:focus {
  outline: none;
}
.kds-color-picker-slider:focus .handle[data-v-f4be2bd4],
.kds-color-picker-slider:focus-visible .handle[data-v-f4be2bd4] {
  outline: var(--kds-border-action-focused);
  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
}

.kds-color-picker[data-v-2daeaa68] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-1x);
  width: calc(206px + 2 * var(--kds-spacing-container-0-75x));
  max-width: 100%;
  padding: var(--kds-spacing-container-0-75x);
  background: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.colorspace[data-v-2daeaa68] {
  position: relative;
  width: 100%;
  height: 200px;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  outline: none;
  border-radius: var(--kds-border-radius-container-0-37x);
}
.handle[data-v-2daeaa68] {
  position: absolute;
  width: var(--kds-dimension-icon-0-75x);
  height: var(--kds-dimension-icon-0-75x);
  pointer-events: none;
  border: var(--kds-border-color-picker-handle-initial);
  border-radius: var(--kds-border-radius-container-pill);
  box-shadow: var(--kds-elevation-level-3);
  transform: translate(-50%, -50%);
}
.colorspace[data-v-2daeaa68]:focus {
  outline: none;
}
.colorspace:focus .handle[data-v-2daeaa68],
.colorspace:focus-visible .handle[data-v-2daeaa68] {
  outline: var(--kds-border-action-focused);
  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
}
.hue[data-v-2daeaa68] {
  background: linear-gradient(
    90deg,
    hsl(0deg 100% 50%) 0%,
    hsl(60deg 100% 50%) 17%,
    hsl(120deg 100% 50%) 33%,
    hsl(180deg 100% 50%) 50%,
    hsl(240deg 100% 50%) 67%,
    hsl(300deg 100% 50%) 83%,
    hsl(360deg 100% 50%) 100%
  );
}
.alpha[data-v-2daeaa68] {
  background-image: var(--v535b907d);
  background-size:
    100% 100%,
    calc(var(--kds-dimension-component-height-0-75x) / 2)
      calc(var(--kds-dimension-component-height-0-75x) / 2);
}
.value-inputs {
&[data-v-2daeaa68] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  }
&[data-v-2daeaa68] > * {
    flex: 1 1 0;
    min-width: 0;
}
}

.kds-date-picker-grid[data-v-51807b35] {
  width: 100%;
}
.kds-date-picker-header-row[data-v-51807b35] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.kds-date-picker-day-grid[data-v-51807b35] {
  display: grid;
  row-gap: var(--kds-spacing-container-0-5x);
}
.kds-date-picker-row[data-v-51807b35] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}
.kds-date-picker-weekday[data-v-51807b35] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--kds-dimension-component-height-1-5x);
  font: var(--kds-font-base-title-small-strong);
  color: var(--kds-color-text-and-icon-muted);
}
.kds-date-picker-day {
&[data-v-51807b35] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kds-dimension-component-width-1-5x);
  height: var(--kds-dimension-component-height-1-5x);
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--kds-core-font-weight-medium);
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: var(--kds-core-border-width-xs) solid transparent;
  border-radius: var(--kds-border-radius-container-0-37x);
  }
&[data-v-51807b35]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-51807b35]:hover:not(:disabled) {
    background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-51807b35]:active:not(:disabled) {
    background-color: var(--kds-color-background-neutral-active);
}
}
.kds-date-picker-day-offset[data-v-51807b35] {
  color: var(--kds-color-text-and-icon-subtle);
}
.kds-date-picker-day-disabled[data-v-51807b35] {
  color: var(--kds-color-text-and-icon-disabled);
  cursor: default;
}
.kds-date-picker-day-today[data-v-51807b35] {
  font-style: italic;
  color: var(--kds-color-text-and-icon-selected);
}
.kds-date-picker-day-selected {
&[data-v-51807b35] {
  font-weight: var(--kds-core-font-weight-medium);
  color: var(--kds-color-text-and-icon-selected);
  background-color: var(--kds-color-background-selected-initial);
  border-color: var(--kds-color-border-selected-bold);
  }
&[data-v-51807b35]:hover:not(:disabled) {
    background-color: var(--kds-color-background-selected-hover);
}
&[data-v-51807b35]:active:not(:disabled) {
    background-color: var(--kds-color-background-selected-active);
}
}

.kds-date-picker-grid-simple[data-v-63d96e84] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--kds-spacing-container-0-75x);
  width: 100%;
  height: 100%;
}
.kds-date-picker-grid-row[data-v-63d96e84] {
  display: contents;
}
.kds-date-picker-cell {
&[data-v-63d96e84] {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--kds-core-font-weight-medium);
  color: inherit;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: var(--kds-core-border-width-xs) solid transparent;
  border-radius: var(--kds-border-radius-container-0-37x);
  }
&[data-v-63d96e84]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-neutral-active);
}
}
.kds-date-picker-cell-disabled[data-v-63d96e84] {
  color: var(--kds-color-text-and-icon-disabled);
  cursor: default;
}
.kds-date-picker-cell-selected {
&[data-v-63d96e84] {
  font-weight: var(--kds-core-font-weight-medium);
  color: var(--kds-color-text-and-icon-selected);
  background-color: var(--kds-color-background-selected-initial);
  border-color: var(--kds-color-border-selected-bold);
  }
&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-selected-hover);
}
&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-selected-active);
}
}

.kds-date-picker-grid-simple[data-v-270d55b9] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--kds-spacing-container-0-5x);
  width: 100%;
  height: 100%;
}
.kds-date-picker-grid-row[data-v-270d55b9] {
  display: contents;
}
.kds-date-picker-cell {
&[data-v-270d55b9] {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--kds-core-font-weight-medium);
  color: inherit;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: var(--kds-core-border-width-xs) solid transparent;
  border-radius: var(--kds-border-radius-container-0-37x);
  }
&[data-v-270d55b9]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-neutral-hover);
}
&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-neutral-active);
}
}
.kds-date-picker-cell-disabled[data-v-270d55b9] {
  color: var(--kds-color-text-and-icon-disabled);
  cursor: default;
}
.kds-date-picker-cell-selected {
&[data-v-270d55b9] {
  font-weight: var(--kds-core-font-weight-medium);
  color: var(--kds-color-text-and-icon-selected);
  background-color: var(--kds-color-background-selected-initial);
  border-color: var(--kds-color-border-selected-bold);
  }
&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-selected-hover);
}
&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
    background-color: var(--kds-color-background-selected-active);
}
}

.kds-date-picker[data-v-e46d7e18] {
  width: var(--kds-dimension-component-width-16x);
  padding: var(--kds-spacing-container-0-75x);
  font-family: var(--kds-core-font-family-roboto);
  font-size: var(--kds-core-font-size-0-75x);
  color: var(--kds-color-text-and-icon-neutral);
  background: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.kds-date-picker-header[data-v-e46d7e18] {
  display: flex;
  gap: var(--kds-spacing-container-0-25x);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--kds-spacing-container-0-75x);
}
.kds-date-picker-nav-block[data-v-e46d7e18] {
  display: flex;
  flex-shrink: 0;
  gap: var(--kds-spacing-container-0-25x);
  align-items: center;
}
.kds-date-picker-header-label[data-v-e46d7e18] {
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.kds-date-picker-header-static-label[data-v-e46d7e18] {
  flex: 1;
  min-width: 0;
  font-weight: var(--kds-core-font-weight-medium);
  text-align: center;
}
.kds-date-picker-body[data-v-e46d7e18] {
  display: flex;

  /* Lock height to the day grid footprint:
     7 rows of height-1-5x (1 header + 6 day rows) + 5 row gaps of 0-5x
     (no gap between header and first day row). */
  height: calc(
    7 * var(--kds-dimension-component-height-1-5x) + 5 *
      var(--kds-spacing-container-0-5x)
  );
}

.kds-date-time-format-popover[data-v-8c697d02] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-5x);
  width: fit-content;
  max-width: 100%;
  padding: var(--kds-spacing-container-0-75x);
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.kds-date-time-format-popover-list[data-v-8c697d02] {
  width: var(--kds-dimension-component-width-16x);
  min-width: 100%;
  max-width: 100%;
  height: var(--kds-dimension-component-height-12x);
}

.kds-search-results-container[data-v-3094963a] {
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}

textarea {
&[data-v-bdf12ef9] {
  box-sizing: border-box;
  width: 100%;
  padding: calc(
    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
  );
  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-bdf12ef9] {
    border: var(--kds-border-action-error);
}
&[data-v-bdf12ef9]::placeholder {
    color: var(--kds-color-text-and-icon-subtle);
}
&:disabled {
&[data-v-bdf12ef9] {
    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-bdf12ef9]::placeholder {
      color: var(--kds-color-text-and-icon-disabled);
}
}
&[data-v-bdf12ef9]:hover:not(:disabled, :focus) {
    background: var(--kds-color-background-input-hover);
}
&[data-v-bdf12ef9]:focus:not(:disabled) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
}
textarea[data-v-bdf12ef9]::-webkit-scrollbar {
  display: none;
}

.kds-time-picker[data-v-c2f06c87] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-75x);
  width: var(--kds-dimension-component-width-16x);
  padding: var(--kds-spacing-container-0-75x);
  background: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.kds-time-picker-selected-time[data-v-c2f06c87] {
  font: var(--kds-font-base-title-large-strong);
  color: var(--kds-color-text-and-icon-neutral);
  text-align: center;
}
.kds-time-picker-fields[data-v-c2f06c87] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  align-items: flex-start;
}
.kds-time-picker-field[data-v-c2f06c87] {
  flex: 1;
  min-width: var(--kds-dimension-component-width-4x);
}
.kds-time-picker-field-trash[data-v-c2f06c87] {
  margin-top: calc(
    var(--kds-dimension-component-height-1x) +
      var(--kds-spacing-input-label-spacing-bottom)
  );
}
.kds-time-picker-divider[data-v-c2f06c87] {
  width: 100%;
}
.kds-time-picker-actions[data-v-c2f06c87] {
  display: flex;
  justify-content: center;
}

.kds-interval-popover[data-v-02541fd1] {
  display: flex;
  flex-direction: column;
  width: var(--kds-dimension-component-width-17-5x);
  max-width: 100%;
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.kds-interval-popover-header {
&[data-v-02541fd1] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  justify-content: space-between;
  padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-37x)
    var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
  }
.kds-interval-popover-title[data-v-02541fd1] {
    font: var(--kds-font-base-title-medium);
    color: var(--kds-color-text-and-icon-neutral);
}
}
.kds-interval-popover-divider[data-v-02541fd1] {
  padding-bottom: calc(
    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
  );
  border-bottom: var(--kds-border-base-subtle);
}
.kds-interval-popover-content {
&[data-v-02541fd1] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-5x);
  padding: var(--kds-spacing-container-0-75x);
  }
.kds-interval-popover-direction-switch[data-v-02541fd1] {
    align-self: center;
}
.kds-interval-popover-grid[data-v-02541fd1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
}
}

.kds-dropdown-trigger-button {
&[data-v-0f4de8fb] {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--kds-dimension-component-height-1-75x);
  padding: 0
    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
  cursor: pointer;
  background: var(--kds-color-background-input-initial);
  border: var(--kds-border-action-input);
  border-radius: var(--kds-border-radius-container-0-37x);
}
&[data-v-0f4de8fb]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&.error[data-v-0f4de8fb] {
    border: var(--kds-border-action-error);
}
&[data-v-0f4de8fb]:disabled {
    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-0f4de8fb]:not(:disabled, :focus):hover {
    background: var(--kds-color-background-input-hover);
}
}
.leading[data-v-0f4de8fb] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: var(--kds-dimension-component-width-1x);
  height: var(--kds-dimension-component-width-1x);
  margin-left: var(--kds-spacing-container-0-12x);
}
.text {
&[data-v-0f4de8fb] {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--kds-spacing-container-0-25x);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
}
&.placeholder[data-v-0f4de8fb] {
    color: var(--kds-color-text-and-icon-subtle);
}
&.missing[data-v-0f4de8fb] {
    color: var(--kds-color-text-and-icon-danger);
}
}
.trailing[data-v-0f4de8fb] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-right: calc(
    var(--kds-spacing-container-0-12x) + 2 * var(--kds-core-border-width-xs)
  );
}

.kds-dropdown-container[data-v-cdb20fd2] {
  display: flex;
  flex-direction: column;
  background-color: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.kds-dropdown-container-sticky-top[data-v-cdb20fd2] {
  padding: var(--kds-spacing-container-0-25x);
  background-color: var(--kds-color-surface-default);
  border-bottom: var(--kds-border-base-subtle);
}
.kds-dropdown-container-list {
&[data-v-cdb20fd2] {
  max-height: var(--kds-dimension-component-height-12x);
  }
&.multiline[data-v-cdb20fd2] {
    max-height: var(--kds-dimension-component-height-20x);
}
}

.kds-list-item-button {
&[data-v-21fb5571] {
  position: relative;
  display: flex;
  gap: var(--kds-spacing-container-0-25x);
  align-items: center;
  width: 100%;
  min-width: var(--kds-dimension-component-width-12x);
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
  font: var(--kds-font-base-interactive-small);
  color: var(--kds-color-text-and-icon-neutral);
  text-align: left;
  cursor: pointer;
  user-select: none;
  background: var(--kds-color-background-neutral-initial);
  border: none;
  border-radius: var(--kds-border-radius-container-0-31x);
}
.label[data-v-21fb5571] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
&[data-v-21fb5571]:disabled {
    color: var(--kds-color-text-and-icon-disabled);
    pointer-events: none;
    cursor: default;
}
&[data-v-21fb5571]:focus-visible:not(:disabled) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-21fb5571]:hover:not(:disabled) {
    background: var(--kds-color-background-neutral-hover);
}
&[data-v-21fb5571]:active:not(:disabled) {
    background: var(--kds-color-background-neutral-active);
}
}

.kds-multi-select-dropdown-options[data-v-68fe366f] {
  display: flex;
  flex-direction: column;
  min-width: var(--kds-dimension-component-width-12x);
  background: var(--kds-color-surface-default);
  border-radius: var(--kds-border-radius-container-0-50x);
  box-shadow: var(--kds-elevation-level-3);
}
.kds-multi-select-dropdown-search[data-v-68fe366f] {
  padding: var(--kds-spacing-container-0-25x);
  border-bottom: var(--kds-border-base-subtle);
}
.kds-multi-select-dropdown-list {
&[data-v-68fe366f] {
  max-height: var(--kds-dimension-component-height-12x);
  }
&.multiline[data-v-68fe366f] {
    max-height: var(--kds-dimension-component-height-20x);
}
}
.kds-multi-select-dropdown-footer[data-v-68fe366f] {
  padding: var(--kds-spacing-container-0-25x);
  border-top: var(--kds-border-base-subtle);
}

.kds-resize-handle-area[data-v-df3803d4] {
  display: flex;
  gap: var(--v1dcb931e);
  justify-content: space-around;
}
.kds-resize-handle {
&[data-v-df3803d4] {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: var(--v4bcf7fe4);
  block-size: calc(2 * var(--kds-spacing-container-0-37x));
  padding: 0;
  appearance: none;
  touch-action: none;
  cursor: row-resize;
  user-select: none;
  background: none;
  border: none;
  border-radius: var(--kds-border-radius-container-0-25x);
  -webkit-touch-callout: none;
  }
&[data-v-df3803d4]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
& .kds-resize-handle-line[data-v-df3803d4] {
    inline-size: 100%;
    block-size: 0;
    border-top: var(--kds-border-resize-handle-initial);
    border-radius: var(--kds-border-radius-container-0-25x);
}
&:hover > .kds-resize-handle-line[data-v-df3803d4] {
    border-top: var(--kds-border-resize-handle-hover);
}
&:active > .kds-resize-handle-line[data-v-df3803d4] {
    border-top: var(--kds-border-resize-handle-active);
}
}
.kds-resize-handle-area:hover > .kds-resize-handle > .kds-resize-handle-line[data-v-df3803d4] {
  border-top: var(--kds-border-resize-handle-hover);
}

.kds-resize-container {
&[data-v-46b33b01] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-37x);
}
&.dragging[data-v-46b33b01] {
    user-select: none;
}
}
.kds-resize-container-content[data-v-46b33b01] {
  inline-size: 100%;
}

.kds-multiselect-list-box {
&[data-v-ee1c7bd0] {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  min-block-size: 0;
  background: var(--kds-color-surface-default);
  border: var(--kds-border-action-input);
  border-radius: var(--kds-border-radius-container-0-31x);
}
&.disabled[data-v-ee1c7bd0] {
    border: var(--kds-border-action-disabled);
}
&.error[data-v-ee1c7bd0] {
    border: var(--kds-border-action-error);
}
&[data-v-ee1c7bd0]:has(:focus-visible) {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
}
.kds-multiselect-list-box-list {
&[data-v-ee1c7bd0] {
  position: relative;
  flex-grow: 1;
  padding: calc(
    var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)
  );
  margin: 0;
  overflow-y: auto;
}
&[data-v-ee1c7bd0]:focus {
    outline: none;
}
}
.kds-multiselect-list-box-item {
&[data-v-ee1c7bd0] {
  height: var(--kds-dimension-component-height-1-5x);
  margin-top: var(--kds-spacing-container-0-10x);
}
&.kds-multiselect-list-box-item-first[data-v-ee1c7bd0] {
    margin-top: 0;
}
}
.kds-multiselect-list-box-content-grid[data-v-ee1c7bd0] {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100% - 2 * var(--kds-core-border-width-xs));
}
.kds-multiselect-list-box-content[data-v-ee1c7bd0] {
  min-width: 0;
}
.kds-multiselect-sticky-bottom[data-v-ee1c7bd0] {
  position: sticky;
  bottom: calc(-1 * var(--kds-spacing-container-0-25x));
  min-width: 0;
  padding: var(--kds-spacing-container-0-25x) 0;
  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
  background: var(--kds-color-surface-default);
  border-top: var(--kds-border-base-subtle);
}
.kds-multiselect-empty[data-v-ee1c7bd0] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.kds-twin-list-body[data-v-11062d8e] {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
    minmax(0, 1fr);
  gap: var(--kds-spacing-container-0-25x);
}
.kds-list-column {
&[data-v-11062d8e] {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  }
& .kds-list-box[data-v-11062d8e] {
    flex: 1;
    min-block-size: 0;
}
}
.kds-list-header[data-v-11062d8e] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
}
.kds-list-label[data-v-11062d8e] {
  font: var(--kds-font-base-title-small);
  color: var(--kds-color-text-and-icon-neutral);
}
.kds-list-count[data-v-11062d8e] {
  font: var(--kds-font-base-title-xsmall);
  color: var(--kds-color-text-and-icon-muted);
}
.kds-button-column[data-v-11062d8e] {
  display: flex;
  flex-direction: column;
  padding-top: var(--kds-spacing-container-4x);
}

.kds-twin-list[data-v-1a9327b5] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-37x);
}

.kds-sortable-list-box-wrapper[data-v-ee7b63e2] {
  display: flex;
  flex-direction: column;
}
.kds-sortable-top-buttons[data-v-ee7b63e2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--kds-spacing-container-0-75x);
  padding-bottom: var(--kds-spacing-container-0-37x);
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-action-transparent);
  border-radius: var(--kds-border-radius-container-0-37x);
}
.kds-sortable-top-buttons-left[data-v-ee7b63e2] {
  display: flex;
  gap: var(--kds-spacing-container-0-25x);
}
.kds-sortable-footer-buttons[data-v-ee7b63e2] {
  display: flex;
  gap: var(--kds-spacing-container-0-37x);
  align-items: center;
  justify-content: center;
  padding: var(--kds-spacing-container-0-5x) 0;
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-action-transparent);
  border-radius: var(--kds-border-radius-container-0-37x);
}

.kds-info-popover-content[data-v-951f2a2b] {
  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);
  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-2e9ef96a] {
  --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-2e9ef96a] {
    opacity: 0;
}
&[data-v-2e9ef96a]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-2e9ef96a]:hover {
    background-color: var(--bg-hover);
}
&[data-v-2e9ef96a]:active {
    background-color: var(--bg-active);
}
&.selected[data-v-2e9ef96a] {
    --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-8a0c56d0] {
  width: var(--kds-dimension-component-width-25x);
  max-width: 100%;
  max-height: var(--kds-dimension-component-height-20x);
  padding: var(--kds-spacing-container-0-75x);
  overflow-y: auto;
  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);
}
&[data-v-8a0c56d0]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
}

.variable-toggle-button {
&[data-v-b6d29842] {
  --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-b6d29842] {
    opacity: 0;
}
&[data-v-b6d29842]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
}
&[data-v-b6d29842]:hover {
    background-color: var(--bg-hover);
}
&[data-v-b6d29842]:active {
    background-color: var(--bg-active);
}
&.pressed-or-set[data-v-b6d29842] {
    --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-b6d29842] {
    --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);
}
}

.kds-card {
&[data-v-4607badd] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  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-4607badd]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
    border-radius: var(--kds-border-radius-container-0-56x);
}
&[data-v-4607badd]:disabled {
    cursor: default;
}
}

/* Variant: Filled, Value: False */
.variant-filled {
&[data-v-4607badd] {
  background: var(--kds-color-surface-default);
  border: var(--kds-border-base-subtle);
}
&[data-v-4607badd]:hover:not(:disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-4607badd]: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-4607badd] {
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-base-muted);
}
&[data-v-4607badd]:hover:not(:disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-4607badd]: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-4607badd] {
  background: var(--kds-color-background-neutral-initial);
  border: var(--kds-border-action-transparent);
}
&[data-v-4607badd]:hover:not(:disabled) {
    background: var(--kds-color-background-neutral-hover);
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-4607badd]: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-4607badd] {
  background: var(--kds-color-background-selected-initial);
  border: var(--kds-border-action-selected);
}
&[data-v-4607badd]:hover:not(:disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-4607badd]: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-4607badd] {
  background: var(--kds-color-background-selected-initial);
  border: var(--kds-border-action-selected);
}
&[data-v-4607badd]:hover:not(:disabled) {
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-4607badd]: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-4607badd] {
  background: var(--kds-color-background-selected-initial);
  border: var(--kds-border-action-selected);
}
&[data-v-4607badd]:hover:not(:disabled) {
    background: var(--kds-color-background-selected-initial);
    box-shadow: var(--kds-elevation-level-3);
}
&[data-v-4607badd]:active:not(:disabled) {
    background: var(--kds-color-background-selected-active);
    box-shadow: var(--kds-elevation-level-1);
}
}

.kds-panel-header {
&[data-v-be5bccc5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
  border-bottom: var(--kds-border-base-muted);
}
& h6[data-v-be5bccc5] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font: var(--kds-font-base-title-medium-strong);
    white-space: nowrap;
}
& .kds-close-button[data-v-be5bccc5] {
    flex: 0 0 auto;
}
}

.kds-tab-icon[data-v-d5737ccf] {
  flex-shrink: 0;
}
.kds-tab-label[data-v-d5737ccf] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--kds-font-base-interactive-medium-strong);
  white-space: nowrap;
}
.kds-tab {
&[data-v-d5737ccf] {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  font: inherit;
  color: var(--kds-color-text-and-icon-neutral);
  cursor: pointer;
  background: var(--kds-color-background-neutral-initial);
  border: none;
  }
&[data-v-d5737ccf]:disabled {
    color: var(--kds-color-text-and-icon-disabled);
    cursor: not-allowed;
}
&[data-v-d5737ccf]:focus-visible {
    outline: var(--kds-border-action-focused);
    outline-offset: var(--kds-spacing-offset-focus);
    border-radius: var(--kds-border-radius-container-0-12x);
}
&.kds-tab-selected {
&[data-v-d5737ccf] {
    color: var(--kds-color-text-and-icon-selected);
    }
& .kds-tab-indicator[data-v-d5737ccf] {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      height: var(--kds-dimension-component-height-0-125x);
      background: var(--kds-color-background-selected-bold-initial);
      border: var(--kds-border-action-selected);
      border-top-left-radius: var(--kds-border-radius-container-0-12x);
      border-top-right-radius: var(--kds-border-radius-container-0-12x);
}
}
&[data-v-d5737ccf]:hover:not(:disabled) {
    color: var(--kds-color-text-and-icon-selected);
}
}
.kds-tab-bar-wrapper {
&[data-v-d5737ccf] {
  --focus-ring-space: calc(
    2px + var(--kds-spacing-offset-focus)
  ); /* outline-width + outline-offset */

  position: relative;
  display: flow-root;
  overflow: visible;
  }
&[data-v-d5737ccf]::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--kds-core-border-width-m);
    pointer-events: none;
    content: "";
    background: var(--kds-color-border-subtle);
}
}
.kds-tab-bar {
&[data-v-d5737ccf] {
  display: flex;
  flex-wrap: nowrap;
  padding: var(--focus-ring-space);
  margin: calc(-1 * var(--focus-ring-space));
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--kds-border-radius-container-none);
  }
&[data-v-d5737ccf]::-webkit-scrollbar {
    display: none;
}
&:not(.kds-tab-bar-full-width) .kds-tab[data-v-d5737ccf] {
    flex: 0 1 auto;
    min-width: var(--c97fca9c);
}
&.kds-tab-bar-large .kds-tab-label[data-v-d5737ccf] {
    font: var(--kds-font-base-interactive-large-strong);
}
&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-d5737ccf] {
    font: var(--kds-font-base-title-large);
}
&.kds-tab-bar-small,
  &.kds-tab-bar-large {
& .kds-tab-selected .kds-tab-icon[data-v-d5737ccf] {
      color: var(--kds-color-text-and-icon-selected);
}
}
&.kds-tab-bar-small .kds-tab[data-v-d5737ccf] {
    gap: var(--kds-spacing-container-0-37x);
    height: var(--kds-dimension-component-height-1-75x);
    padding: 0 var(--kds-spacing-container-0-5x);
}
&.kds-tab-bar-large .kds-tab[data-v-d5737ccf] {
    gap: var(--kds-spacing-container-0-5x);
    height: var(--kds-dimension-component-height-2-25x);
    padding: 0 var(--kds-spacing-container-0-75x);
}
&.kds-tab-bar-full-width .kds-tab[data-v-d5737ccf] {
    flex: 1;
    justify-content: center;
    width: 100%;
}
}

@keyframes knight-rider-86829b28 {
from {
    background-position-x: 100%;
}
to {
    background-position-x: -100%;
}
}
.kds-loading-skeleton-item {
&[data-v-86829b28] {
  background-color: var(--kds-color-border-subtle);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
      0%,
    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 15%, transparent)
      25%,
    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
      50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: knight-rider-86829b28 2s linear 200ms infinite;
}
&.text[data-v-86829b28] {
    height: var(--kds-dimension-component-height-0-75x);
    border-radius: var(--kds-border-radius-container-pill);
}
&.icon-large[data-v-86829b28],
  &.icon-medium[data-v-86829b28],
  &.icon-small[data-v-86829b28] {
    border-radius: var(--kds-border-radius-container-pill);
}
&.icon-large[data-v-86829b28] {
    width: var(--kds-dimension-component-width-1-25x);
    height: var(--kds-dimension-component-height-1-25x);
}
&.icon-medium[data-v-86829b28] {
    width: var(--kds-dimension-component-width-1x);
    height: var(--kds-dimension-component-height-1x);
}
&.icon-small[data-v-86829b28] {
    width: var(--kds-dimension-component-width-0-75x);
    height: var(--kds-dimension-component-height-0-75x);
}
&.button-large[data-v-86829b28] {
    width: var(--kds-dimension-component-width-4x);
    height: var(--kds-dimension-component-height-2-25x);
    border-radius: var(--kds-border-radius-container-0-50x);
}
&.button-medium[data-v-86829b28] {
    width: var(--kds-dimension-component-width-4x);
    height: var(--kds-dimension-component-height-1-75x);
    border-radius: var(--kds-border-radius-container-0-37x);
}
&.button-small[data-v-86829b28] {
    width: var(--kds-dimension-component-width-4x);
    height: var(--kds-dimension-component-height-1-5x);
    border-radius: var(--kds-border-radius-container-0-37x);
}
&.button-xsmall[data-v-86829b28] {
    width: var(--kds-dimension-component-width-4x);
    height: var(--kds-dimension-component-height-1-25x);
    border-radius: var(--kds-border-radius-container-0-25x);
}
&.input-with-label[data-v-86829b28] {
    height: var(--kds-dimension-component-height-1-75x);
    border-radius: var(--kds-border-radius-container-0-37x);
}
&.label[data-v-86829b28] {
    width: 35%;
    height: var(--kds-dimension-component-height-0-75x);
    border-radius: var(--kds-border-radius-container-0-50x);
}
&.card[data-v-86829b28] {
    height: 100%;
    min-height: var(--kds-dimension-component-height-12x);
    border-radius: var(--kds-border-radius-container-0-37x);
}
}

.kds-loading-skeleton[data-v-e6597718] {
  display: flex;
  flex-direction: column;
  gap: var(--v59c08829);
}
.kds-loading-skeleton-headline-with-paragraph {
&[data-v-e6597718] {
  display: grid;
  gap: var(--kds-spacing-container-1-25x);
  }
& .headline[data-v-e6597718] {
    width: 50%;
    height: var(--kds-dimension-component-height-1x);
}
& .kds-loading-skeleton-paragraph-lines {
&[data-v-e6597718] {
    display: grid;
    gap: var(--kds-spacing-container-0-75x);
    }
&[data-v-e6597718] > *:nth-child(2) {
      width: 75%;
}
&[data-v-e6597718] > *:nth-child(3) {
      width: 50%;
}
}
}
.kds-loading-skeleton-input-with-label[data-v-e6597718] {
  display: grid;
  gap: var(--kds-spacing-container-0-75x);
}
.kds-loading-skeleton-list-item {
&[data-v-e6597718] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  width: 100%;
  min-width: var(--kds-dimension-component-width-12x);
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
  }
& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-25x);
    min-width: 0;
}
&.kds-loading-skeleton-list-item-large {
&[data-v-e6597718] {
    padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
    }
& .kds-loading-skeleton-list-item-text {
&[data-v-e6597718] {
      justify-content: center;
      }
& .text[data-v-e6597718] {
        height: var(--kds-dimension-component-height-0-88x);
}
}
}
&.kds-loading-skeleton-list-item-small {
&[data-v-e6597718] {
    gap: var(--kds-spacing-container-0-5x);
    align-items: start;
    padding: calc(
        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
      )
      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
    }
& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
      justify-content: flex-start;
}
}
&.kds-loading-skeleton-list-item-large-with-subtext {
&[data-v-e6597718] {
    align-items: center;
    }
& .kds-loading-skeleton-list-item-text {
&[data-v-e6597718] {
      justify-content: center;
      }
& .text[data-v-e6597718] {
        height: var(--kds-dimension-component-height-0-75x);
}
}
}
}

.kds-panel-button-bar[data-v-aeb00620] {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: var(--kds-spacing-container-0-5x);
  background-color: var(--kds-color-surface-default);
  border-top: var(--kds-border-base-muted);
}

.kds-nav-item {
&[data-v-d5db7ff7] {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  gap: var(--kds-spacing-container-0-37x);
  align-items: center;
  height: var(--kds-dimension-component-height-1-75x);
  min-height: var(--kds-dimension-component-height-1-5x);
  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
  background: var(--kds-color-background-neutral-initial);
  border-radius: var(--kds-border-radius-container-0-31x);
}
&[data-v-d5db7ff7]:has(.kds-nav-button:focus-visible) {
    outline: var(--kds-border-action-focused);
    outline-offset: calc(-1 * var(--kds-core-border-width-m));
}
& .kds-nav-button {
&[data-v-d5db7ff7] {

    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    gap: var(--kds-spacing-container-0-37x);
    min-width: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
}
&[data-v-d5db7ff7]:focus-visible {
      outline: none;
}
& .content {
&[data-v-d5db7ff7] {
      display: flex;
      flex: 1 1 auto;
      flex-direction: row;
      gap: var(--kds-spacing-container-0-37x);
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
}
& .label[data-v-d5db7ff7] {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font: var(--kds-font-base-interactive-medium);
        color: var(--kds-color-text-and-icon-neutral);
        text-align: left;
        white-space: nowrap;
}
}
}
& .trailing-items {
&[data-v-d5db7ff7] {
    display: flex;
    flex-direction: row;
    gap: var(--kds-spacing-container-0-37x);
    align-items: center;
}
& .trailing-icon[data-v-d5db7ff7] {
      color: inherit;
}
}
&[data-v-d5db7ff7]:hover:not(.disabled) {
    background: var(--kds-color-background-neutral-hover);
}
&[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
    background: var(--kds-color-background-neutral-active);
}
&.selected {
&[data-v-d5db7ff7] {
    background: var(--kds-color-background-selected-initial);
}
& .kds-nav-button .content {
&[data-v-d5db7ff7] {
      color: var(--kds-color-text-and-icon-selected);
}
& .label[data-v-d5db7ff7] {
        color: var(--kds-color-text-and-icon-selected);
}
}
& .trailing-items .trailing-icon[data-v-d5db7ff7] {
      color: var(--kds-color-text-and-icon-selected);
}
& .indicator-selected[data-v-d5db7ff7] {
      position: absolute;
      top: var(--kds-spacing-container-0-37x);
      left: 0;
      width: var(--kds-dimension-component-width-0-125x);
      height: var(--kds-dimension-component-height-1x);
      background: var(--kds-color-background-selected-bold-initial);
      border-top-right-radius: var(--kds-border-radius-container-0-12x);
      border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
}
&[data-v-d5db7ff7]:hover:not(.disabled) {
      background: var(--kds-color-background-selected-hover);
}
&[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
      background: var(--kds-color-background-selected-active);
}
}
&.disabled {
&[data-v-d5db7ff7] {
    cursor: not-allowed;
}
& .kds-nav-button {
&[data-v-d5db7ff7] {
      cursor: not-allowed;
}
& .content .label[data-v-d5db7ff7] {
        color: var(--kds-color-text-and-icon-disabled);
}
}
& .trailing-items .trailing-icon[data-v-d5db7ff7] {
      color: var(--kds-color-text-and-icon-disabled);
}
}
}

.kds-navigation {
&[data-v-6cc9519f] {
  display: flex;
  flex-direction: column;
  gap: var(--kds-spacing-container-0-25x);
}
.nav-items[data-v-6cc9519f] {
    display: flex;
    flex-direction: column;
    gap: var(--kds-spacing-container-0-25x);
}
}

.modal-header {
&[data-v-62740dc9] {
  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-headline[data-v-62740dc9] {
    flex: 1 1 auto;
}
}
.modal-body {
&[data-v-62740dc9] {
  --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-grow: 1;
  flex-direction: column;
  overflow: var(--v81addf0a);
  font: var(--kds-font-base-body-small);
  color: var(--kds-color-text-and-icon-neutral);
}
&[data-variant="padded"][data-v-62740dc9] {
    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-62740dc9] {
  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-f4a6776f] {
  /* 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(--v5b2d4b6a);
  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-f4a6776f] {
    --modal-width: var(--kds-dimension-component-width-25x);
    --modal-animation-time: 100ms;
    --modal-scale-base: 0.85;
}
&.width-medium[data-v-f4a6776f] {
    --modal-width: var(--kds-dimension-component-width-32x);
    --modal-animation-time: 140ms;
    --modal-scale-base: 0.88;
}
&.width-large[data-v-f4a6776f] {
    --modal-width: var(--kds-dimension-component-width-45x);
    --modal-animation-time: 210ms;
    --modal-scale-base: 0.88;
}
&.width-xlarge[data-v-f4a6776f] {
    --modal-width: var(--kds-dimension-component-width-61x);
    --modal-animation-time: 300ms;
    --modal-scale-base: 0.88;
}
&.width-full[data-v-f4a6776f] {
    --modal-width: var(--modal-full-size);
    --modal-animation-time: 350ms;
    --modal-scale-base: 0.92;
}
&.height-full[data-v-f4a6776f] {
    --modal-height: var(--modal-full-size);
}
&.height-auto[data-v-f4a6776f] {
    --modal-height: fit-content;
}
&[data-v-f4a6776f]:not([open]) {
    display: none;
}
&[data-v-f4a6776f]:focus-visible,
  &[data-v-f4a6776f]:focus {
    outline: none;
}
&[data-v-f4a6776f]::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-f4a6776f]::backdrop {
    opacity: 1;
}
&[open][data-v-f4a6776f] {
    opacity: 1;
    transform: scale(1);
}
}

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

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

.kds-button-group-measure[data-v-a945c295] {
  position: absolute;
  display: flex;
  visibility: hidden;
  gap: var(--kds-spacing-container-0-5x);
  white-space: nowrap;
}
.kds-button-group {
&[data-v-a945c295] {
  display: flex;
  gap: var(--kds-spacing-container-0-5x);
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  }
&.left[data-v-a945c295] {
    justify-content: flex-start;
}
&.right[data-v-a945c295] {
    justify-content: flex-end;
}
&.middle[data-v-a945c295] {
    justify-content: center;
}
}
