@layer ds.theme, ds.base, ds.components;

@layer ds.base {
    .ds-sr-only {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px
    }

    :root {
        --ds-font-size-minus-1: max(.9em, .875rem);
        --ds-font-size-plus-1: 1.1em;
        --ds-readonly-icon-size: 1.2em;
        --ds-readonly-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%3E%3C/svg%3E")
    }

    @supports (width:round(down,.1em,1px)) {
        :root {
            --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem);
            --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem)
        }
    }:root, [data-color-scheme] {
         --dsc-focus-boxShadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
         --dsc-focus-boxShadow-inset: inset 0 0 0 calc(var(--ds-border-width-focus) * 2) var(--ds-color-focus-inner);
         --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--ds-border-width-focus)
     }

    [data-color-scheme], body {
        background: var(--ds-color-neutral-background-default);
        color: var(--ds-color-neutral-text-default)
    }

    .ds-readonly-icon:before {
        background: currentcolor;
        content: "";
        display: inline-block;
        height: calc(1em * var(--ds-line-height-md));
        height: 1lh;
        margin-inline-end: .25ch;
        -webkit-mask: center/contain no-repeat var(--ds-readonly-icon-url);
        mask: center/contain no-repeat var(--ds-readonly-icon-url);
        vertical-align: bottom;
        width: var(--ds-readonly-icon-size)
    }

    @media (forced-colors: active) {
        .ds-readonly-icon:before {
            background: CanvasText
        }
    }.ds-focus:focus-visible {
         box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
         outline: var(--_ds--focus, var(--dsc-focus-outline));
         outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
     }

    .ds-focus:focus-visible * {
        --_ds--focus:
    }

    .ds-focus--inset:focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow-inset));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus)) * -1)
    }

    .ds-focus--inset:focus-visible * {
        --_ds--focus:
    }

    .ds-focus--visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-focus--visible * {
        --_ds--focus:
    }

    .ds-focus--visible--inset {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow-inset));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus)) * -1)
    }

    .ds-focus--visible--inset * {
        --_ds--focus:
    }

    [data-size=xs] {
        font-size: var(--ds-body-xs-font-size);
        font-weight: var(--ds-body-xs-font-weight);
        letter-spacing: var(--ds-body-xs-letter-spacing);
        line-height: var(--ds-body-xs-line-height)
    }

    [data-size=sm] {
        font-size: var(--ds-body-sm-font-size);
        font-weight: var(--ds-body-sm-font-weight);
        letter-spacing: var(--ds-body-sm-letter-spacing);
        line-height: var(--ds-body-sm-line-height)
    }

    [data-size=md], body {
        font-size: var(--ds-body-md-font-size);
        font-weight: var(--ds-body-md-font-weight);
        letter-spacing: var(--ds-body-md-letter-spacing);
        line-height: var(--ds-body-md-line-height)
    }

    [data-size=lg] {
        font-size: var(--ds-body-lg-font-size);
        font-weight: var(--ds-body-lg-font-weight);
        letter-spacing: var(--ds-body-lg-letter-spacing);
        line-height: var(--ds-body-lg-line-height)
    }

    [data-size=xl] {
        font-size: var(--ds-body-xl-font-size);
        font-weight: var(--ds-body-xl-font-weight);
        letter-spacing: var(--ds-body-xl-letter-spacing);
        line-height: var(--ds-body-xl-line-height)
    }

    .ds-heading {
        font-size: 1.3em;
        font-size: round(down, 1.3em, .0625rem);
        font-weight: var(--ds-heading-md-font-weight);
        letter-spacing: var(--ds-heading-md-letter-spacing);
        line-height: var(--ds-heading-md-line-height);
        margin: 0
    }

    .ds-heading[data-size="2xs"] {
        font-size: var(--ds-heading-2xs-font-size);
        font-weight: var(--ds-heading-2xs-font-weight);
        letter-spacing: var(--ds-heading-2xs-letter-spacing);
        line-height: var(--ds-heading-2xs-line-height)
    }

    .ds-heading[data-size=xs] {
        font-size: var(--ds-heading-xs-font-size);
        font-weight: var(--ds-heading-xs-font-weight);
        letter-spacing: var(--ds-heading-xs-letter-spacing);
        line-height: var(--ds-heading-xs-line-height)
    }

    .ds-heading[data-size=sm] {
        font-size: var(--ds-heading-sm-font-size);
        font-weight: var(--ds-heading-sm-font-weight);
        letter-spacing: var(--ds-heading-sm-letter-spacing);
        line-height: var(--ds-heading-sm-line-height)
    }

    .ds-heading[data-size=md] {
        font-size: var(--ds-heading-md-font-size)
    }

    .ds-heading[data-size=lg] {
        font-size: var(--ds-heading-lg-font-size);
        font-weight: var(--ds-heading-lg-font-weight);
        letter-spacing: var(--ds-heading-lg-letter-spacing);
        line-height: var(--ds-heading-lg-line-height)
    }

    .ds-heading[data-size=xl] {
        font-size: var(--ds-heading-xl-font-size);
        font-weight: var(--ds-heading-xl-font-weight);
        letter-spacing: var(--ds-heading-xl-letter-spacing);
        line-height: var(--ds-heading-xl-line-height)
    }

    .ds-heading[data-size="2xl"] {
        font-size: var(--ds-heading-2xl-font-size);
        font-weight: var(--ds-heading-2xl-font-weight);
        letter-spacing: var(--ds-heading-2xl-letter-spacing);
        line-height: var(--ds-heading-2xl-line-height)
    }

    .ds-label {
        font-weight: var(--ds-font-weight-medium)
    }

    .ds-label[data-weight=semibold] {
        font-weight: var(--ds-font-weight-semibold)
    }

    .ds-label[data-weight=regular] {
        font-weight: var(--ds-font-weight-regular)
    }
}

@layer ds.base {
}

@layer ds.base {
}

@layer ds.base {
    :where(.ds-paragraph) {
        margin-block: 0
    }

    .ds-paragraph[data-variant=long] {
        line-height: var(--ds-line-height-lg)
    }

    .ds-paragraph[data-variant=short] {
        line-height: var(--ds-line-height-sm)
    }
}

@layer ds.components {
    .ds-link {
        --dsc-link-background--active: var(--ds-color-surface-tinted);
        --dsc-link-color--active: var(--ds-color-text-default);
        --dsc-link-color--hover: var(--ds-color-text-default);
        --dsc-link-color: var(--ds-color-text-subtle);
        --dsc-link-background--focus: var(--ds-color-focus-outer);
        --dsc-link-color--focus: var(--ds-color-focus-inner);
        --dsc-link-color--visited: var(--ds-link-color-visited);
        --dsc-link-text-decoration-thickness--hover: 0.125em;
        --dsc-link-text-decoration-thickness: 0.0625em;
        color: var(--dsc-link-color);
        outline: none;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-thickness: var(--dsc-link-text-decoration-thickness);
        text-underline-offset: .27em
    }

    .ds-link :is(img,svg) {
        vertical-align: middle
    }

    .ds-link[data-color=neutral] {
        --dsc-link-color--active: var(--ds-color-neutral-text-subtle);
        --dsc-link-color--hover: var(--ds-color-neutral-text-subtle);
        --dsc-link-color: var(--ds-color-neutral-text-default)
    }

    .ds-link:visited {
        color: var(--dsc-link-color--visited)
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-link:hover {
            color: var(--dsc-link-color--hover);
            text-decoration-thickness: var(--dsc-link-text-decoration-thickness--hover)
        }
    }.ds-link:focus-visible {
         background: var(--dsc-link-background--focus);
         color: var(--dsc-link-color--focus);
         outline: 2px solid transparent
     }

    .ds-link:active {
        background: var(--dsc-link-background--active);
        color: var(--dsc-link-color--active)
    }
}

@layer ds.base {
    .ds-validation-message {
        --dsc-validation-message-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
        --dsc-validation-message-icon-size: var(--ds-size-7);
        --dsc-validation-message-spacing: var(--ds-size-2);
        --dsc-validation-message-color: var(--ds-color-danger-text-subtle);
        color: var(--dsc-validation-message-color);
        margin: 0;
        padding-inline-start: calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing));
        position: relative
    }

    .ds-validation-message:before {
        background: currentcolor;
        content: "";
        height: var(--dsc-validation-message-icon-size);
        margin-inline: calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing)) * -1);
        -webkit-mask: var(--dsc-validation-message-icon-url) center /contain no-repeat;
        mask: var(--dsc-validation-message-icon-url) center /contain no-repeat;
        position: absolute;
        translate: 0 calc((1lh - var(--dsc-validation-message-icon-size)) / 2);
        width: var(--dsc-validation-message-icon-size)
    }

    @media (forced-colors: active) {
        .ds-validation-message:before {
            background: CanvasText
        }
    }.ds-validation-message[data-color=success] {
         --dsc-validation-message-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
         --dsc-validation-message-color: var(--ds-color-success-text-subtle)
     }

    .ds-validation-message[data-color=warning] {
        --dsc-validation-message-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
        --dsc-validation-message-color: var(--ds-color-warning-text-subtle)
    }

    .ds-validation-message[data-color=info] {
        --dsc-validation-message-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
        --dsc-validation-message-color: var(--ds-color-info-text-subtle)
    }
}

@layer ds.components {
    .ds-button {
        --dsc-button-background--active: var(--ds-color-base-active);
        --dsc-button-background--hover: var(--ds-color-base-hover);
        --dsc-button-background: var(--ds-color-base-default);
        --dsc-button-color: var(--ds-color-base-contrast-default);
        --dsc-button-color--hover: var(--ds-color-base-contrast-default);
        --dsc-button-border-width: var(--ds-border-width-default);
        --dsc-button-border-style: solid;
        --dsc-button-border-color: transparent;
        --dsc-button-gap: var(--ds-size-2);
        --dsc-button-padding: var(--ds-size-2) var(--ds-size-4);
        --dsc-button-size: var(--ds-size-12);
        align-items: center;
        background: var(--dsc-button-background);
        border-color: var(--dsc-button-border-color);
        border-radius: var(--ds-border-radius-default);
        border-style: var(--dsc-button-border-style);
        border-width: var(--dsc-button-border-width);
        box-sizing: border-box;
        color: var(--dsc-button-color);
        cursor: pointer;
        font-family: inherit;
        font-weight: var(--ds-font-weight-medium);
        gap: var(--dsc-button-gap);
        height: -moz-fit-content;
        height: fit-content;
        justify-content: center;
        line-height: var(--ds-line-height-sm);
        min-height: var(--dsc-button-size);
        min-width: var(--dsc-button-size);
        outline: none;
        padding: var(--dsc-button-padding);
        text-align: inherit;
        text-decoration: none
    }

    .ds-button:focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-button:focus-visible * {
        --_ds--focus:
    }

    .ds-button[data-variant=secondary], .ds-button[data-variant=tertiary] {
        --dsc-button-background: transparent;
        --dsc-button-background--active: var(--ds-color-surface-active);
        --dsc-button-background--hover: var(--ds-color-surface-hover);
        --dsc-button-color: var(--ds-color-text-subtle);
        --dsc-button-color--hover: var(--ds-color-text-default)
    }

    .ds-button[data-variant=secondary] {
        --dsc-button-border-color: var(--ds-color-border-strong)
    }

    .ds-button:not([data-size]) {
        font-size: inherit
    }

    .ds-button :where(img,svg) {
        flex-shrink: 0;
        font-size: 1.25em
    }

    .ds-button:focus-visible {
        position: relative
    }

    .ds-button:where(:not([hidden])) {
        display: flex
    }

    .ds-button[data-icon] {
        height: var(--dsc-button-size);
        padding: 0;
        width: var(--dsc-button-size)
    }

    .ds-button[data-fullwidth] {
        text-align: center;
        width: 100%
    }

    .ds-button .ds-spinner {
        font-size: 1.4em
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):hover {
            background: var(--dsc-button-background--hover);
            color: var(--dsc-button-color--hover)
        }
    }.ds-button[aria-busy=true] {
         cursor: progress
     }

    .ds-button:is(:disabled,[aria-disabled=true]) {
        cursor: not-allowed;
        opacity: var(--ds-opacity-disabled)
    }

    .ds-button[aria-busy=true]:is(:disabled,[aria-disabled=true]) {
        cursor: progress;
        opacity: 1
    }

    .ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):active {
        background: var(--dsc-button-background--active)
    }
}

