@layer components {
    .lkCln {
        position: relative;
        display: inline-block;
        gap: var(--button-gap);
        flex-shrink: 0;
        height: var(--button-size);
        padding: 0 var(--button-gutter);
        border-radius: var(--button-radius);
        cursor: pointer;
        font-size: var(--button-font-size);
        font-weight: var(--button-font-weight);
        line-height: 1;
        transition-duration: var(--transition-duration-basic);
        transition-property: opacity,color;
        transition-timing-function: var(--transition-ease-basic);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        white-space: nowrap
    }

        .lkCln:before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            border-radius: inherit;
            content: "";
            transition-duration: var(--transition-duration-basic);
            transition-property: opacity,background-color,transform,box-shadow,border-color;
            transition-timing-function: var(--transition-ease-basic);
            will-change: transform
        }

        .lkCln:after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            border-radius: inherit;
            content: "";
            pointer-events: none;
            transition-duration: var(--transition-duration-basic);
            transition-property: transform;
            transition-timing-function: var(--transition-ease-basic);
            will-change: transform
        }

        .lkCln:focus {
            outline: none
        }

        .lkCln:focus-visible:after {
            outline: 2px solid var(--button-ring-color, var(--color-ring));
            outline-offset: var(--button-ring-offset, 2px)
        }

        .lkCln svg:where(:not([data-no-autosize])) {
            width: var(--button-icon-size);
            height: var(--button-icon-size)
        }

    :where(.lkCln svg:where(:not([data-no-autosize])):first-child:not(:only-child)) {
        margin-left: var(--button-icon-offset, -1px)
    }

    :where(.lkCln svg:where(:not([data-no-autosize])):last-child:not(:only-child)) {
        margin-right: var(--button-icon-offset, -1px)
    }

    .lkCln:where([data-optically-align=start]) {
        margin-inline-start: calc(var(--button-gutter) * -1)
    }

    .lkCln:where([data-optically-align=end]) {
        margin-inline-end: calc(var(--button-gutter) * -1)
    }

    .lkCln:where([data-optically-align=start][data-uniform]) {
        margin-inline-start: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1)
    }

    .lkCln:where([data-optically-align=end][data-uniform]) {
        margin-inline-end: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1)
    }

    .lkCln:where([data-size="3xs"]) {
        --button-size: var(--control-size-3xs);
        --button-gutter: var(--control-gutter-2xs);
        --button-font-size: var(--control-font-size-sm);
        --button-icon-size: var(--control-icon-size-xs);
        --button-gap: var(--button-gap-sm);
        --button-radius: var(--control-radius-sm);
        --button-icon-offset: -1px;
        --indicator-size: 11px;
        --circular-progress-size: 11px
    }

    .lkCln:where([data-size="2xs"]) {
        --button-size: var(--control-size-2xs);
        --button-gutter: var(--control-gutter-xs);
        --button-font-size: var(--control-font-size-sm);
        --button-icon-size: var(--control-icon-size-sm);
        --button-gap: var(--button-gap-md);
        --button-radius: var(--control-radius-sm);
        --button-icon-offset: -1px;
        --indicator-size: 12px;
        --circular-progress-size: 12px
    }

    .lkCln:where([data-size=xs]) {
        --button-size: var(--control-size-xs);
        --button-gutter: var(--control-gutter-xs);
        --button-font-size: var(--control-font-size-md);
        --button-icon-size: var(--control-icon-size-sm);
        --button-gap: var(--button-gap-md);
        --button-radius: var(--control-radius-sm);
        --button-icon-offset: -1px;
        --indicator-size: 13px;
        --circular-progress-size: 14px
    }

    .lkCln:where([data-size=sm]) {
        --button-size: var(--control-size-sm);
        --button-gutter: var(--control-gutter-sm);
        --button-font-size: var(--control-font-size-md);
        --button-icon-size: var(--control-icon-size-md);
        --button-gap: var(--button-gap-md);
        --button-radius: var(--control-radius-sm);
        --button-icon-offset: -1px;
        --indicator-size: 15px;
        --circular-progress-size: 15px
    }

    .lkCln:where([data-size=md]) {
        --button-size: var(--control-size-md);
        --button-gutter: var(--control-gutter-md);
        --button-font-size: var(--control-font-size-md);
        --button-icon-size: var(--control-icon-size-md);
        --button-gap: var(--button-gap-lg);
        --button-radius: var(--control-radius-md);
        --button-icon-offset: -1px;
        --indicator-size: 16px;
        --circular-progress-size: 16px
    }

    .lkCln:where([data-size=lg]) {
        --button-size: var(--control-size-lg);
        --button-gutter: var(--control-gutter-md);
        --button-font-size: var(--control-font-size-md);
        --button-icon-size: var(--control-icon-size-md);
        --button-gap: var(--button-gap-lg);
        --button-radius: var(--control-radius-md);
        --button-icon-offset: -1px;
        --indicator-size: 16px;
        --circular-progress-size: 16px
    }

    .lkCln:where([data-size=xl]) {
        --button-size: var(--control-size-xl);
        --button-gutter: var(--control-gutter-lg);
        --button-font-size: var(--control-font-size-md);
        --button-icon-size: var(--control-icon-size-md);
        --button-gap: var(--button-gap-lg);
        --button-radius: var(--control-radius-lg);
        --button-icon-offset: -1px;
        --indicator-size: 18px;
        --circular-progress-size: 18px
    }

    .lkCln:where([data-size="2xl"]) {
        --button-size: var(--control-size-2xl);
        --button-gutter: var(--control-gutter-lg);
        --button-font-size: var(--control-font-size-lg);
        --button-icon-size: var(--control-icon-size-lg);
        --button-gap: var(--button-gap-lg);
        --button-radius: var(--control-radius-xl);
        --button-icon-offset: -2px;
        --indicator-size: 18px;
        --circular-progress-size: 18px
    }

    .lkCln:where([data-size="3xl"]) {
        --button-size: var(--control-size-3xl);
        --button-gutter: var(--control-gutter-xl);
        --button-font-size: var(--control-font-size-lg);
        --button-icon-size: var(--control-icon-size-lg);
        --button-gap: var(--button-gap-lg);
        --button-radius: var(--control-radius-xl);
        --button-icon-offset: -2px;
        --indicator-size: 20px;
        --circular-progress-size: 20px
    }

    .lkCln:where([data-gutter-size="2xs"]) {
        --button-gutter: var(--control-gutter-2xs)
    }

    .lkCln:where([data-gutter-size=xs]) {
        --button-gutter: var(--control-gutter-xs)
    }

    .lkCln:where([data-gutter-size=sm]) {
        --button-gutter: var(--control-gutter-sm)
    }

    .lkCln:where([data-gutter-size=md]) {
        --button-gutter: var(--control-gutter-md)
    }

    .lkCln:where([data-gutter-size=lg]) {
        --button-gutter: var(--control-gutter-lg)
    }

    .lkCln:where([data-gutter-size=xl]) {
        --button-gutter: var(--control-gutter-xl)
    }

    .lkCln:where([data-icon-size=sm]) {
        --button-icon-size: var(--control-icon-size-sm)
    }

    .lkCln:where([data-icon-size=md]) {
        --button-icon-size: var(--control-icon-size-md)
    }

    .lkCln:where([data-icon-size=lg]) {
        --button-icon-size: var(--control-icon-size-lg)
    }

    .lkCln:where([data-icon-size=xl]) {
        --button-icon-size: var(--control-icon-size-xl)
    }

    .lkCln:where([data-icon-size="2xl"]) {
        --button-icon-size: var(--control-icon-size-2xl)
    }

    .lkCln:where([data-pill]) {
        --button-radius: var(--radius-full);
        padding: 0 calc(var(--button-gutter) * var(--control-gutter-pill-scaling))
    }

    .lkCln:where([data-block]) {
        width: 100%
    }

    .lkCln[data-uniform] {
        --button-gutter: 0;
        width: var(--button-size)
    }

    .lkCln[data-variant=ghost] {
        --button-ring-offset: -1px;
        color: var(--button-text-color)
    }

        .lkCln[data-variant=ghost]:before {
            background-color: var(--button-background-color);
            opacity: 0;
            transform: scale(var(--scale))
        }

        .lkCln[data-variant=ghost][aria-expanded=true], .lkCln[data-variant=ghost][data-state=open] {
            color: var(--button-text-color-hover)
        }

            .lkCln[data-variant=ghost][aria-expanded=true]:before, .lkCln[data-variant=ghost][data-state=open]:before {
                opacity: .6;
                transform: scale(1)
            }

        .lkCln[data-variant=ghost][data-selected] {
            color: var(--button-text-color-hover)
        }

            .lkCln[data-variant=ghost][data-selected]:before {
                opacity: 1;
                transform: scale(1)
            }

    @media (hover: hover) and (pointer: fine) {
        .lkCln[data-variant=ghost]:where(:not([data-disabled])):hover {
            color: var(--button-text-color-hover)
        }

            .lkCln[data-variant=ghost]:where(:not([data-disabled])):hover:before {
                opacity: 1;
                transform: scale(1)
            }
    }

    .lkCln[data-variant=ghost]:where(:not([data-disabled])):active:before {
        background-color: var(--button-background-color-active);
        opacity: 1;
        transform: scale(var(--scale))
    }

    .lkCln[data-variant=ghost]:where(:not([data-disabled])):active:after {
        transform: scale(var(--scale))
    }

    .lkCln[data-variant=ghost]:where([data-color=primary]) {
        --button-background-color: var(--color-background-primary-ghost-hover);
        --button-background-color-active: var(--color-background-primary-ghost-active);
        --button-text-color: var(--color-text-primary-ghost);
        --button-text-color-hover: var(--color-text-primary-ghost-hover);
        --button-ring-color: var(--color-ring-primary-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=secondary]) {
        --button-background-color: var(--color-background-secondary-ghost-hover);
        --button-background-color-active: var(--color-background-secondary-ghost-active);
        --button-text-color: var(--color-text-secondary-ghost);
        --button-text-color-hover: var(--color-text-secondary-ghost-hover);
        --button-ring-color: var(--color-ring-secondary-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=danger]) {
        --button-background-color: var(--color-background-danger-ghost-hover);
        --button-background-color-active: var(--color-background-danger-ghost-active);
        --button-text-color: var(--color-text-danger-ghost);
        --button-text-color-hover: var(--color-text-danger-ghost-hover);
        --button-ring-color: var(--color-ring-danger-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=success]) {
        --button-background-color: var(--color-background-success-ghost-hover);
        --button-background-color-active: var(--color-background-success-ghost-active);
        --button-text-color: var(--color-text-success-ghost);
        --button-text-color-hover: var(--color-text-success-ghost-hover);
        --button-ring-color: var(--color-ring-success-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=warning]) {
        --button-background-color: var(--color-background-warning-ghost-hover);
        --button-background-color-active: var(--color-background-warning-ghost-active);
        --button-text-color: var(--color-text-warning-ghost);
        --button-text-color-hover: var(--color-text-warning-ghost-hover);
        --button-ring-color: var(--color-ring-warning-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=caution]) {
        --button-background-color: var(--color-background-caution-ghost-hover);
        --button-background-color-active: var(--color-background-caution-ghost-active);
        --button-text-color: var(--color-text-caution-ghost);
        --button-text-color-hover: var(--color-text-caution-ghost-hover);
        --button-ring-color: var(--color-ring-caution-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=info]) {
        --button-background-color: var(--color-background-info-ghost-hover);
        --button-background-color-active: var(--color-background-info-ghost-active);
        --button-text-color: var(--color-text-info-ghost);
        --button-text-color-hover: var(--color-text-info-ghost-hover);
        --button-ring-color: var(--color-ring-info-ghost)
    }

    .lkCln[data-variant=ghost]:where([data-color=discovery]) {
        --button-background-color: var(--color-background-discovery-ghost-hover);
        --button-background-color-active: var(--color-background-discovery-ghost-active);
        --button-text-color: var(--color-text-discovery-ghost);
        --button-text-color-hover: var(--color-text-discovery-ghost-hover);
        --button-ring-color: var(--color-ring-discovery-ghost)
    }

    .lkCln[data-variant=solid] {
        color: var(--button-text-color)
    }

        .lkCln[data-variant=solid]:before {
            background-color: var(--button-background-color)
        }

        .lkCln[data-variant=solid][aria-expanded=true]:before, .lkCln[data-variant=solid][data-state=open]:before, .lkCln[data-variant=solid][data-selected]:before {
            background-color: var(--button-background-color-hover)
        }

    @media (hover: hover) and (pointer: fine) {
        .lkCln[data-variant=solid]:where(:not([data-disabled])):hover:before {
            background-color: var(--button-background-color-hover)
        }
    }

    .lkCln[data-variant=solid]:where(:not([data-disabled])):active:before {
        background-color: var(--button-background-color-active)
    }

    .lkCln[data-variant=solid]:where(:not([data-disabled])):active:before, .lkCln[data-variant=solid]:where(:not([data-disabled])):active:after {
        transform: scale(var(--scale))
    }

    .lkCln[data-variant=solid]:where([data-color=primary]) {
        --button-background-color: var(--color-background-primary-solid);
        --button-background-color-hover: var(--color-background-primary-solid-hover);
        --button-background-color-active: var(--color-background-primary-solid-active);
        --button-text-color: var(--color-text-primary-solid);
        --button-ring-color: var(--color-ring-primary-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=secondary]) {
        --button-background-color: var(--color-background-secondary-solid);
        --button-background-color-hover: var(--color-background-secondary-solid-hover);
        --button-background-color-active: var(--color-background-secondary-solid-active);
        --button-text-color: var(--color-text-secondary-solid);
        --button-ring-color: var(--color-ring-secondary-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=success]) {
        --button-background-color: var(--color-background-success-solid);
        --button-background-color-hover: var(--color-background-success-solid-hover);
        --button-background-color-active: var(--color-background-success-solid-active);
        --button-text-color: var(--color-text-success-solid);
        --button-ring-color: var(--color-ring-success-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=danger]) {
        --button-background-color: var(--color-background-danger-solid);
        --button-background-color-hover: var(--color-background-danger-solid-hover);
        --button-background-color-active: var(--color-background-danger-solid-active);
        --button-text-color: var(--color-text-danger-solid);
        --button-ring-color: var(--color-ring-danger-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=warning]) {
        --button-background-color: var(--color-background-warning-solid);
        --button-background-color-hover: var(--color-background-warning-solid-hover);
        --button-background-color-active: var(--color-background-warning-solid-active);
        --button-text-color: var(--color-text-warning-solid);
        --button-ring-color: var(--color-ring-warning-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=caution]) {
        --button-background-color: var(--color-background-caution-solid);
        --button-background-color-hover: var(--color-background-caution-solid-hover);
        --button-background-color-active: var(--color-background-caution-solid-active);
        --button-text-color: var(--color-text-caution-solid);
        --button-ring-color: var(--color-ring-caution-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=info]) {
        --button-background-color: var(--color-background-info-solid);
        --button-background-color-hover: var(--color-background-info-solid-hover);
        --button-background-color-active: var(--color-background-info-solid-active);
        --button-text-color: var(--color-text-info-solid);
        --button-ring-color: var(--color-ring-info-solid)
    }

    .lkCln[data-variant=solid]:where([data-color=discovery]) {
        --button-background-color: var(--color-background-discovery-solid);
        --button-background-color-hover: var(--color-background-discovery-solid-hover);
        --button-background-color-active: var(--color-background-discovery-solid-active);
        --button-text-color: var(--color-text-discovery-solid);
        --button-ring-color: var(--color-ring-discovery-solid)
    }

    .lkCln[data-variant=soft] {
        color: var(--button-text-color)
    }

        .lkCln[data-variant=soft]:before {
            background-color: var(--button-background-color)
        }

        .lkCln[data-variant=soft][aria-expanded=true]:before, .lkCln[data-variant=soft][data-state=open]:before, .lkCln[data-variant=soft][data-selected]:before {
            background-color: var(--button-background-color-hover)
        }

    @media (hover: hover) and (pointer: fine) {
        .lkCln[data-variant=soft]:where(:not([data-disabled])):hover:before {
            background-color: var(--button-background-color-hover)
        }
    }

    .lkCln[data-variant=soft]:where(:not([data-disabled])):active:before {
        background-color: var(--button-background-color-active)
    }

    .lkCln[data-variant=soft]:where(:not([data-disabled])):active:before, .lkCln[data-variant=soft]:where(:not([data-disabled])):active:after {
        transform: scale(var(--scale))
    }

    .lkCln[data-variant=soft]:where([data-color=primary]) {
        --button-background-color: var(--color-background-primary-soft-alpha);
        --button-background-color-hover: var(--color-background-primary-soft-alpha-hover);
        --button-background-color-active: var(--color-background-primary-soft-alpha-active);
        --button-text-color: var(--color-text-primary-soft);
        --button-ring-color: var(--color-ring-primary-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=secondary]) {
        --button-background-color: var(--color-background-secondary-soft-alpha);
        --button-background-color-hover: var(--color-background-secondary-soft-alpha-hover);
        --button-background-color-active: var(--color-background-secondary-soft-alpha-active);
        --button-text-color: var(--color-text-secondary-soft);
        --button-ring-color: var(--color-ring-secondary-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=success]) {
        --button-background-color: var(--color-background-success-soft-alpha);
        --button-background-color-hover: var(--color-background-success-soft-alpha-hover);
        --button-background-color-active: var(--color-background-success-soft-alpha-active);
        --button-text-color: var(--color-text-success-soft);
        --button-ring-color: var(--color-ring-success-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=danger]) {
        --button-background-color: var(--color-background-danger-soft-alpha);
        --button-background-color-hover: var(--color-background-danger-soft-alpha-hover);
        --button-background-color-active: var(--color-background-danger-soft-alpha-active);
        --button-text-color: var(--color-text-danger-soft);
        --button-ring-color: var(--color-ring-danger-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=warning]) {
        --button-background-color: var(--color-background-warning-soft-alpha);
        --button-background-color-hover: var(--color-background-warning-soft-alpha-hover);
        --button-background-color-active: var(--color-background-warning-soft-alpha-active);
        --button-text-color: var(--color-text-warning-soft);
        --button-ring-color: var(--color-ring-warning-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=caution]) {
        --button-background-color: var(--color-background-caution-soft-alpha);
        --button-background-color-hover: var(--color-background-caution-soft-alpha-hover);
        --button-background-color-active: var(--color-background-caution-soft-alpha-active);
        --button-text-color: var(--color-text-caution-soft);
        --button-ring-color: var(--color-ring-caution-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=info]) {
        --button-background-color: var(--color-background-info-soft-alpha);
        --button-background-color-hover: var(--color-background-info-soft-alpha-hover);
        --button-background-color-active: var(--color-background-info-soft-alpha-active);
        --button-text-color: var(--color-text-info-soft);
        --button-ring-color: var(--color-ring-info-soft)
    }

    .lkCln[data-variant=soft]:where([data-color=discovery]) {
        --button-background-color: var(--color-background-discovery-soft-alpha);
        --button-background-color-hover: var(--color-background-discovery-soft-alpha-hover);
        --button-background-color-active: var(--color-background-discovery-soft-alpha-active);
        --button-text-color: var(--color-text-discovery-soft);
        --button-ring-color: var(--color-ring-discovery-soft)
    }

    .lkCln[data-variant=outline] {
        --button-ring-offset: -1px;
        color: var(--button-text-color)
    }

        .lkCln[data-variant=outline]:before {
            background-color: transparent;
            box-shadow: 0 0 0 1px var(--button-border-color) inset,var(--button-shadow-custom, 0 0 #00000000)
        }

        .lkCln[data-variant=outline][aria-expanded=true], .lkCln[data-variant=outline][data-state=open], .lkCln[data-variant=outline][data-selected] {
            color: var(--button-text-color-hover)
        }

            .lkCln[data-variant=outline][aria-expanded=true]:before, .lkCln[data-variant=outline][data-state=open]:before, .lkCln[data-variant=outline][data-selected]:before {
                background-color: var(--button-background-color-hover);
                box-shadow: 0 0 0 1px var(--button-border-color-hover) inset,var(--button-shadow-custom, 0 0 #00000000)
            }

    @media (hover: hover) and (pointer: fine) {
        .lkCln[data-variant=outline]:where(:not([data-disabled])):hover {
            color: var(--button-text-color-hover)
        }

            .lkCln[data-variant=outline]:where(:not([data-disabled])):hover:before {
                background-color: var(--button-background-color-hover);
                box-shadow: 0 0 0 1px var(--button-border-color-hover) inset,var(--button-shadow-custom, 0 0 #00000000)
            }
    }

    .lkCln[data-variant=outline]:where(:not([data-disabled])):active:before {
        background-color: var(--button-background-color-active);
        transform: scale(var(--scale))
    }

    .lkCln[data-variant=outline]:where(:not([data-disabled])):active:after {
        transform: scale(var(--scale))
    }

    .lkCln[data-variant=outline]:where([data-color=primary]) {
        --button-background-color-hover: var(--color-background-primary-outline-hover);
        --button-background-color-active: var(--color-background-primary-outline-active);
        --button-border-color: var(--color-border-primary-outline);
        --button-border-color-hover: var(--color-border-primary-outline-hover);
        --button-text-color: var(--color-text-primary-outline);
        --button-text-color-hover: var(--color-text-primary-outline-hover);
        --button-ring-color: var(--color-ring-primary-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=secondary]) {
        --button-background-color-hover: var(--color-background-secondary-outline-hover);
        --button-background-color-active: var(--color-background-secondary-outline-active);
        --button-border-color: var(--color-border-secondary-outline);
        --button-border-color-hover: var(--color-border-secondary-outline-hover);
        --button-text-color: var(--color-text-secondary-outline);
        --button-text-color-hover: var(--color-text-secondary-outline-hover);
        --button-ring-color: var(--color-ring-secondary-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=danger]) {
        --button-background-color-hover: var(--color-background-danger-outline-hover);
        --button-background-color-active: var(--color-background-danger-outline-active);
        --button-border-color: var(--color-border-danger-outline);
        --button-border-color-hover: var(--color-border-danger-outline-hover);
        --button-text-color: var(--color-text-danger-outline);
        --button-text-color-hover: var(--color-text-danger-outline-hover);
        --button-ring-color: var(--color-ring-danger-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=success]) {
        --button-background-color-hover: var(--color-background-success-outline-hover);
        --button-background-color-active: var(--color-background-success-outline-active);
        --button-border-color: var(--color-border-success-outline);
        --button-border-color-hover: var(--color-border-success-outline-hover);
        --button-text-color: var(--color-text-success-outline);
        --button-text-color-hover: var(--color-text-success-outline-hover);
        --button-ring-color: var(--color-ring-success-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=warning]) {
        --button-background-color-hover: var(--color-background-warning-outline-hover);
        --button-background-color-active: var(--color-background-warning-outline-active);
        --button-border-color: var(--color-border-warning-outline);
        --button-border-color-hover: var(--color-border-warning-outline-hover);
        --button-text-color: var(--color-text-warning-outline);
        --button-text-color-hover: var(--color-text-warning-outline-hover);
        --button-ring-color: var(--color-ring-warning-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=caution]) {
        --button-background-color-hover: var(--color-background-caution-outline-hover);
        --button-background-color-active: var(--color-background-caution-outline-active);
        --button-border-color: var(--color-border-caution-outline);
        --button-border-color-hover: var(--color-border-caution-outline-hover);
        --button-text-color: var(--color-text-caution-outline);
        --button-text-color-hover: var(--color-text-caution-outline-hover);
        --button-ring-color: var(--color-ring-caution-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=info]) {
        --button-background-color-hover: var(--color-background-info-outline-hover);
        --button-background-color-active: var(--color-background-info-outline-active);
        --button-border-color: var(--color-border-info-outline);
        --button-border-color-hover: var(--color-border-info-outline-hover);
        --button-text-color: var(--color-text-info-outline);
        --button-text-color-hover: var(--color-text-info-outline-hover);
        --button-ring-color: var(--color-ring-info-outline)
    }

    .lkCln[data-variant=outline]:where([data-color=discovery]) {
        --button-background-color-hover: var(--color-background-discovery-outline-hover);
        --button-background-color-active: var(--color-background-discovery-outline-active);
        --button-border-color: var(--color-border-discovery-outline);
        --button-border-color-hover: var(--color-border-discovery-outline-hover);
        --button-text-color: var(--color-text-discovery-outline);
        --button-text-color-hover: var(--color-text-discovery-outline-hover);
        --button-ring-color: var(--color-ring-discovery-outline)
    }

    .lkCln[disabled] {
        pointer-events: none
    }

    .lkCln[data-disabled][data-variant] {
        --button-background-color: var(--color-background-disabled);
        --button-border-color: var(--color-border-disabled);
        --button-text-color: var(--color-text-disabled);
        cursor: not-allowed;
        pointer-events: auto
    }

        .lkCln[data-disabled][data-variant]:active:before {
            transform: scale(1)
        }

        .lkCln[data-disabled][data-variant][data-disabled-tone=relaxed] {
            cursor: default
        }

    .NBPKZ {
        position: relative;
        display: flex;
        flex-direction: inherit;
        align-items: center;
        justify-content: center;
        gap: inherit;
        width: 100%;
        height: 100%;
        transition: opacity .15s ease .1s
    }

    [data-loading] .NBPKZ {
        opacity: 0;
        transition: opacity .3s ease
    }

    .XyIiU {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none
    }

        .XyIiU[data-entering] {
            opacity: 0
        }

        .XyIiU[data-exiting] {
            opacity: 1
        }

        .XyIiU[data-entering-active], .XyIiU[data-entering][data-interrupted] {
            opacity: 1;
            transition: opacity .15s ease .1s
        }

        .XyIiU[data-exiting-active], .XyIiU[data-exiting][data-interrupted] {
            opacity: 0;
            transition: opacity .15s ease
        }
}

@layer components {
    .xbgVL {
        display: flex;
        font-size: var(--font-text-sm-size);
        line-height: var(--font-text-sm-line-height);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

        .xbgVL[data-has-label] {
            align-items: flex-start
        }

        .xbgVL[data-label-position=start] {
            flex-direction: row-reverse
        }

    .M38jh {
        position: relative;
        flex-shrink: 0;
        width: var(--switch-track-width);
        max-width: var(--switch-track-width);
        height: var(--switch-track-height);
        border: 0;
        border-radius: var(--radius-full);
        background: var(--switch-track-color);
        cursor: pointer;
        transition: background-color .25s var(--cubic-move)
    }

    @media (hover: hover) and (pointer: fine) {
        .M38jh:where(:not([data-disabled],[data-state=checked])):hover {
            background: var(--switch-track-color-hover)
        }
    }

    [data-has-label] .M38jh {
        top: var(--switch-track-top-offset, 1px)
    }

    .M38jh:focus-visible {
        outline: 2px solid var(--color-ring);
        outline-offset: 2px
    }

    .M38jh[data-state=checked] {
        background: var(--switch-track-color-checked)
    }

    .M38jh[data-disabled] {
        background: var(--switch-track-color-disabled);
        cursor: not-allowed
    }

        .M38jh[data-disabled][data-state=checked] {
            background: var(--switch-track-color-checked-disabled)
        }

    ._9I9IG {
        position: absolute;
        top: var(--switch-thumb-offset);
        left: var(--switch-thumb-offset);
        display: block;
        width: var(--switch-thumb-size);
        height: var(--switch-thumb-size);
        border-radius: var(--radius-full);
        background: var(--switch-thumb-color);
        box-shadow: var(--switch-thumb-shadow);
        transition: transform .25s var(--cubic-move)
    }

    [data-state=checked] ._9I9IG {
        transform: translate(calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2))
    }

    ._9I9IG[data-disabled] {
        background: var(--switch-thumb-color-disabled);
        box-shadow: none
    }

    .bB4gz {
        cursor: pointer
    }

    [data-label-position=end] .bB4gz {
        padding-left: var(--switch-label-gap)
    }

    [data-label-position=start] .bB4gz {
        padding-right: var(--switch-label-gap)
    }

    [data-disabled] .bB4gz {
        cursor: not-allowed
    }
}

@layer components {
    .F5Sy7 {
        --segmented-control-option-radius: calc( var(--segmented-control-radius) - var(--segmented-control-gutter) );
        position: relative;
        overflow: auto;
        display: inline-flex;
        flex-wrap: nowrap;
        gap: var(--segmented-control-gap);
        height: var(--segmented-control-size);
        padding: var(--segmented-control-gutter);
        border-radius: var(--segmented-control-radius);
        background: var(--segmented-control-background);
        font-size: var(--segmented-control-font-size);
        font-weight: var(--segmented-control-font-weight);
        -ms-overflow-style: none;
        scrollbar-width: none;
        vertical-align: middle;
        white-space: nowrap
    }

        .F5Sy7::-webkit-scrollbar {
            width: 0;
            height: 0
        }

        .F5Sy7::-webkit-scrollbar-track, .F5Sy7::-webkit-scrollbar-thumb {
            background: transparent
        }

        .F5Sy7:where([data-block]) {
            overflow: hidden;
            display: flex;
            width: 100%;
            white-space: wrap
        }

        .F5Sy7:where([data-size="3xs"]) {
            --segmented-control-size: var(--control-size-3xs);
            --segmented-control-font-size: var(--control-font-size-sm);
            --segmented-control-radius: var(--control-radius-sm);
            --segmented-control-option-gutter: var(--control-gutter-xs)
        }

        .F5Sy7:where([data-size="2xs"]) {
            --segmented-control-size: var(--control-size-2xs);
            --segmented-control-font-size: var(--control-font-size-sm);
            --segmented-control-radius: var(--control-radius-sm);
            --segmented-control-option-gutter: var(--control-gutter-xs)
        }

        .F5Sy7:where([data-size=xs]) {
            --segmented-control-size: var(--control-size-xs);
            --segmented-control-font-size: var(--control-font-size-md);
            --segmented-control-radius: var(--control-radius-sm);
            --segmented-control-option-gutter: var(--control-gutter-xs)
        }

        .F5Sy7:where([data-size=sm]) {
            --segmented-control-size: var(--control-size-sm);
            --segmented-control-font-size: var(--control-font-size-md);
            --segmented-control-radius: var(--control-radius-md);
            --segmented-control-option-gutter: var(--control-gutter-sm)
        }

        .F5Sy7:where([data-size=md]) {
            --segmented-control-size: var(--control-size-md);
            --segmented-control-font-size: var(--control-font-size-md);
            --segmented-control-radius: var(--control-radius-md);
            --segmented-control-option-gutter: var(--control-gutter-md)
        }

        .F5Sy7:where([data-size=lg]) {
            --segmented-control-size: var(--control-size-lg);
            --segmented-control-font-size: var(--control-font-size-md);
            --segmented-control-radius: var(--control-radius-md);
            --segmented-control-option-gutter: var(--control-gutter-md)
        }

        .F5Sy7:where([data-size=xl]) {
            --segmented-control-size: var(--control-size-xl);
            --segmented-control-font-size: var(--control-font-size-md);
            --segmented-control-radius: var(--control-radius-lg);
            --segmented-control-option-gutter: var(--control-gutter-lg)
        }

        .F5Sy7:where([data-size="2xl"]) {
            --segmented-control-size: var(--control-size-2xl);
            --segmented-control-font-size: var(--control-font-size-lg);
            --segmented-control-radius: var(--control-radius-xl);
            --segmented-control-option-gutter: var(--control-gutter-xl)
        }

        .F5Sy7:where([data-size="3xl"]) {
            --segmented-control-size: var(--control-size-3xl);
            --segmented-control-font-size: var(--control-font-size-lg);
            --segmented-control-radius: var(--control-radius-xl);
            --segmented-control-option-gutter: var(--control-gutter-xl)
        }

        .F5Sy7:where([data-gutter-size="2xs"]) {
            --segmented-control-option-gutter: var(--control-gutter-2xs)
        }

        .F5Sy7:where([data-gutter-size=xs]) {
            --segmented-control-option-gutter: var(--control-gutter-xs)
        }

        .F5Sy7:where([data-gutter-size=sm]) {
            --segmented-control-option-gutter: var(--control-gutter-sm)
        }

        .F5Sy7:where([data-gutter-size=md]) {
            --segmented-control-option-gutter: var(--control-gutter-md)
        }

        .F5Sy7:where([data-gutter-size=lg]) {
            --segmented-control-option-gutter: var(--control-gutter-lg)
        }

        .F5Sy7:where([data-gutter-size=xl]) {
            --segmented-control-option-gutter: var(--control-gutter-xl)
        }

        .F5Sy7:where([data-pill]) {
            --segmented-control-radius: var(--radius-full);
            --segmented-control-option-radius: var(--radius-full)
        }

    .VewWL {
        position: relative;
        padding: 0 var(--segmented-control-option-gutter);
        border-radius: var(--segmented-control-option-radius);
        color: var(--color-text-secondary);
        cursor: pointer;
        line-height: 1;
        transition-duration: var(--transition-duration-basic);
        transition-property: opacity,background-color,color;
        transition-timing-function: var(--transition-ease-basic)
    }

        .VewWL:focus {
            outline: 0
        }

    :where(.F5Sy7[data-block]) .VewWL {
        flex: 1
    }

    :where(.F5Sy7[data-pill]) .VewWL {
        padding: 0 calc(var(--segmented-control-option-gutter) * var(--control-gutter-pill-scaling))
    }

    .VewWL[data-state=on]:focus-visible {
        outline: 2px solid var(--color-ring)
    }

    .VewWL:before {
        position: absolute;
        inset: var(--segmented-control-option-highlight-gutter);
        border-radius: var(--segmented-control-option-radius);
        background: var(--segmented-control-option-highlight-background-color);
        content: "";
        opacity: 0;
        pointer-events: none;
        transform: scale(1);
        transition-duration: var(--transition-duration-basic);
        transition-property: opacity,transform;
        transition-timing-function: var(--transition-ease-basic);
        will-change: transform
    }

    .VewWL:active:before {
        transform: scale(var(--scale),.97)
    }

    .VewWL svg {
        display: block
    }

    @media (hover: hover) and (pointer: fine) {
        .VewWL[data-state=off]:where(:not([disabled])):hover {
            color: var(--color-text-emphasis)
        }

            .VewWL[data-state=off]:where(:not([disabled])):hover:before {
                opacity: .5
            }
    }

    .VewWL[data-state=off]:where(:not([disabled])):focus-visible {
        color: var(--color-text-emphasis);
        outline: 2px solid var(--color-ring)
    }

    .VewWL[data-state=off]:where(:not([disabled])):active:before {
        opacity: .75
    }

    .VewWL[data-state=on] {
        color: var(--color-text-emphasis)
    }

    .VewWL[data-disabled] {
        cursor: not-allowed;
        opacity: .5
    }

        .VewWL[data-disabled]:before {
            opacity: 0 !important
        }

    .V5HTp {
        position: absolute;
        top: var(--segmented-control-gutter);
        bottom: var(--segmented-control-gutter);
        left: 0;
        border-radius: var(--segmented-control-option-radius);
        background: var(--segmented-control-thumb-background);
        box-shadow: var(--segmented-control-thumb-shadow);
        pointer-events: none;
        will-change: transform
    }
}

@layer components {
    .Kepsx {
        display: flex;
        align-items: center;
        gap: var(--input-gap);
        width: 100%;
        border-radius: var(--input-radius);
        color: var(--input-text-color);
        cursor: text;
        font-size: var(--input-font-size);
        font-weight: var(--font-weight-normal);
        transition-duration: var(--transition-duration-basic);
        transition-property: color,box-shadow,background-color;
        transition-timing-function: var(--transition-ease-basic)
    }

        .Kepsx:where([data-optically-align=start]) {
            margin-inline-start: calc(var(--input-gutter) * -1)
        }

        .Kepsx:where([data-optically-align=end]) {
            margin-inline-end: calc(var(--input-gutter) * -1)
        }

        .Kepsx:where([data-variant=outline]) {
            box-shadow: 0 0 0 1px var(--input-outline-border-color) inset
        }

    @media (hover: hover) and (pointer: fine) {
        .Kepsx:where([data-variant=outline]):not([data-disabled]):hover {
            box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset
        }
    }

    .Kepsx:where([data-variant=outline]):not([data-disabled])[data-focused=true] {
        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset
    }

    .Kepsx:where([data-variant=outline]):not([data-disabled])[data-invalid] {
        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset
    }

    .Kepsx:where([data-variant=soft]) {
        background-color: var(--input-soft-background-color)
    }

        .Kepsx:where([data-variant=soft]):not([data-disabled])[data-focused=true] {
            box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset
        }

        .Kepsx:where([data-variant=soft]):not([data-disabled])[data-invalid] {
            box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset
        }

    .Kepsx[data-invalid] ::-moz-selection {
        background-color: var(--red-a50)
    }

    .Kepsx[data-invalid] ::selection {
        background-color: var(--red-a50)
    }

    .Kepsx:where([data-size="3xs"]) {
        --input-size: var(--control-size-3xs);
        --input-font-size: var(--control-font-size-sm);
        --input-radius: var(--control-radius-sm);
        --input-gutter: var(--control-gutter-xs);
        --input-gap: var(--input-gap-xs);
        --input-adornment-offset: -1px
    }

    .Kepsx:where([data-size="2xs"]) {
        --input-size: var(--control-size-2xs);
        --input-font-size: var(--control-font-size-sm);
        --input-radius: var(--control-radius-sm);
        --input-gutter: var(--control-gutter-xs);
        --input-gap: var(--input-gap-xs);
        --input-adornment-offset: -1px
    }

    .Kepsx:where([data-size=xs]) {
        --input-size: var(--control-size-xs);
        --input-font-size: var(--control-font-size-md);
        --input-radius: var(--control-radius-sm);
        --input-gutter: var(--control-gutter-xs);
        --input-gap: var(--input-gap-sm);
        --input-adornment-offset: -1px
    }

    .Kepsx:where([data-size=sm]) {
        --input-size: var(--control-size-sm);
        --input-font-size: var(--control-font-size-md);
        --input-radius: var(--control-radius-md);
        --input-gutter: var(--control-gutter-sm);
        --input-gap: var(--input-gap-md);
        --input-adornment-offset: -1px
    }

    .Kepsx:where([data-size=md]) {
        --input-size: var(--control-size-md);
        --input-font-size: var(--control-font-size-md);
        --input-radius: var(--control-radius-md);
        --input-gutter: var(--control-gutter-md);
        --input-gap: var(--input-gap-md)
    }

    .Kepsx:where([data-size=lg]) {
        --input-size: var(--control-size-lg);
        --input-font-size: var(--control-font-size-md);
        --input-radius: var(--control-radius-md);
        --input-gutter: var(--control-gutter-md);
        --input-gap: var(--input-gap-md)
    }

    .Kepsx:where([data-size=xl]) {
        --input-size: var(--control-size-xl);
        --input-font-size: var(--control-font-size-lg);
        --input-radius: var(--control-radius-lg);
        --input-gutter: var(--control-gutter-lg);
        --input-gap: var(--input-gap-lg)
    }

    .Kepsx:where([data-size="2xl"]) {
        --input-size: var(--control-size-2xl);
        --input-font-size: var(--control-font-size-lg);
        --input-radius: var(--control-radius-xl);
        --input-gutter: var(--control-gutter-xl);
        --input-gap: var(--input-gap-lg);
        --input-adornment-offset: -4px
    }

    .Kepsx:where([data-size="3xl"]) {
        --input-size: var(--control-size-3xl);
        --input-font-size: var(--control-font-size-lg);
        --input-radius: var(--control-radius-xl);
        --input-gutter: var(--control-gutter-xl);
        --input-gap: var(--input-gap-lg);
        --input-adornment-offset: -4px
    }

    .Kepsx:where([data-gutter-size="2xs"]) {
        --input-gutter: var(--control-gutter-2xs);
        --input-adornment-offset: -1px
    }

    .Kepsx:where([data-gutter-size=xs]) {
        --input-gutter: var(--control-gutter-xs);
        --input-adornment-offset: -1px
    }

    .Kepsx:where([data-gutter-size=sm]) {
        --input-gutter: var(--control-gutter-sm);
        --input-adornment-offset: -2px
    }

    .Kepsx:where([data-gutter-size=md]) {
        --input-gutter: var(--control-gutter-md);
        --input-adornment-offset: -2px
    }

    .Kepsx:where([data-gutter-size=lg]) {
        --input-gutter: var(--control-gutter-lg);
        --input-adornment-offset: -2px
    }

    .Kepsx:where([data-gutter-size=xl]) {
        --input-gutter: var(--control-gutter-xl);
        --input-adornment-offset: -4px
    }

    .Kepsx:where([data-pill]) {
        --input-radius: var(--radius-full)
    }

    .Kepsx[data-disabled] {
        cursor: not-allowed;
        opacity: .5
    }

    .Kepsx:where([data-has-start-adornment]) {
        padding-left: var(--input-gutter)
    }

    .Kepsx:where([data-has-start-adornment][data-pill]) {
        padding-left: calc(var(--input-gutter) * var(--control-gutter-pill-scaling))
    }

    .Kepsx:where([data-has-end-adornment]) {
        padding-right: var(--input-gutter)
    }

    .Kepsx:where([data-has-end-adornment][data-pill]) {
        padding-right: calc(var(--input-gutter) * var(--control-gutter-pill-scaling))
    }

    .Kepsx > :first-child:not(input) {
        margin-left: var(--input-adornment-offset, -2px)
    }

    .Kepsx > :last-child:not(input) {
        margin-right: var(--input-adornment-offset, -2px)
    }

    .EzGXF {
        display: block;
        width: 100%;
        height: var(--input-size);
        padding: 0 var(--input-gutter);
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit
    }

        .EzGXF:focus {
            outline: 0
        }

        .EzGXF:disabled {
            cursor: not-allowed
        }

        .EzGXF::-moz-placeholder {
            color: var(--input-placeholder-text-color)
        }

        .EzGXF::placeholder {
            color: var(--input-placeholder-text-color)
        }

        .EzGXF:-webkit-autofill {
            animation: _-6D-- 1ms
        }

            .EzGXF:-webkit-autofill, .EzGXF:-webkit-autofill:focus, .EzGXF:-webkit-autofill:hover {
                color: var(--color-text) !important;
                -webkit-text-fill-color: var(--color-text) !important;
                -webkit-transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important;
                transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important
            }

        .EzGXF:-webkit-autofill-and-obscured, .EzGXF:-webkit-autofill-strong-password, .EzGXF:-webkit-autofill-strong-password-viewable {
            color: var(--color-text) !important;
            -webkit-text-fill-color: var(--color-text) !important;
            -webkit-transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important;
            transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important
        }

        .EzGXF:-webkit-autofill:first-line {
            font-size: inherit !important;
            -webkit-transition: font-size 0s 50000s !important;
            transition: font-size 0s 50000s !important
        }

        .EzGXF[type=number] {
            -webkit-appearance: textfield;
            -moz-appearance: textfield;
            appearance: textfield
        }

            .EzGXF[type=number]::-webkit-outer-spin-button, .EzGXF[type=number]::-webkit-inner-spin-button {
                margin: 0;
                -webkit-appearance: none;
                appearance: none
            }

    :where(.Kepsx[data-pill]) .EzGXF {
        padding: 0 calc(var(--input-gutter) * var(--control-gutter-pill-scaling))
    }

    :where(.Kepsx[data-has-start-adornment]) .EzGXF {
        padding-left: 0
    }

    :where(.Kepsx[data-has-end-adornment]) .EzGXF {
        padding-right: 0
    }

    @keyframes _-6D-- {
        0% {
            opacity: 1
        }

        to {
            opacity: 1
        }
    }
}

@layer components {
    .R-WRg {
        position: relative;
        overflow: hidden;
        min-height: calc((var(--min-rows) * var(--tag-input-height)) + ((var(--min-rows) + 1) * var(--tag-input-tag-spacing)));
        padding: var(--tag-input-tag-spacing);
        border-radius: var(--radius-md);
        box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
        cursor: text;
        outline: 0;
        transition: box-shadow .15s ease
    }

        .R-WRg[data-disabled] {
            pointer-events: none
        }

    @media (hover: hover) and (pointer: fine) {
        .R-WRg:not([data-disabled]):hover, :where([data-theme=light]) .R-WRg:not([data-disabled]):hover {
            box-shadow: 0 0 0 1px var(--gray-300) inset
        }

        :where([data-theme=dark]) .R-WRg:not([data-disabled]):hover {
            box-shadow: 0 0 0 1px var(--gray-500) inset
        }
    }

    .R-WRg:not([data-disabled])[data-focused] {
        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset
    }

    .R-WRg[data-empty] {
        padding: var(--tag-input-tag-spacing) 12px
    }

    .R-WRg:where([data-size=md]) {
        --tag-input-font-size: var(--control-font-size-md);
        --tag-input-height: 20px;
        --tag-input-tag-spacing: 6px
    }

    .R-WRg:where([data-size=lg]) {
        --tag-input-font-size: var(--control-font-size-md);
        --tag-input-height: 24px;
        --tag-input-tag-spacing: 6px
    }

    .R-WRg:where([data-size=xl]) {
        --tag-input-font-size: var(--control-font-size-lg);
        --tag-input-height: 24px;
        --tag-input-tag-spacing: 8px
    }

    .R-WRg:where([data-size="2xl"]) {
        --tag-input-font-size: var(--control-font-size-lg);
        --tag-input-height: 28px;
        --tag-input-tag-spacing: 8px
    }

    .R-WRg:where([data-size="3xl"]) {
        --tag-input-font-size: var(--control-font-size-lg);
        --tag-input-height: 32px;
        --tag-input-tag-spacing: 8px
    }

    .VFVwi {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tag-input-tag-spacing)
    }

    ._6ujMH {
        overflow: hidden;
        display: flex;
        align-items: center;
        height: var(--tag-input-height);
        padding: 4px 4px 4px 8px;
        border-radius: var(--radius-md);
        cursor: pointer;
        line-height: 1.4;
        outline: none;
        transition: background-color .15s ease
    }

    ._6ujMH, :where([data-theme=light]) ._6ujMH {
        background-color: var(--color-background-secondary-soft);
        color: var(--color-text-secondary-soft)
    }

    :where([data-theme=dark]) ._6ujMH {
        background-color: var(--color-background-secondary-solid);
        color: var(--color-text-secondary-solid)
    }

    @media (hover: hover) and (pointer: fine) {
        ._6ujMH:hover, :where([data-theme=light]) ._6ujMH:hover {
            background-color: var(--color-background-secondary-soft-hover)
        }

        :where([data-theme=dark]) ._6ujMH:hover {
            background-color: var(--color-background-secondary-solid-hover)
        }
    }

    ._6ujMH:focus, :where([data-theme=light]) ._6ujMH:focus {
        background-color: var(--color-background-secondary-soft-hover)
    }

    :where([data-theme=dark]) ._6ujMH:focus {
        background-color: var(--color-background-secondary-solid-hover)
    }

    .R-WRg[data-disabled] ._6ujMH {
        color: var(--color-text-tertiary)
    }

    ._6ujMH[data-invalid] {
        background-color: var(--color-background-danger-soft);
        color: var(--color-text-danger-soft)
    }

    @media (hover: hover) and (pointer: fine) {
        ._6ujMH[data-invalid]:hover {
            background-color: var(--color-background-danger-soft-hover)
        }
    }

    ._6ujMH[data-invalid]:focus {
        background-color: var(--color-background-danger-soft-hover)
    }

    ._6ujMH[data-duplicate] {
        animation: _3cAY0 .5s ease
    }

    ._6ujMH .y6TZo {
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 4px;
        color: inherit;
        opacity: .7;
        transition: opacity .15s ease
    }

    @media (hover: hover) and (pointer: fine) {
        ._6ujMH .y6TZo:hover {
            opacity: 1
        }
    }

    .B9Y9B {
        font-size: var(--tag-input-font-size);
        white-space: nowrap
    }

    .W5rbb {
        display: flex;
        align-items: center;
        flex-grow: 1;
        max-width: 100%
    }

    .L9SlY {
        overflow: hidden;
        width: 100%
    }

    .TGyv4 {
        position: absolute;
        font-size: var(--tag-input-font-size);
        visibility: hidden;
        white-space: nowrap
    }

    .e7b57 {
        display: block;
        min-width: 20px;
        height: var(--tag-input-height);
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--color-text);
        font-size: var(--tag-input-font-size);
        line-height: 1.4;
        white-space: nowrap
    }

        .e7b57:focus {
            outline: 0
        }

        .e7b57::-moz-placeholder {
            color: var(--color-text-tertiary)
        }

        .e7b57::placeholder {
            color: var(--color-text-tertiary)
        }

        .e7b57:disabled {
            color: var(--color-text-tertiary)
        }

        .e7b57:-webkit-autofill, .e7b57:-webkit-autofill:focus, .e7b57:-webkit-autofill:hover {
            color: var(--color-text) !important;
            -webkit-text-fill-color: var(--color-text) !important;
            -webkit-transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important;
            transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important
        }

        .e7b57:-webkit-autofill-and-obscured, .e7b57:-webkit-autofill-strong-password, .e7b57:-webkit-autofill-strong-password-viewable {
            color: var(--color-text) !important;
            -webkit-text-fill-color: var(--color-text) !important;
            -webkit-transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important;
            transition: background-color 0s 50000s,box-shadow 0s 50000s,filter 0s 50000s !important
        }

    ._7v9RT {
        width: 100%;
        margin-top: 2px;
        color: var(--color-text);
        font-size: var(--font-text-xs-size);
        font-variant-numeric: tabular-nums;
        text-align: right
    }

    @keyframes _3cAY0 {
        0% {
            transform: translate(0)
        }

        20%,60% {
            transform: translate(-5px)
        }

        40%,80% {
            transform: translate(5px)
        }

        to {
            transform: translate(0)
        }
    }
}