@layer ds.components {
    :where(.ds-input) {
        margin: 0
    }

    .ds-input {
        --dsc-input-padding: var(--ds-size-2) var(--ds-size-3);
        --dsc-input-size--toggle: var(--ds-size-6);
        --dsc-input-size: var(--ds-size-12);
        --dsc-input-background--readonly: var(--ds-color-neutral-surface-tinted);
        --dsc-input-background: var(--ds-color-neutral-surface-default);
        --dsc-input-border-color--readonly: var(--ds-color-neutral-border-subtle);
        --dsc-input-border-color: var(--ds-color-neutral-border-default);
        --dsc-input-border-style: solid;
        --dsc-input-border-width--toggle: max(var(--ds-border-width-default), calc(var(--ds-size-1) / 2));
        --dsc-input-border-width: var(--ds-border-width-default);
        --dsc-input-color--readonly: var(--ds-color-neutral-text-default);
        --dsc-input-color: var(--ds-color-neutral-text-default);
        --dsc-input-stroke-color: var(--ds-color-base-contrast-default);
        --dsc-input-stroke-color--invalid: var(--ds-color-danger-base-contrast-default);
        --dsc-input-stroke-width: 0.05em;
        --dsc-input-accent-color: var(--ds-color-base-default);
        --dsc-input-accent-color--invalid: var(--ds-color-danger-text-subtle);
        --_dsc-input-diagonal-1: transparent calc(48% - var(--dsc-input-stroke-width));
        --_dsc-input-diagonal-2: currentcolor calc(50% - var(--dsc-input-stroke-width));
        --_dsc-input-diagonal-3: currentcolor calc(50% + var(--dsc-input-stroke-width));
        --_dsc-input-diagonal-4: transparent calc(52% + var(--dsc-input-stroke-width));
        --_dsc-input-spacing--toggle: calc(var(--ds-size-1) / 2);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--dsc-input-background);
        border-color: var(--dsc-input-border-color);
        border-radius: var(--ds-border-radius-md);
        border-style: var(--dsc-input-border-style);
        border-width: var(--dsc-input-border-width);
        box-sizing: border-box;
        color: var(--dsc-input-color);
        font-family: inherit;
        height: var(--dsc-input-size);
        line-height: inherit;
        max-width: 100%;
        min-width: 0;
        padding: var(--dsc-input-padding);
        position: relative;
        vertical-align: middle
    }

    .ds-input:focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-input:focus-visible * {
        --_ds--focus:
    }

    @media (forced-colors: active) {
        .ds-input {
            background-color: Canvas;
            border-color: ButtonText
        }

        .ds-input:disabled, .ds-input[aria-disabled=true], .ds-input[readonly] {
            border-color: GrayText
        }
    }@supports (width:round(down,.1em,1px)) {
    .ds-input {
        border-width: round(up, var(--dsc-input-border-width), .0625rem)
    }
}.ds-input:not([data-size]) {
     font-size: inherit
 }

    .ds-input:is(select) {
        background-image: linear-gradient(45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
        background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em);
        background-repeat: no-repeat;
        background-size: .4em .4em;
        padding-inline-end: 2.4em
    }

    :dir(rtl) .ds-input:is(select) {
        background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em
    }

    @media (forced-colors: active) {
        .ds-input:is(select) {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto
        }
    }.ds-input:is(textarea) {
         height: auto;
         min-height: calc(var(--dsc-input-size) * 1.5);
         resize: vertical
     }

    .ds-input:is(textarea):not([rows]) {
        field-sizing: content
    }

    .ds-input:not([size],[cols],select:where([data-width=auto])) {
        width: 100%
    }

    .ds-input:checked, .ds-input:indeterminate:where([type=checkbox]) {
        background: var(--dsc-input-accent-color);
        border-color: var(--dsc-input-accent-color);
        color: var(--dsc-input-stroke-color)
    }

    .ds-input:disabled, .ds-input[aria-disabled=true] {
        cursor: not-allowed;
        opacity: var(--ds-opacity-disabled)
    }

    .ds-input[aria-invalid=true] {
        border-color: var(--dsc-input-accent-color--invalid)
    }

    .ds-input[aria-invalid=true]:where(:checked) {
        background: var(--dsc-input-accent-color--invalid);
        color: var(--dsc-input-stroke-color--invalid)
    }

    .ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate) {
        background: var(--dsc-input-accent-color--invalid);
        color: var(--dsc-input-stroke-color--invalid)
    }

    .ds-input[readonly] {
        background: var(--dsc-input-background--readonly);
        border-color: var(--dsc-input-border-color--readonly);
        color: var(--dsc-input-color--readonly)
    }

    @media (forced-colors: active) {
        .ds-input[readonly] {
            border-color: GrayText
        }
    }.ds-input:-moz-read-only:not([readonly],[aria-disabled=true],:disabled) {
         cursor: pointer
     }

    .ds-input:read-only:not([readonly],[aria-disabled=true],:disabled) {
        cursor: pointer
    }

    .ds-input[type=checkbox], .ds-input[type=radio] {
        border-width: var(--dsc-input-border-width--toggle);
        flex-shrink: 0;
        height: var(--dsc-input-size--toggle);
        line-height: inherit;
        padding: var(--_dsc-input-spacing--toggle);
        width: var(--dsc-input-size--toggle)
    }

    @media (forced-colors: active) {
        .ds-input[type=checkbox], .ds-input[type=radio] {
            color: Canvas
        }

        :is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled, [aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]), [readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]) {
            border-color: GrayText
        }
    }.ds-input[type=radio] {
         border-radius: var(--ds-border-radius-full)
     }

    .ds-input[type=radio]:checked {
        background-image: radial-gradient(circle closest-side, currentcolor 45%, transparent 50%)
    }

    @media (forced-colors: active) {
        .ds-input[type=radio]:checked {
            background-color: LinkText;
            border-color: LinkText;
            color: Canvas;
            forced-color-adjust: none
        }
    }.ds-input[type=checkbox] {
         border-radius: var(--ds-border-radius-sm)
     }

    .ds-input[type=checkbox]:checked {
        background-image: linear-gradient(45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
        background-origin: content-box;
        background-position: 10% 73%, 90% 50%;
        background-repeat: no-repeat;
        background-size: 35% 35%, 65% 65%
    }

    @media (forced-colors: active) {
        .ds-input[type=checkbox]:checked {
            background-color: LinkText;
            border-color: LinkText;
            forced-color-adjust: none
        }
    }.ds-input[type=checkbox]:indeterminate {
         background-image: linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)), currentcolor calc(50% - var(--dsc-input-stroke-width)), currentcolor calc(50% + var(--dsc-input-stroke-width)), transparent calc(52% + var(--dsc-input-stroke-width)));
         background-origin: content-box;
         background-position: 50%;
         background-repeat: no-repeat;
         background-size: contain
     }

    @media (forced-colors: active) {
        .ds-input[type=checkbox]:indeterminate {
            background-color: LinkText;
            border-color: LinkText;
            forced-color-adjust: none
        }
    }.ds-input[role=switch]:is([type=radio],[type=checkbox]) {
         --_dsc-input-circle-position: left;
         background-image: radial-gradient(circle closest-side, currentcolor 95%, transparent 100%);
         background-origin: content-box;
         background-position: var(--_dsc-input-circle-position);
         background-repeat: no-repeat;
         background-size: calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle) * 2) 100%;
         border-radius: var(--ds-border-radius-full);
         padding-inline: 0;
         transition: background-position .2s;
         width: calc(var(--dsc-input-size--toggle) * 2)
     }

    .ds-input[role=switch]:is([type=radio],[type=checkbox]):checked {
        --_dsc-input-circle-position: right
    }

    @media (forced-colors: active) {
        .ds-input[role=switch]:is([type=radio],[type=checkbox]):checked {
            color: initial
        }
    }@media (forced-colors: active) {
    .ds-input[role=switch]:is([type=radio],[type=checkbox]) {
        color: GrayText;
        forced-color-adjust: none
    }

    .ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]) {
        color: GrayText
    }

    .ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled, .ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]), .ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]) {
        border-color: GrayText
    }
}
}

@layer ds.components {
    .ds-field {
        --dsc-field-content-spacing: var(--ds-size-2)
    }

    .ds-field > * {
        margin-block: 0
    }

    .ds-field > * + * {
        margin-top: var(--dsc-field-content-spacing)
    }

    .ds-field [data-field=description] {
        color: var(--ds-color-neutral-text-subtle)
    }

    .ds-field input:not([hidden]) {
        display: block
    }

    .ds-field:has([aria-disabled=true]:not(u-option,[role=option][aria-disabled=true]),:disabled:not(option)) > * {
        cursor: not-allowed;
        opacity: var(--ds-opacity-disabled)
    }

    :is(.ds-field:has([aria-readonly=true],[readonly]) label):before {
        background: currentcolor;
        content: "";
        display: inline-block;
        height: calc(1em * var(--ds-line-height-md));
        height: 1lh;
        margin-inline-end: .25ch;
        -webkit-mask: center/contain no-repeat var(--ds-readonly-icon-url);
        mask: center/contain no-repeat var(--ds-readonly-icon-url);
        vertical-align: bottom;
        width: var(--ds-readonly-icon-size)
    }

    @media (forced-colors: active) {
        :is(.ds-field:has([aria-readonly=true],[readonly]) label):before {
            background: CanvasText
        }
    }.ds-field:has(input:is([type=radio],[type=checkbox])) {
         border-radius: var(--ds-border-radius-md);
         -moz-column-gap: var(--dsc-field-content-spacing);
         column-gap: var(--dsc-field-content-spacing);
         grid-template-areas:"input content";
         grid-template-columns:auto 1fr;
         width: -moz-fit-content;
         width: fit-content
     }

    .ds-field:has(input:is([type=radio],[type=checkbox])):not([hidden]) {
        display: grid
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])) > * {
        grid-column: content;
        margin-block: 0
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])) label {
        font-weight: var(--ds-font-weight-regular)
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])) label:before {
        content: none
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])) input {
        grid-column: input;
        grid-row: 1
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])):not(:has([readonly],[aria-disabled=true]:not(u-option),:disabled:not(option))) label {
        cursor: pointer
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible) {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible) * {
        --_ds--focus:
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])):has(input:only-child) {
        gap: 0
    }

    .ds-field:has(input:is([type=radio],[type=checkbox])) .ds-input:is([type=radio],[type=checkbox]):not([aria-label]) {
        translate: 0 calc(.5lh - 50%)
    }

    .ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox])) {
        grid-template-areas:"content input";
        grid-template-columns:1fr auto;
        width: auto
    }

    .ds-field-affixes {
        --dsc-field-affix-border-width: var(--ds-border-width-default);
        --dsc-field-affix-border-style: solid;
        --dsc-field-affix-border-color: var(--ds-color-neutral-border-default);
        --dsc-field-affix-padding-inline: var(--ds-size-4);
        background: var(--ds-color-neutral-surface-tinted);
        border-radius: var(--ds-border-radius-md);
        box-sizing: border-box;
        color: var(--ds-color-neutral-text-subtle);
        max-width: 100%;
        white-space: nowrap
    }

    .ds-field-affixes:not([hidden]) {
        display: flex
    }

    .ds-field-affixes:has([size]) {
        width: -moz-fit-content;
        width: fit-content
    }

    .ds-field-affixes .ds-field-affix {
        align-items: center;
        border-color: var(--dsc-field-affix-border-color);
        border-style: var(--dsc-field-affix-border-style);
        border-width: var(--dsc-field-affix-border-width);
        flex-shrink: 0;
        padding-inline: var(--dsc-field-affix-padding-inline)
    }

    :is(.ds-field-affixes .ds-field-affix):not([hidden]) {
        display: flex
    }

    :is(.ds-field-affixes .ds-field-affix):first-child {
        border-end-start-radius: inherit;
        border-inline-end: 0;
        border-start-start-radius: inherit
    }

    :is(.ds-field-affixes .ds-field-affix):last-child {
        border-end-end-radius: inherit;
        border-inline-start: 0;
        border-start-end-radius: inherit
    }

    .ds-field-affixes .ds-input {
        border-style: var(--dsc-field-affix-border-style);
        border-width: var(--dsc-field-affix-border-width);
        flex: 1 1 auto
    }

    :is(.ds-field-affixes .ds-input):not(:last-child) {
        border-end-end-radius: 0;
        border-start-end-radius: 0
    }

    :is(.ds-field-affixes .ds-input):not(:first-child) {
        border-end-start-radius: 0;
        border-start-start-radius: 0
    }
}

@layer ds.components {
    .ds-fieldset {
        border: 0;
        margin: 0;
        min-width: 0;
        padding: 0
    }

    .ds-fieldset > legend {
        padding: 0
    }

    :is(.ds-fieldset:has(input[readonly]):not(:has(input:not([readonly])))>legend):before {
        background: currentcolor;
        content: "";
        display: inline-block;
        height: calc(1em * var(--ds-line-height-md));
        height: 1lh;
        margin-inline-end: .25ch;
        -webkit-mask: center/contain no-repeat var(--ds-readonly-icon-url);
        mask: center/contain no-repeat var(--ds-readonly-icon-url);
        vertical-align: bottom;
        width: var(--ds-readonly-icon-size)
    }

    @media (forced-colors: active) {
        :is(.ds-fieldset:has(input[readonly]):not(:has(input:not([readonly])))>legend):before {
            background: CanvasText
        }
    }.ds-fieldset > * + * {
         margin-block-start: var(--ds-size-4)
     }

    .ds-fieldset > legend + p {
        color: var(--ds-color-neutral-text-subtle);
        margin-block: var(--ds-size-1) 0
    }

    .ds-fieldset:disabled > legend, .ds-fieldset:disabled > legend + p {
        opacity: var(--ds-opacity-disabled)
    }

    .ds-alert {
        --dsc-alert-background: var(--ds-color-info-surface-tinted);
        --dsc-alert-border-width: var(--ds-border-width-default);
        --dsc-alert-border-style: solid;
        --dsc-alert-border-color: var(--ds-color-info-border-default);
        --dsc-alert-border-radius: var(--ds-border-radius-md);
        --dsc-alert-icon-color: var(--ds-color-info-text-subtle);
        --dsc-alert-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
        --dsc-alert-color: var(--ds-color-info-text-default);
        --dsc-alert-spacing: var(--ds-size-2);
        --dsc-alert-icon-size: var(--ds-size-7);
        --dsc-alert-padding-block: var(--ds-size-6);
        --dsc-alert-padding-inline-end: var(--ds-size-6);
        background: var(--dsc-alert-background);
        border-color: var(--dsc-alert-border-color);
        border-radius: var(--dsc-alert-border-radius);
        border-style: var(--dsc-alert-border-style);
        border-width: var(--dsc-alert-border-width);
        box-sizing: border-box;
        color: var(--dsc-alert-color);
        padding-block: var(--dsc-alert-padding-block);
        padding-inline-end: var(--dsc-alert-padding-inline-end);
        padding-inline-start: calc(var(--dsc-alert-padding-inline-end) + var(--dsc-alert-icon-size) + var(--dsc-alert-spacing));
        position: relative
    }
}

@layer ds.components {
    .ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before, .ds-alert > :is(h1,h2,h3,h4,h5,h6):first-child:before {
        background: var(--dsc-alert-icon-color);
        content: "";
        height: var(--dsc-alert-icon-size);
        margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-spacing)) * -1);
        -webkit-mask: var(--dsc-alert-icon-url) center /contain no-repeat;
        mask: var(--dsc-alert-icon-url) center /contain no-repeat;
        position: absolute;
        translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2);
        width: var(--dsc-alert-icon-size)
    }

    @media (forced-colors: active) {
        .ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before, .ds-alert > :is(h1,h2,h3,h4,h5,h6):first-child:before {
            background: CanvasText
        }
    }.ds-alert[data-color] {
         --dsc-alert-background: var(--ds-color-surface-tinted);
         --dsc-alert-border-color: var(--ds-color-border-default);
         --dsc-alert-icon-color: var(--ds-color-text-subtle);
         --dsc-alert-color: var(--ds-color-text-default)
     }

    .ds-alert[data-color=warning] {
        --dsc-alert-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E")
    }

    .ds-alert[data-color=success] {
        --dsc-alert-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E")
    }

    .ds-alert[data-color=danger] {
        --dsc-alert-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")
    }

    .ds-popover {
        --dsc-popover-background: var(--ds-color-surface-default);
        --dsc-popover-border-width: var(--ds-border-width-default);
        --dsc-popover-border-style: solid;
        --dsc-popover-border-color: var(--ds-color-border-default);
        --dsc-popover-color: var(--ds-color-text-default);
        --dsc-popover-arrow-size: var(--ds-size-3);
        --dsc-popover-border-radius: var(--ds-border-radius-md);
        --dsc-popover-max-width: 300px;
        --dsc-popover-padding: var(--ds-size-3) var(--ds-size-4);
        --dsc-popover-box-shadow: var(--ds-shadow-md);
        border-color: var(--dsc-popover-border-color);
        border-radius: var(--dsc-popover-border-radius);
        border-style: var(--dsc-popover-border-style);
        border-width: var(--dsc-popover-border-width);
        box-shadow: var(--dsc-popover-box-shadow);
        color: var(--dsc-popover-color);
        inset: 0 auto auto 0;
        max-width: var(--dsc-popover-max-width);
        overflow: visible;
        padding: var(--dsc-popover-padding);
        position: fixed
    }

    .ds-popover, .ds-popover:before {
        background: var(--dsc-popover-background);
        box-sizing: border-box
    }

    .ds-popover:before {
        border: inherit;
        border-left-color: transparent;
        border-top-color: transparent;
        content: "";
        height: var(--dsc-popover-arrow-size);
        left: var(--ds-popover-arrow-x);
        position: absolute;
        top: var(--ds-popover-arrow-y);
        translate: -50% -50%;
        width: var(--dsc-popover-arrow-size)
    }

    .ds-popover[data-placement=top]:before {
        rotate: 45deg
    }

    .ds-popover[data-placement=left]:before {
        rotate: -45deg
    }

    .ds-popover[data-placement=right]:before {
        rotate: 135deg
    }

    .ds-popover[data-placement=bottom]:before {
        rotate: -135deg
    }

    .ds-popover[data-variant=default] {
        --dsc-popover-background: var(--ds-color-surface-default)
    }

    .ds-popover[data-variant=tinted] {
        --dsc-popover-background: var(--ds-color-surface-tinted)
    }

    [data-popover=inline] {
        all: unset;
        cursor: pointer;
        font-size: inherit;
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
        text-underline-offset: .27em
    }

    [data-popover=inline]:not([hidden]) {
        display: inline
    }
}

@layer ds.components {
    [data-popover=inline]:focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    [data-popover=inline]:focus-visible * {
        --_ds--focus:
    }
}

@layer ds.components {
    .ds-skiplink {
        --dsc-skiplink-padding: var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4);
        --dsc-skiplink-background: var(--ds-color-surface-hover);
        --dsc-skiplink-color: var(--ds-color-text-default);
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px
    }

    .ds-skiplink:focus {
        height: auto;
        margin: inherit;
        outline: 0;
        overflow: visible;
        place-items: center;
        position: static;
        width: auto;
        clip: auto;
        background: var(--dsc-skiplink-background);
        box-sizing: border-box;
        clip-path: none;
        color: var(--dsc-skiplink-color);
        padding: var(--dsc-skiplink-padding);
        text-decoration: underline;
        text-decoration-thickness: max(1px, .0625rem);
        text-underline-offset: max(5px, .25rem);
        white-space: inherit
    }

    .ds-skiplink:focus:not([hidden]) {
        display: grid
    }

    .ds-details {
        --dsc-details-border-block-wdith: var(--ds-border-width-default);
        --dsc-details-border-block-width: var(--dsc-details-border-block-wdith);
        --dsc-details-border-block-style: solid;
        --dsc-details-border-color: var(--ds-color-border-subtle);
        --dsc-details-icon-gap: var(--ds-size-2);
        --dsc-details-icon-size: var(--ds-size-6);
        --dsc-details-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
        --dsc-details-padding: var(--ds-size-2) var(--ds-size-4);
        --dsc-details-size: var(--ds-size-14);
        --dsc-details-background: var(--ds-color-surface-default);
        --dsc-details-summary-color: var(--ds-color-text-default);
        --dsc-details-summary-background--hover: var(--ds-color-surface-tinted);
        --dsc-details-summary-background--open: var(--ds-color-surface-tinted);
        --dsc-details-summary-background: var(--ds-color-surface-default);
        background: var(--dsc-details-background);
        border-block-style: var(--dsc-details-border-block-style);
        border-block-width: var(--dsc-details-border-block-width);
        border-color: var(--dsc-details-border-color);
        box-sizing: border-box
    }

    .ds-details[data-variant=default] {
        --dsc-details-background: var(--ds-color-surface-default);
        --dsc-details-summary-background--hover: var(--ds-color-surface-tinted);
        --dsc-details-summary-background--open: var(--ds-color-surface-tinted);
        --dsc-details-summary-background: var(--ds-color-surface-default)
    }

    .ds-card[data-variant=tinted] .ds-details, .ds-details[data-variant=tinted] {
        --dsc-details-background: var(--ds-color-surface-tinted);
        --dsc-details-summary-background--hover: var(--ds-color-surface-hover);
        --dsc-details-summary-background--open: var(--ds-color-surface-hover);
        --dsc-details-summary-background: var(--ds-color-surface-tinted);
        --dsc-details-border-color: var(--ds-color-border-subtle)
    }
}

@layer ds.components {
    .ds-details > summary::-webkit-details-marker {
        display: none
    }

    .ds-details > :is(summary,u-summary) {
        align-items: center;
        background: var(--dsc-details-summary-background);
        box-sizing: border-box;
        color: var(--dsc-details-summary-color);
        cursor: pointer;
        gap: var(--dsc-details-icon-gap);
        list-style: none;
        min-height: var(--dsc-details-size);
        outline: none;
        padding: var(--dsc-details-padding);
        position: relative
    }

    :is(.ds-details>:is(summary,u-summary)):not([hidden]) {
        display: flex
    }

    :is(.ds-details>:is(summary,u-summary)):focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow-inset));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus)) * -1)
    }

    :is(.ds-details>:is(summary,u-summary)):focus-visible * {
        --_ds--focus:
    }

    :is(.ds-details>:is(summary,u-summary)):before {
        all: unset;
        background: currentcolor;
        border-radius: var(--ds-border-radius-md);
        content: "";
        flex-shrink: 0;
        height: var(--dsc-details-icon-size);
        -webkit-mask: 50%/contain no-repeat var(--dsc-details-icon-url);
        mask: 50%/contain no-repeat var(--dsc-details-icon-url);
        width: var(--dsc-details-icon-size)
    }

    @media (forced-colors: active) {
        .ds-details > :is(summary,u-summary) {
            color: ButtonText
        }

        :is(.ds-details>:is(summary,u-summary)):before {
            background: ButtonText
        }
    }.ds-details + .ds-details {
         border-top: 0;
         margin-top: 0
     }

    .ds-details > :not(summary,u-summary) {
        border-radius: inherit;
        padding: var(--ds-size-5, 1rem)
    }

    .ds-details[open] > :is(summary,u-summary) {
        background: var(--dsc-details-summary-background--open)
    }

    :is(.ds-details[open]>:is(summary,u-summary)):before {
        rotate: 180deg
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-details :is(summary,u-summary):hover {
            background: var(--dsc-details-summary-background--hover)
        }
    }@media (prefers-reduced-motion: no-preference) {
    .ds-details {
        interpolate-size: allow-keywords
    }
}.ds-details::part(details-content) {
     block-size: 0;
     overflow-y: clip;
     transition: content-visibility allow-discrete .4s, height .4s
 }

    .ds-details[open]::part(details-content) {
        height: auto
    }
}

@layer ds.components {
    .ds-search {
        --dsc-search-padding-inline: var(--ds-size-2);
        --dsc-search-clear-padding: var(--ds-size-1);
        --dsc-search-clear-size: var(--ds-size-9);
        --dsc-search-clear-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
        --dsc-search-magnifying-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
        --dsc-search-magnifying-icon-size: var(--ds-size-7);
        align-items: center;
        border-radius: var(--ds-border-radius-default);
        grid-template-columns:1fr auto;
        position: relative;
        width: 100%
    }

    .ds-search:not([hidden]) {
        display: grid
    }

    .ds-search:not(:has(button:not([type=reset]))) input {
        padding-inline-start: calc(var(--dsc-search-magnifying-icon-size) + var(--dsc-search-padding-inline) * 2)
    }

    .ds-search:not(:has(button:not([type=reset]))):before {
        grid-area: 1/1;
        margin-inline: var(--dsc-search-padding-inline);
        pointer-events: none;
        position: relative;
        z-index: 2
    }

    .ds-search button:not([type=reset]):empty:before, .ds-search:not(:has(button:not([type=reset]))):before {
        background: currentcolor;
        content: "";
        height: var(--dsc-search-magnifying-icon-size);
        -webkit-mask: var(--dsc-search-magnifying-icon-url) center /contain no-repeat;
        mask: var(--dsc-search-magnifying-icon-url) center /contain no-repeat;
        width: var(--dsc-search-magnifying-icon-size)
    }

    @media (forced-colors: active) {
        .ds-search button:not([type=reset]):empty:before, .ds-search:not(:has(button:not([type=reset]))):before {
            background: CanvasText
        }
    }.ds-search input {
         grid-area: 1/1;
         padding-inline: var(--dsc-search-padding-inline)
     }

    :is(.ds-search input)::-webkit-search-cancel-button, :is(.ds-search input)::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none
    }

    .ds-search:has(input:-moz-placeholder) button[type=reset] {
        display: none
    }

    .ds-search:has(input:is(:-moz-read-only,:disabled,[aria-disabled=true])) button[type=reset] {
        display: none
    }

    .ds-search:has(input:is(:read-only,:disabled,[aria-disabled=true])) button[type=reset], .ds-search:has(input:placeholder-shown) button[type=reset] {
        display: none
    }

    .ds-search:has(button[type=reset]) input {
        padding-inline-end: calc(var(--dsc-search-clear-size) + var(--dsc-search-padding-inline))
    }

    .ds-search button[type=reset] {
        --dsc-button-size: var(--dsc-search-clear-size);
        grid-area: 1/1;
        justify-self: end;
        margin-inline: var(--dsc-search-padding-inline);
        padding: var(--dsc-search-clear-padding);
        position: relative;
        scale: .75;
        z-index: 2
    }

    :is(.ds-search button[type=reset]):before {
        background: currentcolor;
        content: "";
        height: var(--dsc-search-clear-size);
        -webkit-mask: var(--dsc-search-clear-icon-url) center /contain no-repeat;
        mask: var(--dsc-search-clear-icon-url) center /contain no-repeat;
        width: var(--dsc-search-clear-size)
    }

    .ds-search button:not([type=reset]) {
        border-end-start-radius: 0;
        border-start-start-radius: 0
    }

    :is(.ds-search button:not([type=reset])):not(:focus-visible) {
        border-inline-start: 0
    }

    .ds-search:has(button:not([type=reset])):before {
        display: none
    }

    .ds-search:has(button:not([type=reset])) input {
        border-end-end-radius: 0;
        border-start-end-radius: 0
    }
}

@layer ds.components {
    .ds-dialog {
        --dsc-dialog-backdrop-background: rgba(0, 0, 0, .5);
        --dsc-dialog-background: var(--ds-color-neutral-surface-default);
        --dsc-dialog-icon-spacing: var(--ds-size-3);
        --dsc-dialog-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
        --dsc-dialog-color: var(--ds-color-neutral-text-default);
        --dsc-dialog-divider-border-width: var(--ds-border-width-default);
        --dsc-dialog-divider-border-style: solid;
        --dsc-dialog-divider-border-color: var(--ds-color-neutral-border-subtle);
        --dsc-dialog-border-width: var(--ds-border-width-default);
        --dsc-dialog-border-style: solid;
        --dsc-dialog-border-color: var(--ds-color-neutral-border-subtle);
        --dsc-dialog-max-height: 80vh;
        --dsc-dialog-max-width: 40rem;
        --dsc-dialog-spacing: var(--ds-size-6);
        --_dsc-dialog-icon-top-right-margin: calc(var(--dsc-dialog-spacing) * -1 + var(--dsc-dialog-icon-spacing));
        animation: ds-dialog-fade-in .2s forwards;
        background: var(--dsc-dialog-background);
        border-color: var(--dsc-dialog-border-color);
        border-radius: var(--ds-border-radius-lg);
        border-style: var(--dsc-dialog-border-style);
        border-width: var(--dsc-dialog-border-width);
        bottom: auto;
        box-shadow: var(--ds-shadow-xl);
        box-sizing: border-box;
        color: var(--dsc-dialog-color);
        left: 50%;
        margin: 0;
        max-height: var(--dsc-dialog-max-height);
        max-width: var(--dsc-dialog-max-width);
        overflow: auto;
        padding: var(--dsc-dialog-spacing);
        position: fixed;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%
    }

    .ds-dialog::backdrop {
        animation: ds-dialog-fade-in .3s ease-in-out;
        background: var(--dsc-dialog-backdrop-background, rgba(0, 0, 0, .5))
    }

    .ds-dialog[open] {
        animation: ds-dialog-slide-in .3s ease-in-out, ds-dialog-fade-in .3s ease-in-out
    }

    .ds-dialog:has(>.ds-dialog__block) {
        --_dsc-dialog-icon-top-right-margin: var(--dsc-dialog-icon-spacing);
        padding: 0
    }

    @media (max-width: 40rem) {
        .ds-dialog {
            border-radius: 0;
            max-width: 100%;
            min-width: 100%
        }
    }@media (prefers-reduced-motion: reduce) {
    .ds-dialog::backdrop, .ds-dialog[open] {
        animation: none
    }
}.ds-dialog > form[method=dialog]:first-child > button:only-child {
     color: inherit;
     float: inline-end;
     margin-block-end: var(--dsc-dialog-icon-spacing);
     margin-block-start: var(--_dsc-dialog-icon-top-right-margin);
     margin-inline-end: var(--_dsc-dialog-icon-top-right-margin);
     margin-inline-start: var(--dsc-dialog-icon-spacing)
 }

    :is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before {
        background: currentcolor;
        content: "";
        height: var(--ds-size-6);
        -webkit-mask: center/contain no-repeat var(--dsc-dialog-icon-url);
        mask: center/contain no-repeat var(--dsc-dialog-icon-url);
        width: var(--ds-size-6)
    }

    @media (forced-colors: active) {
        :is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before {
            background: ButtonText
        }
    }.ds-dialog__block {
         padding: var(--dsc-dialog-spacing)
     }

    .ds-dialog__block + .ds-dialog__block {
        border-top: var(--dsc-dialog-divider-border-width) var(--dsc-dialog-divider-border-style) var(--dsc-dialog-divider-border-color)
    }

    body:has(.ds-dialog:modal) {
        overflow: hidden
    }

    @keyframes ds-dialog-slide-in {
        0% {
            translate: 0 3rem
        }
    }@keyframes ds-dialog-fade-in {
         0% {
             opacity: 0
         }
     }
}

@layer ds.components {
    .ds-list {
        --dsc-list-padding-inline: var(--ds-size-6) 0;
        --dsc-list-margin-top: var(--ds-size-3);
        --dsc-list-margin-top-nested: var(--ds-size-2);
        margin: 0;
        padding-inline: var(--dsc-list-padding-inline)
    }

    .ds-list > li + li {
        margin-top: var(--dsc-list-margin-top)
    }

    .ds-list > li > :is(ol,ul) > li + li {
        margin-top: var(--dsc-list-margin-top-nested)
    }

    .ds-list > li:before {
        content: "\200B";
        position: absolute
    }

    .ds-card {
        --dsc-card-background--active: var(--ds-color-surface-active);
        --dsc-card-background--hover: var(--ds-color-surface-hover);
        --dsc-card-background: var(--ds-color-surface-default);
        --dsc-card-border-width: var(--ds-border-width-default);
        --dsc-card-border-style: solid;
        --dsc-card-border-color: var(--ds-color-border-subtle);
        --dsc-card-block-border-width: var(--dsc-card-border-width);
        --dsc-card-block-border-style: var(--dsc-card-border-style);
        --dsc-card-block-border-color: var(--dsc-card-border-color);
        --dsc-card-color: var(--ds-color-text-default);
        --dsc-card-content-margin-block: var(--ds-size-3) 0;
        --dsc-card-padding: var(--ds-size-6);
        --dsc-card-border-radius: var(--ds-border-radius-lg);
        background: var(--dsc-card-background);
        border-color: var(--dsc-card-border-color);
        border-radius: var(--dsc-card-border-radius);
        border-style: var(--dsc-card-border-style);
        border-width: var(--dsc-card-border-width);
        box-sizing: border-box;
        color: var(--dsc-card-color);
        font-family: inherit;
        margin: 0;
        overflow: clip;
        padding: var(--dsc-card-padding);
        text-align: inherit
    }

    .ds-card[data-variant=default] {
        background: var(--ds-color-surface-default)
    }

    .ds-card[data-variant=tinted] {
        background: var(--ds-color-surface-tinted)
    }

    .ds-card:not([hidden]) {
        display: block
    }

    .ds-card:not([data-size]) {
        font-size: inherit
    }
}

@layer ds.components {
    .ds-card :is(h1,h2,h3,h4,h5,h6) a:-moz-any-link, .ds-card:is(a:-moz-any-link,button,[role=button]) :is(h1,h2,h3,h4,h5,h6) {
        color: inherit;
        outline: 0;
        text-decoration: underline;
        text-decoration-thickness: max(1px, .0625rem, .1025em);
        text-underline-offset: max(6px, .25rem, .22em)
    }

    .ds-card :is(h1,h2,h3,h4,h5,h6) a:any-link, .ds-card:is(a:any-link,button,[role=button]) :is(h1,h2,h3,h4,h5,h6) {
        color: inherit;
        outline: 0;
        text-decoration: underline;
        text-decoration-thickness: max(1px, .0625rem, .1025em);
        text-underline-offset: max(6px, .25rem, .22em)
    }

    .ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a)), .ds-card:where(a,button,[role=button]) {
        cursor: pointer;
        text-decoration: none
    }

    @media (hover: hover) and (pointer: fine) {
        :is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):hover {
            background: var(--dsc-card-background--hover)
        }
    }:is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):where(:focus-visible,:has(:focus-visible)) {
         box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
         outline: var(--_ds--focus, var(--dsc-focus-outline));
         outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
     }

    :is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):where(:focus-visible,:has(:focus-visible)) * {
        --_ds--focus:
    }

    :is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):active {
        background: var(--dsc-card-background--active)
    }

    .ds-card:has(>.ds-card__block,.ds-details) {
        padding: 0
    }

    .ds-card > .ds-details:first-child {
        border-top: 0
    }

    .ds-card > .ds-details:last-child {
        border-bottom: 0
    }

    :where(.ds-card,.ds-card__block) > :first-child {
        margin-block: 0
    }

    :where(.ds-card,.ds-card__block) > * + * {
        margin-block: var(--dsc-card-content-margin-block)
    }

    .ds-card__block {
        box-sizing: border-box;
        margin: 0;
        padding: var(--dsc-card-padding);
        position: relative
    }

    .ds-card__block:before {
        border-color: var(--dsc-card-block-border-color);
        border-top-style: var(--dsc-card-block-border-style);
        border-top-width: var(--dsc-card-block-border-width);
        content: "";
        inset: 0 0 auto;
        position: absolute;
        translate: 0 -100%
    }

    .ds-card__block:after {
        border-color: var(--dsc-card-block-border-color);
        border-left-style: var(--dsc-card-block-border-style);
        border-left-width: var(--dsc-card-block-border-width);
        content: "";
        inset: 0 auto 0 0;
        position: absolute;
        translate: -100%
    }

    .ds-card__block:has(>:is(audio,figure,iframe,img,video):only-child) {
        padding: 0
    }

    .ds-card__block:has(>:is(audio,figure,iframe,img,video):only-child) > :not([hidden]) {
        border: 0;
        display: block;
        height: auto;
        width: 100%
    }

    .ds-card__block:has(>:is(audio,figure,iframe,img,video):only-child) > iframe {
        aspect-ratio: 16/9
    }
}

@layer ds.components {
    .ds-dropdown {
        --dsc-dropdown-padding: var(--ds-size-3) var(--ds-size-2);
        --dsc-dropdown-item-padding: var(--ds-size-2) var(--ds-size-4);
        --dsc-dropdown-item-size: var(--ds-size-12);
        --dsc-dropdown-background: var(--ds-color-neutral-surface-default);
        --dsc-dropdown-border-width: var(--ds-border-width-default);
        --dsc-dropdown-border-style: solid;
        --dsc-dropdown-border-color: var(--ds-color-neutral-border-subtle);
        --dsc-popover-arrow-size: var(--ds-size-2);
        background: var(--dsc-dropdown-background);
        border-color: var(--dsc-dropdown-border-color);
        border-radius: var(--ds-border-radius-md);
        border-style: var(--dsc-dropdown-border-style);
        border-width: var(--dsc-dropdown-border-width);
        box-sizing: border-box;
        list-style: none;
        min-width: 15em;
        padding: var(--dsc-dropdown-padding)
    }

    .ds-dropdown:before {
        display: none
    }

    .ds-dropdown :is(h2,h3,h4,h5,h6) {
        align-items: center;
        box-sizing: border-box;
        color: var(--ds-color-neutral-text-subtle);
        font-size: inherit;
        font-weight: inherit;
        margin: 0;
        min-height: var(--dsc-dropdown-item-size);
        padding: var(--dsc-dropdown-item-padding)
    }

    :is(.ds-dropdown :is(h2,h3,h4,h5,h6)):not([hidden]) {
        display: flex
    }

    .ds-dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    .ds-dropdown :is(a,button,[role=button]) {
        font-weight: var(--ds-font-weight-regular);
        justify-content: start;
        min-height: var(--dsc-dropdown-item-size);
        padding: var(--dsc-dropdown-item-padding);
        width: 100%
    }
}

@layer ds.components {
    .ds-chip {
        --dsc-chip-background: var(--ds-color-surface-tinted);
        --dsc-chip-background--hover: var(--ds-color-surface-hover);
        --dsc-chip-background--active: var(--ds-color-surface-active);
        --dsc-chip-background--checked: var(--ds-color-base-default);
        --dsc-chip-background--checked--hover: var(--ds-color-base-hover);
        --dsc-chip-background--checked--active: var(--ds-color-base-active);
        --dsc-chip-border-width: var(--ds-border-width-default);
        --dsc-chip-border-style: solid;
        --dsc-chip-border-color: var(--ds-color-border-subtle);
        --dsc-chip-border-color--checked: transparent;
        --dsc-chip-color: var(--ds-color-text-default);
        --dsc-chip-input-accent-color: var(--ds-color-base-contrast-default);
        --dsc-chip-input-color: var(--ds-color-text-subtle);
        --dsc-chip-input-stroke-color: var(--ds-color-base-default);
        --dsc-chip-border-radius: var(--ds-border-radius-full);
        --dsc-chip-border-radius--checkbox: var(--ds-border-radius-md);
        --dsc-chip-border-radius--checkbox-input: var(--ds-border-radius-sm);
        --dsc-chip-height: var(--ds-size-8);
        --dsc-chip-icon-size: var(--ds-size-7);
        --dsc-chip-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
        --dsc-chip-input-size: var(--ds-size-5);
        --dsc-chip-spacing: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2);
        align-items: center;
        background: var(--dsc-chip-background);
        border-color: var(--dsc-chip-border-color);
        border-radius: var(--dsc-chip-border-radius);
        border-style: var(--dsc-chip-border-style);
        border-width: var(--dsc-chip-border-width);
        box-sizing: border-box;
        color: var(--dsc-chip-color);
        cursor: pointer;
        font-family: inherit;
        gap: var(--dsc-chip-spacing);
        line-height: var(--ds-line-height-sm);
        margin: 0;
        max-height: -moz-fit-content;
        max-height: fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        min-height: var(--dsc-chip-height);
        padding: 0 var(--ds-size-3);
        text-decoration: none
    }

    .ds-chip:focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-chip:focus-visible * {
        --_ds--focus:
    }

    .ds-chip:not([hidden]) {
        display: inline-flex
    }

    .ds-chip:not([data-size]) {
        font-size: var(--ds-font-size-minus-1)
    }

    .ds-chip:has(:focus-visible) {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-chip:has(:focus-visible) * {
        --_ds--focus:
    }

    .ds-chip:disabled, .ds-chip:has(input:disabled), .ds-chip[aria-disabled=true] {
        cursor: not-allowed;
        opacity: var(--ds-opacity-disabled)
    }

    .ds-chip[data-removable] {
        padding-inline-end: var(--dsc-chip-spacing)
    }

    .ds-chip[data-removable]:after {
        background: currentcolor;
        content: "";
        height: var(--dsc-chip-icon-size);
        -webkit-mask: center/contain no-repeat var(--dsc-chip-icon-url);
        mask: center/contain no-repeat var(--dsc-chip-icon-url);
        width: var(--dsc-chip-icon-size)
    }

    .ds-chip:has(input[type=radio]) {
        padding-inline-start: var(--dsc-chip-spacing)
    }

    .ds-chip:has(input[type=checkbox]) {
        border-radius: var(--dsc-chip-border-radius--checkbox);
        padding-inline: var(--dsc-chip-spacing)
    }

    .ds-chip:has(input[type=checkbox]) input {
        border-radius: var(--dsc-chip-border-radius--checkbox-input)
    }

    .ds-chip > input {
        --dsc-input-background: transparent;
        --dsc-input-border-color: var(--dsc-chip-input-color);
        --dsc-input-accent-color: var(--dsc-chip-input-accent-color);
        --dsc-input-stroke-color: var(--dsc-chip-input-stroke-color);
        --dsc-input-size--toggle: var(--dsc-chip-input-size)
    }

    .ds-chip:has(input:checked), .ds-chip[data-removable] {
        background: var(--dsc-chip-background--checked);
        border-color: var(--dsc-chip-border-color--checked);
        color: var(--dsc-chip-input-accent-color)
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-chip:not(:has(:disabled,[aria-disabled=true])):hover {
            background: var(--dsc-chip-background--hover)
        }

        .ds-chip:not(:has(:disabled,[aria-disabled=true])):active {
            background: var(--dsc-chip-background--active)
        }

        :is(.ds-chip:not(:has(:disabled,[aria-disabled=true])):has(input:checked),.ds-chip[data-removable]:not(:has(:disabled,[aria-disabled=true]))):hover {
            background: var(--dsc-chip-background--checked--hover)
        }

        :is(.ds-chip:not(:has(:disabled,[aria-disabled=true])):has(input:checked),.ds-chip[data-removable]:not(:has(:disabled,[aria-disabled=true]))):active {
            background: var(--dsc-chip-background--checked--active)
        }
    }
}

@layer ds.components {
    .ds-divider {
        --dsc-divider-border-width: var(--ds-border-width-default);
        --dsc-divider-border-style: solid;
        --dsc-divider-border-color: var(--ds-color-neutral-border-subtle);
        border-color: var(--dsc-divider-border-color);
        border-top-style: var(--dsc-divider-border-style);
        border-width: 0;
        border-top-width: var(--dsc-divider-border-width);
        box-sizing: border-box;
        margin-block: .5em;
        width: 100%
    }

    .ds-tabs {
        --dsc-tabs-tab-padding: var(--ds-size-3) var(--ds-size-5);
        --dsc-tabs-tab-color: var(--ds-color-neutral-text-subtle);
        --dsc-tabs-tab-color--hover: var(--ds-color-neutral-text-default);
        --dsc-tabs-tab-color--selected: var(--ds-color-text-subtle);
        --dsc-tabs-content-padding: var(--ds-size-4) var(--ds-size-5);
        --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
        --dsc-tabs-list-border-bottom-width: var(--ds-border-width-default);
        --dsc-tabs-list-border-bottom-style: solid
    }

    .ds-tabs [role=tabpanel], .ds-tabs u-tabpanel {
        padding: var(--dsc-tabs-content-padding)
    }
}

@layer ds.components {
    :is(.ds-tabs [role=tabpanel],.ds-tabs u-tabpanel):focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    :is(.ds-tabs [role=tabpanel],.ds-tabs u-tabpanel):focus-visible * {
        --_ds--focus:
    }

    .ds-tabs [role=tablist], .ds-tabs u-tablist {
        border-bottom-style: var(--dsc-tabs-list-border-bottom-style);
        border-bottom-width: var(--dsc-tabs-list-border-bottom-width);
        border-color: var(--dsc-tabs-list-border-color);
        flex-direction: row;
        overflow-x: auto;
        position: relative
    }

    :is(.ds-tabs [role=tablist],.ds-tabs u-tablist):not([hidden]) {
        display: flex
    }

    :is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button, :is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab {
        align-items: center;
        background: none;
        border: 0;
        box-sizing: border-box;
        color: var(--dsc-tabs-tab-color);
        cursor: pointer;
        flex-direction: row;
        font-family: inherit;
        font-size: inherit;
        gap: var(--ds-size-1);
        justify-content: center;
        line-height: var(--ds-line-height-sm);
        margin: 0;
        padding: var(--dsc-tabs-tab-padding);
        position: relative;
        text-align: center;
        white-space: nowrap
    }

    :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow-inset));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus)) * -1)
    }

    :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):focus-visible * {
        --_ds--focus:
    }

    :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):not([hidden]) {
        display: flex
    }

    :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):not([data-size]) {
        font-size: inherit
    }

    :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab) :where(img,svg) {
        flex-shrink: 0;
        font-size: 1.25em
    }

    [aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab) {
        color: var(--dsc-tabs-tab-color--selected)
    }

    [aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):after {
        background: var(--dsc-tabs-tab-color--selected)
    }

    [aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):focus-visible:after {
        z-index: -1
    }

    @media (forced-colors: active) {
        [aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab) {
            border-bottom: 2px solid CanvasText;
            color: initial
        }
    }:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):focus-visible {
         z-index: 2
     }

    :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):after {
        bottom: 0;
        content: "";
        display: block;
        height: .15em;
        left: 0;
        position: absolute;
        width: 100%
    }

    @media (hover: hover) and (pointer: fine) {
        :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):hover:not([aria-selected=true]) {
            color: var(--dsc-tabs-tab-color--hover)
        }

        :is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) button,:is(.ds-tabs [role=tablist],.ds-tabs u-tablist) u-tab):hover:not([aria-selected=true]):after {
            background: var(--dsc-tabs-list-border-color)
        }
    }
}

@layer ds.components {
    .ds-pagination {
        --dsc-pagination-gap: var(--ds-size-2);
        --dsc-pagination-icon-size: var(--ds-size-6);
        --dsc-pagination-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
    }

    .ds-pagination :is(ol,ul) {
        align-items: center;
        flex-wrap: wrap;
        gap: var(--dsc-pagination-gap);
        list-style: none;
        margin: 0;
        padding: 0
    }

    :is(.ds-pagination :is(ol,ul)):not([hidden]) {
        display: flex
    }

    :is(.ds-pagination :is(ol,ul)) > li:first-child > :before, :is(.ds-pagination :is(ol,ul)) > li:last-child > :before {
        background: currentcolor;
        content: "";
        height: var(--dsc-pagination-icon-size);
        -webkit-mask: center/contain no-repeat var(--dsc-pagination-icon-url);
        mask: center/contain no-repeat var(--dsc-pagination-icon-url);
        order: 1;
        width: var(--dsc-pagination-icon-size)
    }

    @media (forced-colors: active) {
        :is(.ds-pagination :is(ol,ul)) > li:first-child > :before, :is(.ds-pagination :is(ol,ul)) > li:last-child > :before {
            background: LinkText
        }
    }:is(.ds-pagination :is(ol,ul)) > li:first-child > :before {
         order: 0;
         rotate: 180deg
     }

    :dir(rtl) :is(.ds-pagination :is(ol,ul)) > li:first-child > :before {
        rotate: 0deg
    }

    :dir(rtl) :is(.ds-pagination :is(ol,ul)) > li:last-child > :before {
        rotate: 180deg
    }

    :is(.ds-pagination :is(ol,ul)) > li:empty:before {
        content: "\2026";
        display: block;
        min-width: var(--ds-size-12);
        text-align: center
    }
}

@layer ds.components {
    .ds-skeleton {
        --dsc-skeleton-animation-duration: 0.8s;
        --dsc-skeleton-animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
        --dsc-skeleton-background: var(--ds-color-neutral-surface-tinted);
        animation: var(--dsc-skeleton-animation);
        border-radius: var(--ds-border-radius-lg);
        box-sizing: border-box;
        height: 1.3em;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        width: 100%
    }

    .ds-skeleton:not([hidden]) {
        display: block
    }

    .ds-skeleton[data-variant=circle] {
        aspect-ratio: 1/1;
        border-radius: var(--ds-border-radius-full);
        width: 1.3em
    }

    .ds-skeleton[data-variant=text] {
        border-radius: var(--ds-border-radius-full);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        color: transparent;
        font-size: .8em;
        letter-spacing: .1em;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .ds-skeleton[data-variant=text]:not([hidden]) {
        display: inline
    }

    .ds-skeleton[data-variant=text]:empty:before {
        content: attr(data-text);
        word-break: break-word
    }

    .ds-skeleton:not(:empty) {
        color: transparent;
        height: -moz-fit-content;
        height: fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .ds-skeleton:not(:empty) > * {
        visibility: hidden
    }

    @media (prefers-reduced-motion: reduce) {
        .ds-skeleton {
            animation-duration: 1.6s
        }
    }@media (forced-colors: active) {
    .ds-skeleton {
        opacity: 0
    }
}@keyframes ds-skeleton-opacity-fade {
     0% {
         background: var(--dsc-skeleton-background)
     }
     to {
         background: rgb(from var(--dsc-skeleton-background) r g b/.4)
     }
 }
}

@layer ds.components {
    .ds-tag {
        --dsc-tag-background: var(--ds-color-surface-tinted);
        --dsc-tag-color: var(--ds-color-text-default);
        --dsc-tag-min-height: var(--ds-size-8);
        --dsc-tag-padding: 0 var(--ds-size-2);
        align-items: center;
        background: var(--dsc-tag-background);
        border-radius: var(--ds-border-radius-sm);
        box-sizing: border-box;
        color: var(--dsc-tag-color);
        height: -moz-fit-content;
        height: fit-content;
        line-height: var(--ds-line-height-sm);
        min-height: var(--dsc-tag-min-height);
        padding: var(--dsc-tag-padding);
        width: -moz-max-content;
        width: max-content;
        word-break: break-word
    }

    .ds-tag :where(img,svg) {
        flex-shrink: 0;
        font-size: 1.25em
    }

    .ds-tag:not([hidden]) {
        display: inline-flex
    }

    @media (forced-colors: active) {
        .ds-tag {
            border-color: CanvasText;
            border-style: solid;
            border-width: var(--ds-border-width-default)
        }
    }
}

@layer ds.components {
    .ds-error-summary {
        --dsc-errorsummary-background: var(--ds-color-danger-surface-tinted);
        --dsc-errorsummary-border-radius: var(--ds-border-radius-md);
        --dsc-errorsummary-padding: var(--ds-size-6) var(--ds-size-8);
        --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default);
        --dsc-errorsummary-heading-color: var(--ds-color-danger-text-default);
        background: var(--dsc-errorsummary-background);
        border-radius: var(--dsc-errorsummary-border-radius);
        box-sizing: border-box;
        padding: var(--dsc-errorsummary-padding)
    }

    .ds-error-summary:focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    .ds-error-summary:focus-visible * {
        --_ds--focus:
    }

    .ds-error-summary :is(h1,h2,h3,h4,h5,h6) {
        color: var(--dsc-errorsummary-heading-color);
        font-size: var(--ds-font-size-plus-1);
        margin-bottom: var(--ds-size-2)
    }

    .ds-error-summary a {
        color: var(--dsc-errorsummary-link-color)
    }

    .ds-error-summary li:last-of-type {
        margin-bottom: 0
    }

    .ds-togglegroup {
        --dsc-togglegroup-background: var(--ds-color-surface-default);
        --dsc-togglegroup-border-width: var(--ds-border-width-default);
        --dsc-togglegroup-border-style: solid;
        --dsc-togglegroup-border-color: var(--ds-color-neutral-border-default);
        --dsc-togglegroup-spacing: 0;
        --dsc-togglegroup-border-radius: var(--ds-border-radius-md);
        --dsc-togglegroup-button-size: var(--ds-size-12);
        background: var(--dsc-togglegroup-background);
        border-color: var(--dsc-togglegroup-border-color);
        border-radius: var(--dsc-togglegroup-border-radius);
        border-style: var(--dsc-togglegroup-border-style);
        border-width: var(--dsc-togglegroup-border-width);
        gap: var(--dsc-togglegroup-spacing);
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        height: -moz-fit-content;
        height: fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        overflow-x: auto;
        padding: var(--dsc-togglegroup-spacing);
        width: auto
    }

    .ds-togglegroup:not([hidden]) {
        display: grid
    }

    .ds-togglegroup button {
        border-radius: calc(var(--dsc-togglegroup-border-radius) - var(--dsc-togglegroup-spacing) / 2);
        min-height: var(--dsc-togglegroup-button-size);
        min-width: -moz-fit-content;
        min-width: fit-content
    }
}

@layer ds.components {
    :is(.ds-togglegroup button):focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow-inset));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus)) * -1)
    }

    :is(.ds-togglegroup button):focus-visible * {
        --_ds--focus:
    }

    :is(.ds-togglegroup button):focus-visible {
        border-radius: var(--dsc-togglegroup-border-radius)
    }

    [data-icon]:is(.ds-togglegroup button) {
        height: var(--dsc-togglegroup-button-size);
        width: var(--dsc-togglegroup-button-size)
    }

    @media (forced-colors: active) {
        [aria-checked=true]:is(.ds-togglegroup button) {
            background: ButtonText;
            color: initial
        }

        [aria-checked=true]:is(.ds-togglegroup button) svg {
            color: initial
        }
    }
}

@layer ds.components {
    .ds-tooltip {
        --dsc-tooltip-background: var(--ds-color-neutral-text-default);
        --dsc-tooltip-color: var(--ds-color-neutral-background-default);
        --dsc-tooltip-border-radius: var(--ds-border-radius-default);
        --dsc-tooltip-padding: var(--ds-size-1) var(--ds-size-2);
        --dsc-tooltip-arrow-size: var(--ds-size-2);
        --dsc-tooltip-transition-duration: 0.2s;
        --dsc-tooltip-transition-delay: 150ms;
        background: var(--dsc-tooltip-background);
        border: 0;
        border-radius: var(--dsc-tooltip-border-radius);
        box-sizing: border-box;
        color: var(--dsc-tooltip-color);
        inset: 0 auto auto 0;
        line-height: var(--ds-line-height-sm);
        margin: 0;
        opacity: 0;
        overflow: visible;
        padding: var(--dsc-tooltip-padding);
        position: fixed;
        transition-delay: var(--dsc-tooltip-transition-delay);
        transition-duration: var(--dsc-tooltip-transition-duration);
        transition-property: opacity, visibility;
        transition-timing-function: ease-in-out;
        visibility: hidden
    }

    .ds-tooltip:popover-open {
        opacity: 1;
        visibility: visible
    }

    .ds-tooltip .\:popover-open {
        opacity: 1;
        visibility: visible
    }

    .ds-tooltip:before {
        background: var(--dsc-tooltip-background);
        box-sizing: border-box;
        content: "";
        height: var(--dsc-tooltip-arrow-size);
        left: var(--dsc-tooltip-arrow-x, 50%);
        position: absolute;
        rotate: 45deg;
        top: var(--dsc-tooltip-arrow-y, 100%);
        translate: -50% -50%;
        width: var(--dsc-tooltip-arrow-size)
    }

    @media (forced-colors: active) {
        .ds-tooltip {
            background: CanvasText
        }
    }
}

@layer ds.components {
    .ds-spinner {
        --dsc-spinner-background: var(--ds-color-surface-tinted);
        --dsc-spinner-stroke: var(--ds-color-border-default);
        --dsc-spinner-animation-duration: 2s;
        animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);
        box-sizing: border-box;
        font-size: var(--ds-size-11);
        height: 1em;
        width: 1em
    }

    .ds-spinner[data-size="2xs"] {
        font-size: .75rem
    }

    .ds-spinner[data-size=xs] {
        font-size: 1.25rem
    }

    .ds-spinner[data-size=sm] {
        font-size: 2rem
    }

    .ds-spinner[data-size=md] {
        font-size: 2.75rem
    }

    .ds-spinner[data-size=lg] {
        font-size: 3.75rem
    }

    .ds-spinner[data-size=xl] {
        font-size: 5.5rem
    }

    .ds-spinner__background {
        stroke: var(--dsc-spinner-background)
    }

    .ds-spinner__circle {
        animation: ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration);
        stroke-dasharray: 1px, 200px;
        stroke: var(--dsc-spinner-stroke);
        transform-origin: center
    }

    @media (prefers-reduced-motion: reduce) {
        .ds-spinner {
            animation-duration: 6s
        }
    }@keyframes ds-spinner-rotate-animation {
         0% {
             transform: rotate(0deg)
         }
         to {
             transform: rotate(1turn)
         }
     }@keyframes ds-spinner-stroke-animation {
          0% {
              stroke-dasharray: 1px, 200px;
              stroke-dashoffset: 0
          }
          50% {
              stroke-dasharray: 100px, 200px;
              stroke-dashoffset: -15px
          }
          to {
              stroke-dasharray: 1px, 200px;
              stroke-dashoffset: -120px
          }
      }
}

@layer ds.components {
    .ds-table {
        --dsc-table-background--hover: var(--ds-color-surface-hover);
        --dsc-table-background--zebra: var(--ds-color-surface-tinted);
        --dsc-table-background: transparent;
        --dsc-table-border-color: var(--ds-color-border-subtle);
        --dsc-table-border-radius: var(--ds-border-radius-md);
        --dsc-table-border-style: solid;
        --dsc-table-border-width: var(--ds-border-width-default);
        --dsc-table-color: var(--ds-color-text-default);
        --dsc-table-divider-border-color: var(--dsc-table-border-color);
        --dsc-table-divider-border-style: solid;
        --dsc-table-divider-border-width: calc(var(--ds-border-width-default) + 1px);
        --dsc-table-header-background--hover: var(--ds-color-surface-hover);
        --dsc-table-header-background--sorted: var(--ds-color-surface-tinted);
        --dsc-table-header-background--sticky: var(--ds-color-surface-default);
        --dsc-table-header-background: transparent;
        --dsc-table-padding: var(--ds-size-2) var(--ds-size-3);
        --dsc-table-sort-size: var(--ds-size-6);
        border-collapse: initial;
        border-spacing: 0;
        box-sizing: border-box;
        color: var(--dsc-table-color);
        width: 100%
    }

    .ds-table > :is(tbody,thead,tfoot) > tr > :is(th,td) {
        background: var(--dsc-table-background);
        border-bottom-style: var(--dsc-table-border-style);
        border-bottom-width: var(--dsc-table-border-width);
        border-color: var(--dsc-table-border-color);
        padding: var(--dsc-table-padding);
        text-align: inherit
    }

    .ds-table th {
        font-weight: var(--ds-font-weight-semibold)
    }

    .ds-table > thead > tr > :is(th,td) {
        background: var(--dsc-table-header-background)
    }

    .ds-table > thead > tr:last-child > :is(th,td) {
        border-bottom: var(--dsc-table-divider-border-width) var(--dsc-table-divider-border-style) var(--dsc-table-divider-border-color)
    }

    .ds-table > tbody:has(+tfoot) > tr:last-child > :is(th,td) {
        border-bottom: none
    }

    .ds-table > tfoot > tr:first-child > :is(th,td) {
        background: var(--dsc-table-header-background);
        border-top: var(--dsc-table-divider-border-width) var(--dsc-table-divider-border-style) var(--dsc-table-divider-border-color)
    }

    .ds-table > tfoot > tr:last-child > :is(th,td) {
        border-bottom: none
    }

    :is(.ds-table>caption) {
        font-size: 1.3em;
        font-size: round(down, 1.3em, .0625rem);
        font-weight: var(--ds-heading-md-font-weight);
        letter-spacing: var(--ds-heading-md-letter-spacing);
        line-height: var(--ds-heading-md-line-height);
        margin: 0
    }

    [data-size="2xs"]:is(.ds-table>caption) {
        font-size: var(--ds-heading-2xs-font-size);
        font-weight: var(--ds-heading-2xs-font-weight);
        letter-spacing: var(--ds-heading-2xs-letter-spacing);
        line-height: var(--ds-heading-2xs-line-height)
    }

    [data-size=xs]:is(.ds-table>caption) {
        font-size: var(--ds-heading-xs-font-size);
        font-weight: var(--ds-heading-xs-font-weight);
        letter-spacing: var(--ds-heading-xs-letter-spacing);
        line-height: var(--ds-heading-xs-line-height)
    }

    [data-size=sm]:is(.ds-table>caption) {
        font-size: var(--ds-heading-sm-font-size);
        font-weight: var(--ds-heading-sm-font-weight);
        letter-spacing: var(--ds-heading-sm-letter-spacing);
        line-height: var(--ds-heading-sm-line-height)
    }

    [data-size=md]:is(.ds-table>caption) {
        font-size: var(--ds-heading-md-font-size)
    }

    [data-size=lg]:is(.ds-table>caption) {
        font-size: var(--ds-heading-lg-font-size);
        font-weight: var(--ds-heading-lg-font-weight);
        letter-spacing: var(--ds-heading-lg-letter-spacing);
        line-height: var(--ds-heading-lg-line-height)
    }

    [data-size=xl]:is(.ds-table>caption) {
        font-size: var(--ds-heading-xl-font-size);
        font-weight: var(--ds-heading-xl-font-weight);
        letter-spacing: var(--ds-heading-xl-letter-spacing);
        line-height: var(--ds-heading-xl-line-height)
    }

    [data-size="2xl"]:is(.ds-table>caption) {
        font-size: var(--ds-heading-2xl-font-size);
        font-weight: var(--ds-heading-2xl-font-weight);
        letter-spacing: var(--ds-heading-2xl-letter-spacing);
        line-height: var(--ds-heading-2xl-line-height)
    }

    .ds-table > caption {
        margin-bottom: var(--ds-size-1);
        text-align: inherit
    }

    .ds-table > thead > tr > [aria-sort] {
        cursor: pointer;
        padding: 0
    }

    :is(.ds-table>thead>tr>[aria-sort]) > button {
        background: none;
        border: 0;
        box-sizing: border-box;
        color: inherit;
        cursor: pointer;
        font: inherit;
        padding: var(--dsc-table-padding);
        text-align: inherit;
        width: 100%
    }

    :is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible {
        box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
        outline: var(--_ds--focus, var(--dsc-focus-outline));
        outline-offset: var(--_ds--focus, var(--ds-border-width-focus))
    }

    :is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible * {
        --_ds--focus:
    }

    :is(:is(.ds-table>thead>tr>[aria-sort])>button):not([hidden]) {
        display: block
    }

    :is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible {
        position: relative
    }

    :is(:is(.ds-table>thead>tr>[aria-sort])>button):after {
        background: currentcolor;
        content: "";
        display: inline-block;
        height: var(--dsc-table-sort-size);
        -webkit-mask: center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");
        mask: center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");
        vertical-align: middle;
        width: var(--dsc-table-sort-size)
    }

    [aria-sort=ascending]:is(.ds-table>thead>tr>[aria-sort]) > button:after {
        -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E");
        mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E")
    }

    [aria-sort=descending]:is(.ds-table>thead>tr>[aria-sort]) > button:after {
        -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
        mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
    }

    :is(.ds-table>thead>tr>[aria-sort]):not([aria-sort=none]) > button {
        background: var(--dsc-table-header-background--sorted)
    }

    .ds-table[data-border] {
        border-color: var(--dsc-table-border-color);
        border-radius: var(--dsc-table-border-radius);
        border-style: var(--dsc-table-border-style);
        border-width: var(--dsc-table-border-width)
    }

    .ds-table[data-border] > :last-child > tr:last-child > :is(th,td) {
        border-bottom: none
    }

    :is(.ds-table[data-border]>:is(thead:first-of-type,:not(:has(thead)) tbody:first-of-type)>tr:first-child>:is(th,td)):first-child {
        border-top-left-radius: var(--dsc-table-border-radius)
    }

    :is(.ds-table[data-border]>:is(thead:first-of-type,:not(:has(thead)) tbody:first-of-type)>tr:first-child>:is(th,td)):last-child {
        border-top-right-radius: var(--dsc-table-border-radius)
    }

    :is(.ds-table[data-border]>:is(tfoot:last-of-type,:not(:has(tfoot)) tbody:last-of-type)>tr:last-child>:is(th,td)):first-child {
        border-bottom-left-radius: var(--dsc-table-border-radius)
    }

    :is(.ds-table[data-border]>:is(tfoot:last-of-type,:not(:has(tfoot)) tbody:last-of-type)>tr:last-child>:is(th,td)):last-child {
        border-bottom-right-radius: var(--dsc-table-border-radius)
    }

    .ds-table[data-sticky-header] {
        overflow: auto;
        position: relative
    }

    .ds-table[data-sticky-header] > thead > tr > :is(th,td) {
        background: var(--dsc-table-header-background--sticky);
        position: sticky;
        top: 0;
        z-index: 2
    }

    .ds-table[data-zebra] > tbody > tr > :is(th,td) {
        border-block: 0
    }

    .ds-table[data-zebra] > :is(thead,tbody) > tr:nth-child(2n) > :is(th,td) {
        background: var(--dsc-table-background--zebra)
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-table[data-hover] > tbody > tr:hover > :is(th,td) {
            background: var(--dsc-table-background--hover)
        }

        .ds-table > thead > tr > [aria-sort]:hover button {
            background: var(--dsc-table-header-background--hover)
        }
    }
}

@layer ds.components {
    .ds-breadcrumbs {
        --dsc-breadcrumbs-spacing: var(--ds-size-2);
        --dsc-breadcrumbs-icon-size: var(--ds-size-6);
        --dsc-breadcrumbs-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
        --dsc-breadcrumbs-color: var(--ds-color-text-subtle)
    }

    .ds-breadcrumbs > :is(ol,ul) {
        flex-wrap: wrap;
        gap: var(--dsc-breadcrumbs-spacing) 0;
        list-style-type: none;
        margin: 0;
        padding: 0
    }

    :is(.ds-breadcrumbs>:is(ol,ul)):not([hidden]) {
        display: flex
    }

    .ds-breadcrumbs a[aria-current=page] {
        text-decoration: none
    }

    .ds-breadcrumbs li:where(:not(:last-child)):after, .ds-breadcrumbs > :not(ol,ul):before {
        background: var(--dsc-breadcrumbs-color);
        content: "";
        display: inline-block;
        flex-shrink: 0;
        height: var(--dsc-breadcrumbs-icon-size);
        margin-inline: var(--dsc-breadcrumbs-spacing);
        -webkit-mask: center/contain no-repeat var(--dsc-breadcrumbs-icon-url);
        mask: center/contain no-repeat var(--dsc-breadcrumbs-icon-url);
        vertical-align: middle;
        width: var(--dsc-breadcrumbs-icon-size)
    }

    @media (forced-colors: active) {
        .ds-breadcrumbs li:where(:not(:last-child)):after, .ds-breadcrumbs > :not(ol,ul):before {
            background: CanvasText
        }
    }:dir(rtl) .ds-breadcrumbs li:where(:not(:last-child)):after {
         rotate: 180deg
     }

    .ds-breadcrumbs > :not(ol,ul):before {
        background: currentColor;
        margin: 0;
        rotate: 180deg
    }

    :dir(rtl) .ds-breadcrumbs > :not(ol,ul):before {
        rotate: 0deg
    }

    @media (width < 650px) {
        .ds-breadcrumbs > :is(ol,ul):not(:only-child) {
            display: none
        }
    }@media (min-width: 650px) {
    .ds-breadcrumbs > :is(:not(ol,ul)):not(:only-child) {
        display: none
    }
}
}

@layer ds.components {
    .ds-badge {
        --dsc-badge-background: var(--ds-color-base-default);
        --dsc-badge-color: var(--ds-color-base-contrast-default);
        --dsc-badge-padding: 0 calc(var(--ds-size-1) + var(--ds-size-1) / 2);
        --dsc-badge-size: calc(var(--ds-size-3) + var(--ds-size-1) / 2)
    }

    .ds-badge:before {
        background: var(--dsc-badge-background);
        border-radius: var(--ds-border-radius-full);
        box-sizing: border-box;
        color: var(--dsc-badge-color);
        content: attr(data-count);
        display: inline-grid;
        font-size: var(--ds-font-size-minus-1);
        line-height: var(--ds-line-height-sm);
        min-height: var(--dsc-badge-size);
        min-width: var(--dsc-badge-size);
        padding: var(--dsc-badge-padding);
        place-items: center;
        width: -moz-fit-content;
        width: fit-content
    }

    @supports (content:attr(data-count,"")) {
        .ds-badge:before {
            content: attr(data-count, "")
        }
    }.ds-badge[data-variant=base] {
         --dsc-badge-background: var(--ds-color-base-default);
         --dsc-badge-color: var(--ds-color-base-contrast-default)
     }

    .ds-badge[data-variant=tinted] {
        --dsc-badge-background: var(--ds-color-surface-tinted);
        --dsc-badge-color: var(--ds-color-text-default)
    }

    .ds-badge--position {
        box-sizing: border-box;
        height: -moz-fit-content;
        height: fit-content;
        position: relative;
        width: -moz-fit-content;
        width: fit-content
    }

    .ds-badge--position:not([hidden]) {
        display: inline-flex
    }

    .ds-badge--position .ds-badge:before {
        position: absolute
    }

    .ds-badge--position :where(img,svg) {
        flex-shrink: 0;
        font-size: 1.25em
    }

    .ds-badge--position[data-placement=top-right] .ds-badge:before {
        right: 0;
        top: 0;
        translate: 50% -50%
    }

    .ds-badge--position[data-placement=top-left] .ds-badge:before {
        left: 0;
        top: 0;
        translate: -50% -50%
    }

    .ds-badge--position[data-placement=bottom-right] .ds-badge:before {
        bottom: 0;
        right: 0;
        translate: 50% 50%
    }

    .ds-badge--position[data-placement=bottom-left] .ds-badge:before {
        bottom: 0;
        left: 0;
        translate: -50% 50%
    }

    .ds-badge--position[data-placement=top-right][data-overlap=circle] .ds-badge:before {
        right: 14%;
        top: 14%;
        translate: 50% -50%
    }

    .ds-badge--position[data-placement=top-left][data-overlap=circle] .ds-badge:before {
        left: 14%;
        top: 14%;
        translate: -50% -50%
    }

    .ds-badge--position[data-placement=bottom-right][data-overlap=circle] .ds-badge:before {
        bottom: 14%;
        right: 14%;
        translate: 50% 50%
    }

    .ds-badge--position[data-placement=bottom-left][data-overlap=circle] .ds-badge:before {
        bottom: 14%;
        left: 14%;
        translate: -50% 50%
    }

    .ds-avatar {
        --dsc-avatar-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E");
        --dsc-avatar-background: var(--ds-color-base-default);
        --dsc-avatar-color: var(--ds-color-base-contrast-default);
        --dsc-avatar-size: var(--ds-size-12);
        --dsc-avatar-padding: var(--ds-size-2);
        align-items: center;
        background: var(--dsc-avatar-background);
        border-radius: var(--ds-border-radius-full);
        box-sizing: border-box;
        color: var(--dsc-avatar-color);
        flex-shrink: 0;
        font-weight: var(--ds-font-weight-medium);
        height: var(--dsc-avatar-size);
        justify-content: center;
        overflow: hidden;
        text-decoration: none;
        text-transform: uppercase;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        width: var(--dsc-avatar-size)
    }

    .ds-avatar:not([hidden]) {
        display: inline-flex
    }
}

@layer ds.components {
    .ds-avatar:not(:has(img)) {
        padding: var(--dsc-avatar-padding)
    }

    .ds-avatar img, .ds-avatar svg {
        height: 100%;
        object-fit: cover;
        width: 100%
    }

    .ds-avatar[data-initials]:empty:before {
        content: attr(data-initials);
        font-size: round(down, 1.3em, .0625rem)
    }

    .ds-avatar:not([data-initials]):empty:before {
        background: currentcolor;
        content: "";
        height: 100%;
        -webkit-mask: var(--dsc-avatar-icon-url) center /contain no-repeat;
        mask: var(--dsc-avatar-icon-url) center /contain no-repeat;
        width: 100%
    }

    @media (forced-colors: active) {
        .ds-avatar:not([data-initials]):empty:before {
            background: CanvasText
        }
    }.ds-avatar[data-variant=square] {
         border-radius: var(--ds-border-radius-sm)
     }

    @media (forced-colors: active) {
        .ds-avatar {
            border-color: CanvasText;
            border-style: solid;
            border-width: var(--ds-size-1)
        }
    }
}

@layer ds.components {
    .ds-suggestion {
        --dsc-suggestion-option-background--selected: var(--ds-color-surface-tinted);
        --dsc-suggestion-option-border-color: var(--ds-color-base-default);
        --dsc-suggestion-clear-gap: var(--ds-size-2);
        --dsc-suggestion-clear-padding: var(--ds-size-1);
        --dsc-suggestion-clear-size: var(--ds-size-9);
        --dsc-suggestion-clear-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
        --dsc-suggestion-option-checkmark-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M18.998 6.94a.75.75 0 0 1 .063 1.058l-8 9a.75.75 0 0 1-1.091.032l-5-5a.75.75 0 1 1 1.06-1.06l4.438 4.437 7.471-8.405A.75.75 0 0 1 19 6.939' clip-rule='evenodd'/%3E%3C/svg%3E");
        --dsc-suggestion-option-checkmark-size: var(--ds-size-7);
        --dsc-suggestion-list-gap: var(--ds-size-2);
        --dsc-suggestion-border-width: var(--ds-border-width-default);
        --dsc-suggestion-border-style: solid;
        --dsc-suggestion-border-color: var(--ds-color-neutral-border-default);
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: var(--ds-size-1);
        position: relative
    }

    .ds-suggestion:not([hidden]) {
        display: flex
    }

    .ds-suggestion u-datalist {
        background: var(--ds-color-neutral-surface-default);
        border-color: var(--dsc-suggestion-border-color);
        border-radius: var(--ds-border-radius-md);
        border-style: var(--dsc-suggestion-border-style);
        border-width: var(--dsc-suggestion-border-width);
        box-shadow: var(--ds-shadow-md);
        box-sizing: border-box;
        color: var(--ds-color-neutral-text-default);
        inset: 100% 0 auto 0;
        margin-top: var(--dsc-suggestion-list-gap);
        max-height: 200px;
        overflow-y: auto;
        position: absolute;
        z-index: 1600
    }

    :is(.ds-suggestion u-datalist):has(u-option:not([hidden]):not([aria-disabled=true]):not([data-empty])) > u-option[data-empty] {
        display: none
    }

    :is(.ds-suggestion u-datalist) > u-option[data-empty] {
        cursor: default;
        display: block
    }

    :is(.ds-suggestion u-datalist):not(:has(u-option:hover)) > u-option:focus-visible {
        background: var(--dsc-suggestion-option-background--selected);
        border-inline-start-color: var(--dsc-suggestion-option-border-color);
        color: var(--ds-color-text-default)
    }

    :is(.ds-suggestion u-datalist):empty {
        display: none
    }

    :is(.ds-suggestion u-datalist) > * {
        font-family: inherit;
        padding: var(--ds-size-2) var(--ds-size-3)
    }

    :is(.ds-suggestion u-datalist) > :is(u-option) {
        border: none;
        border-inline-start: 5px solid transparent;
        border-radius: var(--ds-border-radius-sm);
        cursor: pointer;
        outline: none;
        padding-inline-start: var(--dsc-suggestion-option-checkmark-size);
        position: relative
    }

    [selected]:is(:is(.ds-suggestion u-datalist)>:is(u-option)):before {
        background: currentcolor;
        content: "";
        height: var(--dsc-suggestion-option-checkmark-size);
        inset-inline-start: 0;
        -webkit-mask: var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat;
        mask: var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat;
        position: absolute;
        width: var(--dsc-suggestion-option-checkmark-size)
    }

    @media (hover: hover) and (pointer: fine) {
        :is(:is(.ds-suggestion u-datalist)>:is(u-option)):not([data-empty]):hover {
            background: var(--dsc-suggestion-option-background--selected);
            border-inline-start-color: var(--dsc-suggestion-option-border-color)
        }
    }.ds-suggestion:has(input:-moz-placeholder) input {
         background-image: linear-gradient(45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
         background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em);
         background-repeat: no-repeat;
         background-size: .4em .4em;
         padding-inline-end: 2.4em
     }

    .ds-suggestion:has(input:placeholder-shown) input {
        background-image: linear-gradient(45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
        background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em);
        background-repeat: no-repeat;
        background-size: .4em .4em;
        padding-inline-end: 2.4em
    }

    :dir(rtl) :is(.ds-suggestion:has(input:-moz-placeholder) input) {
        background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em
    }

    :dir(rtl) :is(.ds-suggestion:has(input:placeholder-shown) input) {
        background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em
    }

    @media (forced-colors: active) {
        .ds-suggestion:has(input:-moz-placeholder) input {
            -moz-appearance: auto;
            appearance: auto
        }

        .ds-suggestion:has(input:placeholder-shown) input {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto
        }
    }.ds-suggestion:has(input:-moz-placeholder) button[type=reset] {
         visibility: hidden
     }

    .ds-suggestion:has(input:is(:-moz-read-only,:disabled,[aria-disabled=true])) button[type=reset] {
        visibility: hidden
    }

    .ds-suggestion:has(input:is(:read-only,:disabled,[aria-disabled=true])) button[type=reset], .ds-suggestion:has(input:placeholder-shown) button[type=reset] {
        visibility: hidden
    }

    .ds-suggestion:has(button[type=reset]) input {
        padding-inline-end: calc(var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap))
    }

    .ds-suggestion button[type=reset] {
        --dsc-button-size: var(--dsc-suggestion-clear-size);
        align-self: center;
        margin-inline-start: calc((var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap)) * -1);
        order: 999;
        padding: var(--dsc-suggestion-clear-padding);
        position: relative;
        scale: .75;
        z-index: 2
    }

    :is(.ds-suggestion button[type=reset]):before {
        background: currentcolor;
        content: "";
        height: var(--dsc-suggestion-clear-size);
        -webkit-mask: var(--dsc-suggestion-clear-icon-url) center /contain no-repeat;
        mask: var(--dsc-suggestion-clear-icon-url) center /contain no-repeat;
        width: var(--dsc-suggestion-clear-size)
    }
}

@layer ds.components {
    .ds-multi-suggestion {
        --dsc-multi-select-option-background--selected: var(--ds-color-surface-tinted);
        --dsc-multi-select-option-border-color: var(--ds-color-base-default);
        --dsc-multi-select-clear-gap: var(--ds-size-2);
        --dsc-multi-select-clear-padding: var(--ds-size-1);
        --dsc-multi-select-clear-size: var(--ds-size-9);
        --dsc-multi-select-clear-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
        --dsc-multi-select-option-checkmark-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M18.998 6.94a.75.75 0 0 1 .063 1.058l-8 9a.75.75 0 0 1-1.091.032l-5-5a.75.75 0 1 1 1.06-1.06l4.438 4.437 7.471-8.405A.75.75 0 0 1 19 6.939' clip-rule='evenodd'/%3E%3C/svg%3E");
        --dsc-multi-select-option-checkmark-size: var(--ds-size-7);
        --dsc-multi-select-list-gap: var(--ds-size-2);
        --dsc-multi-select-border-width: 1px;
        --dsc-multi-select-border-style: solid;
        --dsc-multi-select-border-color: var(--ds-color-neutral-border-default);
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: var(--ds-size-1);
        position: relative
    }

    .ds-multi-suggestion:not([hidden]) {
        display: flex
    }

    .ds-multi-suggestion > data {
        margin-bottom: var(--ds-size-1)
    }

    :is(.ds-multi-suggestion>data):has(+data) {
        margin-inline-end: var(--ds-size-1)
    }

    .ds-multi-suggestion u-datalist {
        background: var(--ds-color-neutral-surface-default);
        border-color: var(--dsc-multi-select-border-color);
        border-radius: var(--ds-border-radius-md);
        border-style: var(--dsc-multi-select-border-style);
        border-width: var(--dsc-multi-select-border-width);
        box-shadow: var(--ds-shadow-md);
        box-sizing: border-box;
        color: var(--ds-color-neutral-text-default);
        inset: 100% 0 auto 0;
        margin-top: var(--dsc-multi-select-list-gap);
        max-height: 200px;
        overflow-y: auto;
        position: absolute;
        z-index: 1600
    }

    :is(.ds-multi-suggestion u-datalist):has(u-option:not([hidden]):not([aria-disabled=true]):not([data-empty])) > u-option[data-empty] {
        display: none
    }

    :is(.ds-multi-suggestion u-datalist) > u-option[data-empty] {
        cursor: default;
        display: block
    }

    :is(.ds-multi-suggestion u-datalist):not(:has(u-option:hover)) > u-option:focus-visible {
        background: var(--dsc-multi-select-option-background--selected);
        border-inline-start-color: var(--dsc-multi-select-option-border-color);
        color: var(--ds-color-text-default)
    }

    :is(.ds-multi-suggestion u-datalist):empty {
        display: none
    }

    :is(.ds-multi-suggestion u-datalist) > * {
        font-family: inherit;
        padding: var(--ds-size-2) var(--ds-size-3)
    }

    :is(.ds-multi-suggestion u-datalist) > :is(u-option) {
        border: none;
        border-inline-start: 5px solid transparent;
        border-radius: var(--ds-border-radius-sm);
        cursor: pointer;
        outline: none;
        padding-inline-start: var(--dsc-multi-select-option-checkmark-size);
        position: relative
    }

    [selected]:is(:is(.ds-multi-suggestion u-datalist)>:is(u-option)):before {
        background: currentcolor;
        content: "";
        height: var(--dsc-multi-select-option-checkmark-size);
        inset-inline-start: 0;
        -webkit-mask: var(--dsc-multi-select-option-checkmark-url) center /contain no-repeat;
        mask: var(--dsc-multi-select-option-checkmark-url) center /contain no-repeat;
        position: absolute;
        width: var(--dsc-multi-select-option-checkmark-size)
    }

    @media (hover: hover) and (pointer: fine) {
        :is(:is(.ds-multi-suggestion u-datalist)>:is(u-option)):not([data-empty]):hover {
            background: var(--dsc-multi-select-option-background--selected);
            border-inline-start-color: var(--dsc-multi-select-option-border-color)
        }
    }.ds-multi-suggestion:has(input:-moz-placeholder) input {
         background-image: linear-gradient(45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
         background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em);
         background-repeat: no-repeat;
         background-size: .4em .4em;
         padding-inline-end: 2.4em
     }

    .ds-multi-suggestion:has(input:placeholder-shown) input {
        background-image: linear-gradient(45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4));
        background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em);
        background-repeat: no-repeat;
        background-size: .4em .4em;
        padding-inline-end: 2.4em
    }

    :dir(rtl) :is(.ds-multi-suggestion:has(input:-moz-placeholder) input) {
        background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em
    }

    :dir(rtl) :is(.ds-multi-suggestion:has(input:placeholder-shown) input) {
        background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em
    }

    @media (forced-colors: active) {
        .ds-multi-suggestion:has(input:-moz-placeholder) input {
            -moz-appearance: auto;
            appearance: auto
        }

        .ds-multi-suggestion:has(input:placeholder-shown) input {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto
        }
    }.ds-multi-suggestion:has(input:-moz-placeholder) button[type=reset] {
         visibility: hidden
     }

    .ds-multi-suggestion:has(input:is(:-moz-read-only,:disabled,[aria-disabled=true])) button[type=reset] {
        visibility: hidden
    }

    .ds-multi-suggestion:has(input:is(:read-only,:disabled,[aria-disabled=true])) button[type=reset], .ds-multi-suggestion:has(input:placeholder-shown) button[type=reset] {
        visibility: hidden
    }

    .ds-multi-suggestion:has(button[type=reset]) input {
        padding-inline-end: calc(var(--dsc-multi-select-clear-size) + var(--dsc-multi-select-clear-gap))
    }

    .ds-multi-suggestion button[type=reset] {
        --dsc-button-size: var(--dsc-multi-select-clear-size);
        align-self: center;
        margin-inline-start: calc((var(--dsc-multi-select-clear-size) + var(--dsc-multi-select-clear-gap)) * -1);
        order: 999;
        padding: var(--dsc-multi-select-clear-padding);
        position: relative;
        scale: .75;
        z-index: 2
    }

    :is(.ds-multi-suggestion button[type=reset]):before {
        background: currentcolor;
        content: "";
        height: var(--dsc-multi-select-clear-size);
        -webkit-mask: var(--dsc-multi-select-clear-icon-url) center /contain no-repeat;
        mask: var(--dsc-multi-select-clear-icon-url) center /contain no-repeat;
        width: var(--dsc-multi-select-clear-size)
    }
}

@layer ds.components {
    .ds-textfield {
        display: grid;
        gap: var(--ds-size-2)
    }

    .ds-textfield__adornment {
        background: var(--ds-color-neutral-surface-tinted);
        border-radius: var(--ds-border-radius-md);
        color: var(--ds-color-neutral-text-subtle);
        display: inline-block;
        padding: 9px var(--ds-size-4)
    }

    .ds-textfield__adornment, .ds-textfield__input {
        border: 1px solid var(--ds-color-neutral-border-default);
        box-sizing: border-box
    }

    .ds-textfield__input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--ds-color-neutral-surface-default);
        border-radius: var(--ds-border-radius-md);
        color: var(--ds-color-neutral-text-default);
        flex: 0 1 auto;
        font-family: inherit;
        padding: 0 var(--ds-size-3);
        position: relative;
        width: 100%
    }

    .ds-textfield__input:disabled {
        cursor: not-allowed
    }

    .ds-textfield--readonly .ds-textfield__input {
        background: var(--ds-color-neutral-surface-tinted);
        border-color: var(--ds-color-neutral-border-strong)
    }

    .ds-textfield__field {
        align-items: stretch;
        border-radius: var(--ds-border-radius-md);
        display: flex
    }

    .ds-textfield__field > :first-child {
        border-bottom-left-radius: var(--ds-border-radius-md);
        border-top-left-radius: var(--ds-border-radius-md)
    }

    .ds-textfield__field > :last-child {
        border-bottom-right-radius: var(--ds-border-radius-md);
        border-top-right-radius: var(--ds-border-radius-md)
    }

    .ds-textfield--sm .ds-textfield__adornment {
        padding: var(--ds-size-2) var(--ds-size-3)
    }

    .ds-textfield--md .ds-textfield__adornment {
        padding: .65rem var(--ds-size-4)
    }

    .ds-textfield--lg .ds-textfield__adornment {
        padding: .85rem var(--ds-size-5)
    }

    .ds-textfield--sm .ds-textfield__field {
        height: var(--ds-size-10)
    }

    .ds-textfield--md .ds-textfield__field {
        height: var(--ds-size-12)
    }

    .ds-textfield--lg .ds-textfield__field {
        height: var(--ds-size-14)
    }

    .ds-textfield--sm .ds-textfield__input {
        padding: 0 var(--ds-size-2)
    }

    .ds-textfield--md .ds-textfield__input {
        padding: 0 var(--ds-size-3)
    }

    .ds-textfield--lg .ds-textfield__input {
        padding: 0 var(--ds-size-4)
    }

    .ds-textfield__label {
        align-items: center;
        display: inline-flex;
        flex-direction: row;
        gap: var(--ds-size-1);
        min-width: -moz-min-content;
        min-width: min-content
    }

    .ds-textfield__description {
        color: var(--ds-color-neutral-text-subtle);
        margin-top: calc(var(--ds-size-2) * -1)
    }

    .ds-textfield:has(.ds-textfield__input:disabled) {
        opacity: var(--ds-opacity-disabled)
    }

    .ds-textfield--error .ds-textfield__input:not(:focus-visible) {
        border-color: var(--ds-color-danger-border-default);
        box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default)
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover {
            border-color: var(--ds-color-border-strong);
            box-shadow: inset 0 0 0 1px var(--ds-color-border-strong)
        }
    }.ds-textfield__input--with-prefix {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0
     }

    .ds-textfield__input--with-suffix {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0
    }

    .ds-textfield__prefix {
        border-bottom-right-radius: 0;
        border-right: 0;
        border-top-right-radius: 0;
        white-space: nowrap
    }

    .ds-textfield__suffix {
        border-bottom-left-radius: 0;
        border-left: 0;
        border-top-left-radius: 0;
        white-space: nowrap
    }

    .ds-textfield__readonly__icon {
        height: 1.2em;
        width: 1.2em
    }

    .ds-textfield__error-message:empty {
        display: none
    }

    .ds-combobox {
        background-color: initial;
        display: grid;
        gap: var(--ds-size-2)
    }

    .ds-combobox [data-floating-ui-portal] {
        grid-column: 1/2;
        grid-row: 1/2
    }

    .ds-combobox__options-wrapper {
        background: var(--ds-color-neutral-surface-default);
        border: 1px solid var(--ds-color-neutral-border-default);
        border-radius: var(--ds-border-radius-md);
        box-shadow: var(--ds-shadow-md);
        color: var(--ds-color-neutral-text-default);
        overflow-y: auto;
        padding: var(--ds-size-2);
        z-index: 1600
    }

    .ds-combobox--readonly .ds-combobox__input {
        pointer-events: none
    }

    .ds-combobox__input__wrapper {
        align-items: center;
        border-radius: var(--ds-border-radius-md);
        cursor: text;
        display: flex;
        gap: var(--ds-size-1);
        height: auto;
        justify-content: space-between;
        padding: var(--ds-size-2);
        position: relative;
        width: 100%
    }

    .ds-combobox__input__wrapper .ds-combobox__input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: initial;
        border: none;
        box-sizing: border-box;
        color: var(--ds-color-neutral-text-default);
        flex-grow: 1;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        height: 100%;
        line-height: inherit;
        min-width: 50px;
        width: 100%
    }

    .ds-combobox--sm .ds-combobox__input__wrapper {
        min-height: var(--ds-size-10);
        padding: 5px var(--ds-size-2)
    }

    .ds-combobox--md .ds-combobox__input__wrapper {
        min-height: var(--ds-size-12);
        padding: 7px var(--ds-size-3)
    }

    .ds-combobox--lg .ds-combobox__input__wrapper {
        min-height: var(--ds-size-14);
        padding: 7px var(--ds-size-4)
    }

    .ds-combobox__input__wrapper .ds-combobox__input:focus {
        outline: none
    }

    .ds-combobox__input__wrapper.ds-combobox--error {
        border-color: var(--ds-color-danger-border-default);
        border-width: 2px
    }

    .ds-combobox__chip-and-input {
        align-items: center;
        background-color: initial;
        display: flex;
        flex-wrap: wrap;
        gap: var(--ds-size-2);
        width: 100%
    }

    .ds-combobox__arrow {
        cursor: pointer;
        display: grid;
        place-items: center
    }

    .ds-combobox__input__wrapper.ds-combobox--readonly {
        background: var(--ds-color-base-default);
        border-color: var(--ds-color-base-default)
    }

    .ds-combobox__label {
        align-items: center;
        display: inline-flex;
        flex-direction: row;
        gap: var(--ds-size-1);
        grid-column: 1/2;
        grid-row: 1/2;
        min-width: -moz-min-content;
        min-width: min-content
    }

    .ds-combobox__description {
        color: var(--ds-color-neutral-text-subtle);
        margin-top: calc(var(--ds-size-2) * -1)
    }

    .ds-combobox__clear-button {
        aspect-ratio: 1;
        background-color: initial;
        border: none;
        border-radius: var(--ds-border-radius-sm);
        color: var(--ds-color-neutral-text-default);
        cursor: pointer;
        display: grid;
        height: 29px;
        padding: 0;
        place-items: center;
        width: 29px
    }

    .ds-combobox--sm .ds-combobox__clear-button {
        height: 25px;
        width: 25px
    }

    .ds-combobox--md .ds-combobox__clear-button {
        height: 29px;
        width: 29px
    }

    .ds-combobox--lg .ds-combobox__clear-button {
        height: 31px;
        width: 31px
    }

    .ds-combobox__clear-button:not(:disabled):hover {
        background-color: var(--ds-color-neutral-surface-tinted)
    }

    .ds-combobox__disabled {
        opacity: var(--ds-opacity-disabled)
    }

    .ds-combobox__disabled * {
        cursor: not-allowed
    }

    .ds-combobox__readonly__icon {
        height: 1.2em;
        width: 1.2em
    }

    .ds-combobox__error-message {
        margin-top: var(--ds-size-2)
    }

    .ds-combobox__error-message:empty {
        display: none
    }

    .ds-combobox__loading {
        align-content: center;
        display: flex;
        gap: var(--ds-size-2)
    }

    .ds-combobox__input__wrapper:has(input:focus) {
        --dsc-focus-border-width: 3px;
        box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
        outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
        outline-offset: var(--dsc-focus-border-width)
    }

    .ds-combobox__input__wrapper:focus-within:hover {
        border-color: var(--ds-color-neutral-border-default)
    }

    .ds-combobox__custom, .ds-combobox__empty, .ds-combobox__option {
        font-weight: 400;
        padding: var(--ds-size-2) var(--ds-size-3)
    }

    .ds-combobox__option {
        background: none;
        border: none;
        border-left: 5px solid transparent;
        border-radius: var(--ds-border-radius-sm);
        cursor: pointer;
        display: grid;
        font-family: inherit;
        grid-template-columns:1.2em 1fr;
        height: auto;
        justify-content: start;
        padding-left: var(--ds-size-1);
        text-align: left;
        width: 100%
    }

    .ds-combobox__option.ds-combobox__option--active {
        background: var(--ds-color-surface-tinted);
        border-left: 5px solid var(--ds-color-base-default)
    }

    .ds-combobox__option > div {
        align-self: flex-start
    }

    .ds-combobox__option.ds-combobox__option--multiple {
        gap: var(--ds-size-2);
        grid-template-columns:auto 1fr
    }

    .ds-combobox__option__label {
        color: var(--ds-color-neutral-text-default);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: var(--ds-size-1);
        margin: auto 0
    }

    .ds-combobox__option--active .ds-combobox__option__label {
        color: var(--ds-color-text-default)
    }

    .ds-combobox__option__icon-wrapper {
        aspect-ratio: 1/1;
        background-color: var(--ds-color-neutral-surface-default);
        border: 2px solid var(--ds-color-neutral-border-default);
        border-radius: var(--ds-border-radius-sm);
        display: grid;
        place-items: center;
        width: var(--ds-size-6)
    }

    .ds-combobox__option--active .ds-combobox__option__icon-wrapper {
        border-color: var(--ds-color-base-default)
    }

    .ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper {
        width: var(--ds-size-5)
    }

    .ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper {
        width: var(--ds-size-6)
    }

    .ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper {
        width: var(--ds-size-7)
    }

    .ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected {
        background-color: var(--ds-color-base-default);
        border-color: var(--ds-color-base-default)
    }

    .ds-combobox__option__icon-wrapper__icon {
        box-sizing: border-box;
        padding-top: .2em;
        transform: scale(1.4);
        stroke: var(--ds-color-neutral-text-default);
        color: var(--ds-color-neutral-text-default)
    }

    .ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon {
        padding-top: 0
    }

    .ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon {
        stroke: var(--ds-color-text-default);
        color: var(--ds-color-text-default)
    }

    .ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon {
        color: #fff;
        stroke: #fff
    }

    .ds-combobox__option__description {
        color: var(--ds-color-neutral-text-subtle);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        font-weight: 400;
        gap: var(--ds-size-1)
    }
}