@design-factory/angular 21.1.0 → 22.0.0-next.0

package/fesm2022/design-factory-angular-dropdown.mjs

@@ -0,0 +1,323 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injector, input, ViewEncapsulation, Component, ApplicationRef, EnvironmentInjector, ElementRef, effect, untracked, createComponent, booleanAttribute, output, viewChild, signal, Directive, DestroyRef } from '@angular/core';
+import { AgnosWidgetDirective, callWidgetFactory, useDirectiveForElement } from '@design-factory/angular/internals';
+import { createDropdown } from '@design-factory/core/components/dropdown';
+import * as i1 from '@design-factory/angular/button';
+import { ɵDfButtonVisual as _DfButtonVisual, ɵDfButtonHost as _DfButtonHost } from '@design-factory/angular/button';
+import { DfIcon } from '@design-factory/angular/icon';
+
+/**
+ * Internal host component used to render dropdown content in an overlay container.
+ * It wires the menu directive to the host element and projects the dropdown template.
+ *
+ * @internal
+ */
+class DfDropdownWindow {
+    constructor() {
+        this.injector = inject(Injector);
+        this.widget = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
+        this.content = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownWindow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfDropdownWindow, isStandalone: true, selector: "df-dropdown-window", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.df-show": "this.widget().state.opened()", "class.df-dropdown-sm": "this.widget().state.size() === 'sm'", "class.df-dropdown-lg": "this.widget().state.size() === 'lg'" }, classAttribute: "df-dropdown" }, ngImport: i0, template: `<ng-container *ngTemplateOutlet="content()" />`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownWindow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-dropdown-window',
+                    imports: [NgTemplateOutlet],
+                    encapsulation: ViewEncapsulation.None,
+                    template: `<ng-container *ngTemplateOutlet="content()" />`,
+                    host: {
+                        class: 'df-dropdown',
+                        '[class.df-show]': 'this.widget().state.opened()',
+                        '[class.df-dropdown-sm]': "this.widget().state.size() === 'sm'",
+                        '[class.df-dropdown-lg]': "this.widget().state.size() === 'lg'"
+                    }
+                }]
+        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }] } });
+/**
+ * Dropdown is a component to provide a button combined to a menu with a list of options.
+ * @since 22.0
+ */
+class DfDropdown extends AgnosWidgetDirective {
+    constructor() {
+        const widget = callWidgetFactory(createDropdown, {
+            events: {
+                onOpenedChange: (opened) => this.openedChange.emit(opened)
+            },
+            afterInit: () => {
+                const applicationRef = inject(ApplicationRef);
+                const injector = inject(Injector);
+                const environmentInjector = inject(EnvironmentInjector);
+                const elementRef = inject(ElementRef);
+                useDirectiveForElement(this.toggleElement, this.directives.anchorDirective, injector);
+                useDirectiveForElement(elementRef, this.directives.dropdownDirective, injector);
+                effect((onCleanup) => {
+                    if (widget.state.opened()) {
+                        const container = this.container();
+                        untracked(() => {
+                            const parent = container === 'body' ? document.body : elementRef.nativeElement;
+                            const hostElement = parent.appendChild(document.createElement('df-dropdown-window'));
+                            const dropdownWindow = createComponent(DfDropdownWindow, {
+                                hostElement,
+                                elementInjector: injector,
+                                environmentInjector
+                            });
+                            useDirectiveForElement(dropdownWindow.location.nativeElement, this.directives.menuDirective, dropdownWindow.injector);
+                            dropdownWindow.setInput('widget', widget);
+                            dropdownWindow.setInput('content', this.dropdownWindow());
+                            applicationRef.attachView(dropdownWindow.hostView);
+                            dropdownWindow.changeDetectorRef.detectChanges();
+                            onCleanup(() => {
+                                applicationRef.detachView(dropdownWindow.hostView);
+                                dropdownWindow.destroy();
+                                hostElement.remove();
+                            });
+                        });
+                    }
+                });
+            }
+        });
+        super(widget);
+        /**
+         * If `true`, the dropdown is open.
+         *
+         * @defaultValue `false`
+         */
+        this.opened = input(false, { ...(ngDevMode ? { debugName: "opened" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Event emitted when the open state changes.
+         */
+        this.openedChange = output();
+        /**
+         * The dropdown placement relative to its anchor.
+         */
+        this.placement = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
+        /**
+         * Visual size configuration for dropdown items.
+         */
+        this.size = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Which element should contain the dropdown menu DOM element.
+         * - `'body'`: the menu is appended to `document.body` (useful when the toggle is inside an element that clips
+         *   its content via `overflow` or creates a stacking context).
+         * - `null` (default): the menu is rendered inline, where the dropdown is declared.
+         *
+         * @defaultValue `null`
+         */
+        this.container = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+        this.dropdownWindow = viewChild.required('dropdownWindow');
+        this.toggleElement = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleElement" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Toggles the dropdown menu visibility programmatically.
+     *
+     * @param open - Optional explicit open state. When omitted, the current state is toggled.
+     */
+    toggle(open) {
+        this.api.toggle(open);
+    }
+    /**
+     * Opens the dropdown menu programmatically.
+     */
+    open() {
+        this.api.open();
+    }
+    /**
+     * Closes the dropdown menu programmatically.
+     */
+    close() {
+        this.api.close();
+    }
+    /**
+     * Get whether the dropdown menu is currently open.
+     */
+    isOpen() {
+        return this.state.opened();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: DfDropdown, isStandalone: true, selector: "df-dropdown", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, viewQueries: [{ propertyName: "dropdownWindow", first: true, predicate: ["dropdownWindow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #dropdownWindow>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [".df-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--df-spacing-3);padding-block:.3125rem;padding-inline:var(--df-spacing-4);font-size:var(--df-typo-sizing-default);font-weight:var(--df-typo-weight-medium);line-height:1.5;color:inherit;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;background-color:transparent;border:1px solid transparent;border-radius:var(--df-button-borderRadius-main-medium);outline:2px solid transparent;outline-offset:2px;cursor:pointer}.df-btn:not(.df-btn-no-transition){transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-btn:not(.df-btn-no-transition){transition:none}}.df-btn:focus-visible{outline-color:var(--df-button-focus-ring-color)}.df-btn:focus:not(:focus-visible){outline:2px solid transparent}.df-btn:is(:disabled,[aria-disabled=true]){pointer-events:auto;opacity:1;outline-color:transparent;transition:none;cursor:not-allowed}.df-btn.df-btn-sm{gap:var(--df-spacing-2);padding-block:.21875rem;padding-inline:var(--df-spacing-3);font-size:var(--df-typo-sizing-small);border-radius:var(--df-button-borderRadius-main-small)}.df-btn.df-btn-lg{gap:var(--df-spacing-4);padding-block:.59375rem;padding-inline:var(--df-spacing-5);font-size:var(--df-typo-sizing-large);border-radius:var(--df-button-borderRadius-main-large)}.df-btn.df-btn-solid.df-btn-primary{color:var(--df-button-solid-basic-color-primary-default-foreground);background-color:var(--df-button-solid-basic-color-primary-default-background);border-color:var(--df-button-solid-basic-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-basic-color-primary-hovered-foreground);background-color:var(--df-button-solid-basic-color-primary-hovered-background);border-color:var(--df-button-solid-basic-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-basic-color-primary-hovered-foreground);background-color:var(--df-button-solid-basic-color-primary-hovered-background);border-color:var(--df-button-solid-basic-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-basic-color-primary-default-foreground);background-color:var(--df-button-solid-basic-color-primary-default-background);border-color:var(--df-button-solid-basic-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-basic-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-basic-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-basic-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-basic-color-primary-pressed-foreground);background-color:var(--df-button-solid-basic-color-primary-pressed-background);border-color:var(--df-button-solid-basic-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-basic-color-disabled-foreground);background-color:var(--df-button-solid-basic-color-disabled-background);border-color:var(--df-button-solid-basic-color-disabled-background)}.df-btn.df-btn-outline.df-btn-primary{color:var(--df-button-outline-basic-color-primary-default-foreground);background-color:var(--df-button-outline-basic-color-primary-default-background);border-color:var(--df-button-outline-basic-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-basic-color-primary-hovered-foreground);background-color:var(--df-button-outline-basic-color-primary-hovered-background);border-color:var(--df-button-outline-basic-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-basic-color-primary-hovered-foreground);background-color:var(--df-button-outline-basic-color-primary-hovered-background);border-color:var(--df-button-outline-basic-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-basic-color-primary-default-foreground);background-color:var(--df-button-outline-basic-color-primary-default-background);border-color:var(--df-button-outline-basic-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-basic-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-basic-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-basic-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-basic-color-primary-pressed-foreground);background-color:var(--df-button-outline-basic-color-primary-pressed-background);border-color:var(--df-button-outline-basic-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-basic-color-disabled-foreground);background-color:var(--df-button-outline-basic-color-disabled-background);border-color:var(--df-button-outline-basic-color-disabled-border)}.df-btn.df-btn-text.df-btn-primary{color:var(--df-button-text-basic-color-primary-default-foreground);background-color:var(--df-button-text-basic-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-basic-color-primary-hovered-foreground);background-color:var(--df-button-text-basic-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-basic-color-primary-hovered-foreground);background-color:var(--df-button-text-basic-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-basic-color-primary-default-foreground);background-color:var(--df-button-text-basic-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-basic-color-primary-default-border)}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-basic-color-primary-hovered-border)}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-basic-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-basic-color-primary-pressed-foreground);background-color:var(--df-button-text-basic-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-basic-color-disabled-foreground);background-color:var(--df-button-text-basic-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger{color:var(--df-button-solid-basic-color-danger-default-foreground);background-color:var(--df-button-solid-basic-color-danger-default-background);border-color:var(--df-button-solid-basic-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-basic-color-danger-hovered-foreground);background-color:var(--df-button-solid-basic-color-danger-hovered-background);border-color:var(--df-button-solid-basic-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-basic-color-danger-hovered-foreground);background-color:var(--df-button-solid-basic-color-danger-hovered-background);border-color:var(--df-button-solid-basic-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-basic-color-danger-default-foreground);background-color:var(--df-button-solid-basic-color-danger-default-background);border-color:var(--df-button-solid-basic-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-basic-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-basic-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-basic-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-basic-color-danger-pressed-foreground);background-color:var(--df-button-solid-basic-color-danger-pressed-background);border-color:var(--df-button-solid-basic-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-basic-color-disabled-foreground);background-color:var(--df-button-solid-basic-color-disabled-background);border-color:var(--df-button-solid-basic-color-disabled-background)}.df-btn.df-btn-outline.df-btn-danger{color:var(--df-button-outline-basic-color-danger-default-foreground);background-color:var(--df-button-outline-basic-color-danger-default-background);border-color:var(--df-button-outline-basic-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-basic-color-danger-hovered-foreground);background-color:var(--df-button-outline-basic-color-danger-hovered-background);border-color:var(--df-button-outline-basic-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-basic-color-danger-hovered-foreground);background-color:var(--df-button-outline-basic-color-danger-hovered-background);border-color:var(--df-button-outline-basic-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-basic-color-danger-default-foreground);background-color:var(--df-button-outline-basic-color-danger-default-background);border-color:var(--df-button-outline-basic-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-basic-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-basic-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-basic-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-basic-color-danger-pressed-foreground);background-color:var(--df-button-outline-basic-color-danger-pressed-background);border-color:var(--df-button-outline-basic-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-basic-color-disabled-foreground);background-color:var(--df-button-outline-basic-color-disabled-background);border-color:var(--df-button-outline-basic-color-disabled-border)}.df-btn.df-btn-text.df-btn-danger{color:var(--df-button-text-basic-color-danger-default-foreground);background-color:var(--df-button-text-basic-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-basic-color-danger-hovered-foreground);background-color:var(--df-button-text-basic-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-basic-color-danger-hovered-foreground);background-color:var(--df-button-text-basic-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-basic-color-danger-default-foreground);background-color:var(--df-button-text-basic-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-basic-color-danger-default-border)}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-basic-color-danger-hovered-border)}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-basic-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-basic-color-danger-pressed-foreground);background-color:var(--df-button-text-basic-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-basic-color-disabled-foreground);background-color:var(--df-button-text-basic-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral{color:var(--df-button-solid-basic-color-neutral-default-foreground);background-color:var(--df-button-solid-basic-color-neutral-default-background);border-color:var(--df-button-solid-basic-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-basic-color-neutral-hovered-foreground);background-color:var(--df-button-solid-basic-color-neutral-hovered-background);border-color:var(--df-button-solid-basic-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-basic-color-neutral-hovered-foreground);background-color:var(--df-button-solid-basic-color-neutral-hovered-background);border-color:var(--df-button-solid-basic-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-basic-color-neutral-default-foreground);background-color:var(--df-button-solid-basic-color-neutral-default-background);border-color:var(--df-button-solid-basic-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-basic-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-basic-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-basic-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-basic-color-neutral-pressed-foreground);background-color:var(--df-button-solid-basic-color-neutral-pressed-background);border-color:var(--df-button-solid-basic-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-basic-color-disabled-foreground);background-color:var(--df-button-solid-basic-color-disabled-background);border-color:var(--df-button-solid-basic-color-disabled-background)}.df-btn.df-btn-outline.df-btn-neutral{color:var(--df-button-outline-basic-color-neutral-default-foreground);background-color:var(--df-button-outline-basic-color-neutral-default-background);border-color:var(--df-button-outline-basic-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-basic-color-neutral-hovered-foreground);background-color:var(--df-button-outline-basic-color-neutral-hovered-background);border-color:var(--df-button-outline-basic-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-basic-color-neutral-hovered-foreground);background-color:var(--df-button-outline-basic-color-neutral-hovered-background);border-color:var(--df-button-outline-basic-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-basic-color-neutral-default-foreground);background-color:var(--df-button-outline-basic-color-neutral-default-background);border-color:var(--df-button-outline-basic-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-basic-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-basic-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-basic-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-basic-color-neutral-pressed-foreground);background-color:var(--df-button-outline-basic-color-neutral-pressed-background);border-color:var(--df-button-outline-basic-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-basic-color-disabled-foreground);background-color:var(--df-button-outline-basic-color-disabled-background);border-color:var(--df-button-outline-basic-color-disabled-border)}.df-btn.df-btn-text.df-btn-neutral{color:var(--df-button-text-basic-color-neutral-default-foreground);background-color:var(--df-button-text-basic-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-basic-color-neutral-hovered-foreground);background-color:var(--df-button-text-basic-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-basic-color-neutral-hovered-foreground);background-color:var(--df-button-text-basic-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-basic-color-neutral-default-foreground);background-color:var(--df-button-text-basic-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-basic-color-neutral-default-border)}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-basic-color-neutral-hovered-border)}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-basic-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-basic-color-neutral-pressed-foreground);background-color:var(--df-button-text-basic-color-neutral-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-basic-color-disabled-foreground);background-color:var(--df-button-text-basic-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror{color:var(--df-button-solid-mirror-color-primary-default-foreground);background-color:var(--df-button-solid-mirror-color-primary-default-background);border-color:var(--df-button-solid-mirror-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-mirror-color-primary-hovered-foreground);background-color:var(--df-button-solid-mirror-color-primary-hovered-background);border-color:var(--df-button-solid-mirror-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-mirror-color-primary-hovered-foreground);background-color:var(--df-button-solid-mirror-color-primary-hovered-background);border-color:var(--df-button-solid-mirror-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-mirror-color-primary-default-foreground);background-color:var(--df-button-solid-mirror-color-primary-default-background);border-color:var(--df-button-solid-mirror-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-mirror-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-mirror-color-primary-pressed-foreground);background-color:var(--df-button-solid-mirror-color-primary-pressed-background);border-color:var(--df-button-solid-mirror-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-mirror-color-disabled-foreground);background-color:var(--df-button-solid-mirror-color-disabled-background);border-color:var(--df-button-solid-mirror-color-disabled-background)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror{color:var(--df-button-outline-mirror-color-primary-default-foreground);background-color:var(--df-button-outline-mirror-color-primary-default-background);border-color:var(--df-button-outline-mirror-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-mirror-color-primary-hovered-foreground);background-color:var(--df-button-outline-mirror-color-primary-hovered-background);border-color:var(--df-button-outline-mirror-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-mirror-color-primary-hovered-foreground);background-color:var(--df-button-outline-mirror-color-primary-hovered-background);border-color:var(--df-button-outline-mirror-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-mirror-color-primary-default-foreground);background-color:var(--df-button-outline-mirror-color-primary-default-background);border-color:var(--df-button-outline-mirror-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-mirror-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-mirror-color-primary-pressed-foreground);background-color:var(--df-button-outline-mirror-color-primary-pressed-background);border-color:var(--df-button-outline-mirror-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-mirror-color-disabled-foreground);background-color:var(--df-button-outline-mirror-color-disabled-background);border-color:var(--df-button-outline-mirror-color-disabled-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror{color:var(--df-button-text-mirror-color-primary-default-foreground);background-color:var(--df-button-text-mirror-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-mirror-color-primary-hovered-foreground);background-color:var(--df-button-text-mirror-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-mirror-color-primary-hovered-foreground);background-color:var(--df-button-text-mirror-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-mirror-color-primary-default-foreground);background-color:var(--df-button-text-mirror-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-mirror-color-primary-default-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-mirror-color-primary-hovered-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-mirror-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-mirror-color-primary-pressed-foreground);background-color:var(--df-button-text-mirror-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-mirror-color-disabled-foreground);background-color:var(--df-button-text-mirror-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror{color:var(--df-button-solid-mirror-color-danger-default-foreground);background-color:var(--df-button-solid-mirror-color-danger-default-background);border-color:var(--df-button-solid-mirror-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-mirror-color-danger-hovered-foreground);background-color:var(--df-button-solid-mirror-color-danger-hovered-background);border-color:var(--df-button-solid-mirror-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-mirror-color-danger-hovered-foreground);background-color:var(--df-button-solid-mirror-color-danger-hovered-background);border-color:var(--df-button-solid-mirror-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-mirror-color-danger-default-foreground);background-color:var(--df-button-solid-mirror-color-danger-default-background);border-color:var(--df-button-solid-mirror-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-mirror-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-mirror-color-danger-pressed-foreground);background-color:var(--df-button-solid-mirror-color-danger-pressed-background);border-color:var(--df-button-solid-mirror-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-mirror-color-disabled-foreground);background-color:var(--df-button-solid-mirror-color-disabled-background);border-color:var(--df-button-solid-mirror-color-disabled-background)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror{color:var(--df-button-outline-mirror-color-danger-default-foreground);background-color:var(--df-button-outline-mirror-color-danger-default-background);border-color:var(--df-button-outline-mirror-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-mirror-color-danger-hovered-foreground);background-color:var(--df-button-outline-mirror-color-danger-hovered-background);border-color:var(--df-button-outline-mirror-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-mirror-color-danger-hovered-foreground);background-color:var(--df-button-outline-mirror-color-danger-hovered-background);border-color:var(--df-button-outline-mirror-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-mirror-color-danger-default-foreground);background-color:var(--df-button-outline-mirror-color-danger-default-background);border-color:var(--df-button-outline-mirror-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-mirror-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-mirror-color-danger-pressed-foreground);background-color:var(--df-button-outline-mirror-color-danger-pressed-background);border-color:var(--df-button-outline-mirror-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-mirror-color-disabled-foreground);background-color:var(--df-button-outline-mirror-color-disabled-background);border-color:var(--df-button-outline-mirror-color-disabled-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror{color:var(--df-button-text-mirror-color-danger-default-foreground);background-color:var(--df-button-text-mirror-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-mirror-color-danger-hovered-foreground);background-color:var(--df-button-text-mirror-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-mirror-color-danger-hovered-foreground);background-color:var(--df-button-text-mirror-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-mirror-color-danger-default-foreground);background-color:var(--df-button-text-mirror-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-mirror-color-danger-default-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-mirror-color-danger-hovered-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-mirror-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-mirror-color-danger-pressed-foreground);background-color:var(--df-button-text-mirror-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-mirror-color-disabled-foreground);background-color:var(--df-button-text-mirror-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror{color:var(--df-button-solid-mirror-color-neutral-default-foreground);background-color:var(--df-button-solid-mirror-color-neutral-default-background);border-color:var(--df-button-solid-mirror-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-solid-mirror-color-neutral-hovered-background);border-color:var(--df-button-solid-mirror-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-solid-mirror-color-neutral-hovered-background);border-color:var(--df-button-solid-mirror-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-mirror-color-neutral-default-foreground);background-color:var(--df-button-solid-mirror-color-neutral-default-background);border-color:var(--df-button-solid-mirror-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-mirror-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-solid-mirror-color-neutral-pressed-background);border-color:var(--df-button-solid-mirror-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-mirror-color-disabled-foreground);background-color:var(--df-button-solid-mirror-color-disabled-background);border-color:var(--df-button-solid-mirror-color-disabled-background)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror{color:var(--df-button-outline-mirror-color-neutral-default-foreground);background-color:var(--df-button-outline-mirror-color-neutral-default-background);border-color:var(--df-button-outline-mirror-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-outline-mirror-color-neutral-hovered-background);border-color:var(--df-button-outline-mirror-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-outline-mirror-color-neutral-hovered-background);border-color:var(--df-button-outline-mirror-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-mirror-color-neutral-default-foreground);background-color:var(--df-button-outline-mirror-color-neutral-default-background);border-color:var(--df-button-outline-mirror-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-mirror-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-outline-mirror-color-neutral-pressed-background);border-color:var(--df-button-outline-mirror-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-mirror-color-disabled-foreground);background-color:var(--df-button-outline-mirror-color-disabled-background);border-color:var(--df-button-outline-mirror-color-disabled-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror{color:var(--df-button-text-mirror-color-neutral-default-foreground);background-color:var(--df-button-text-mirror-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-text-mirror-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-text-mirror-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-mirror-color-neutral-default-foreground);background-color:var(--df-button-text-mirror-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-mirror-color-neutral-default-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-mirror-color-neutral-hovered-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-mirror-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-text-mirror-color-neutral-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-mirror-color-disabled-foreground);background-color:var(--df-button-text-mirror-color-disabled-background);border-color:transparent}.df-btn.df-btn-outline.df-btn-primary.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-primary.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-danger.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-danger.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-neutral.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-neutral.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-primary.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-danger.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn-icononly{width:2.25rem;height:2.25rem;padding:0;font-size:var(--df-icons-sizing-default)}.df-btn-icononly.df-btn-sm{width:1.875rem;height:1.875rem;font-size:var(--df-icons-sizing-small)}.df-btn-icononly.df-btn-lg{width:3rem;height:3rem;font-size:var(--df-icons-sizing-large)}a.df-btn-icononly{font-size:var(--df-icons-sizing-2xlarge)}a.df-btn-icononly.df-btn-sm{font-size:var(--df-icons-sizing-large)}a.df-btn-icononly.df-btn-lg{font-size:var(--df-icons-sizing-3xlarge)}\n", ".df-btn.df-btn-solid.df-btn-primary.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-basic-color-primary-pressed-foreground);background-color:var(--df-button-solid-basic-color-primary-pressed-background);border-color:var(--df-button-solid-basic-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-basic-color-primary-pressed-foreground);background-color:var(--df-button-outline-basic-color-primary-pressed-background);border-color:var(--df-button-outline-basic-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-basic-color-primary-pressed-foreground);background-color:var(--df-button-text-basic-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-basic-color-danger-pressed-foreground);background-color:var(--df-button-solid-basic-color-danger-pressed-background);border-color:var(--df-button-solid-basic-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-basic-color-danger-pressed-foreground);background-color:var(--df-button-outline-basic-color-danger-pressed-background);border-color:var(--df-button-outline-basic-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-basic-color-danger-pressed-foreground);background-color:var(--df-button-text-basic-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-basic-color-neutral-pressed-foreground);background-color:var(--df-button-solid-basic-color-neutral-pressed-background);border-color:var(--df-button-solid-basic-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-basic-color-neutral-pressed-foreground);background-color:var(--df-button-outline-basic-color-neutral-pressed-background);border-color:var(--df-button-outline-basic-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-basic-color-neutral-pressed-foreground);background-color:var(--df-button-text-basic-color-neutral-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-mirror-color-primary-pressed-foreground);background-color:var(--df-button-solid-mirror-color-primary-pressed-background);border-color:var(--df-button-solid-mirror-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-mirror-color-primary-pressed-foreground);background-color:var(--df-button-outline-mirror-color-primary-pressed-background);border-color:var(--df-button-outline-mirror-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-mirror-color-primary-pressed-foreground);background-color:var(--df-button-text-mirror-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-mirror-color-danger-pressed-foreground);background-color:var(--df-button-solid-mirror-color-danger-pressed-background);border-color:var(--df-button-solid-mirror-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-mirror-color-danger-pressed-foreground);background-color:var(--df-button-outline-mirror-color-danger-pressed-background);border-color:var(--df-button-outline-mirror-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-mirror-color-danger-pressed-foreground);background-color:var(--df-button-text-mirror-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-solid-mirror-color-neutral-pressed-background);border-color:var(--df-button-solid-mirror-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-outline-mirror-color-neutral-pressed-background);border-color:var(--df-button-outline-mirror-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-text-mirror-color-neutral-pressed-background);border-color:transparent}.df-dropdown{text-align:start;box-shadow:0 0 8px var(--df-color-shadow-1);z-index:1000;display:none;min-width:10rem;padding:0;margin:0;font-size:var(--df-typo-sizing-default);color:var(--df-color-neutral-alt-default-foreground);list-style:none;background-color:var(--df-color-inert-neutral-main-background);background-clip:padding-box;border:1px solid var(--df-color-inert-neutral-main-border);border-radius:var(--df-borderRadius-main-medium);overflow:hidden}.df-dropdown.df-show{display:block}.df-dropdown .df-dropdown-item{display:block;width:100%;padding:.5rem var(--df-spacing-4);clear:both;color:var(--df-color-neutral-alt-default-foreground);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;line-height:1.25}.df-dropdown .df-dropdown-item:hover,.df-dropdown .df-dropdown-item:focus-visible{color:var(--df-color-neutral-alt-hovered-foreground);background-color:var(--df-color-primary-alt-hovered-background);text-decoration:none}.df-dropdown .df-dropdown-item.df-active:not(:disabled,[aria-disabled=true]){font-weight:var(--df-typo-weight-bold)}.df-dropdown .df-dropdown-item.df-active,.df-dropdown .df-dropdown-item:active{color:var(--df-color-neutral-alt-active-foreground);text-decoration:none;background-color:var(--df-color-primary-alt-active-background)}.df-dropdown .df-dropdown-item[aria-disabled=true],.df-dropdown .df-dropdown-item:disabled{color:var(--df-color-disabled-main-foreground);pointer-events:none;background-color:transparent}.df-dropdown .df-dropdown-item:focus-visible{--df-box-shadow-color: var(--df-color-focus-main-border);--df-inner-box-shadow-color: var(--df-color-inert-neutral-main-pageBackground);box-shadow:inset 0 0 0 2px var(--df-inner-box-shadow-color),inset 0 0 0 4px var(--df-box-shadow-color);outline:none}.df-dropdown .df-dropdown-item:focus-visible:is(.df-active,:active){background-color:var(--df-color-primary-alt-active-background);--df-inner-box-shadow-color: var(--df-color-primary-alt-active-background)}.df-dropdown .df-dropdown-item:hover{--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background)}.df-dropdown .df-dropdown-item:is([aria-disabled=true],:disabled){cursor:not-allowed;pointer-events:auto}.df-dropdown .df-dropdown-item:focus:not(:hover,.df-active,:active){color:inherit;background-color:inherit}.df-dropdown a.df-dropdown-item:not([aria-disabled=true]),.df-dropdown a.df-dropdown-item:not([aria-disabled=true]):hover{color:var(--df-color-neutral-alt-default-foreground);border-bottom-width:0}.df-dropdown a.df-dropdown-item:not([aria-disabled=true]):hover{background-color:var(--df-color-primary-alt-hovered-background)}.df-dropdown df-separator{margin:var(--df-spacing-3) 0}.df-btn-lg.df-dropdown-toggle:not(.df-standalone-dropdown-toggle){gap:var(--df-spacing-3)}.df-dropdown-sm .df-dropdown-item{padding:.5rem var(--df-spacing-3);line-height:1.125;font-size:var(--df-typo-sizing-small)}.df-dropdown-lg .df-dropdown-item{padding:.6563rem var(--df-spacing-5);line-height:1.6875;font-size:var(--df-typo-sizing-large)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-dropdown', encapsulation: ViewEncapsulation.None, template: `
+    <ng-template #dropdownWindow>
+      <ng-content />
+    </ng-template>
+  `, styles: [".df-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--df-spacing-3);padding-block:.3125rem;padding-inline:var(--df-spacing-4);font-size:var(--df-typo-sizing-default);font-weight:var(--df-typo-weight-medium);line-height:1.5;color:inherit;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;background-color:transparent;border:1px solid transparent;border-radius:var(--df-button-borderRadius-main-medium);outline:2px solid transparent;outline-offset:2px;cursor:pointer}.df-btn:not(.df-btn-no-transition){transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-btn:not(.df-btn-no-transition){transition:none}}.df-btn:focus-visible{outline-color:var(--df-button-focus-ring-color)}.df-btn:focus:not(:focus-visible){outline:2px solid transparent}.df-btn:is(:disabled,[aria-disabled=true]){pointer-events:auto;opacity:1;outline-color:transparent;transition:none;cursor:not-allowed}.df-btn.df-btn-sm{gap:var(--df-spacing-2);padding-block:.21875rem;padding-inline:var(--df-spacing-3);font-size:var(--df-typo-sizing-small);border-radius:var(--df-button-borderRadius-main-small)}.df-btn.df-btn-lg{gap:var(--df-spacing-4);padding-block:.59375rem;padding-inline:var(--df-spacing-5);font-size:var(--df-typo-sizing-large);border-radius:var(--df-button-borderRadius-main-large)}.df-btn.df-btn-solid.df-btn-primary{color:var(--df-button-solid-basic-color-primary-default-foreground);background-color:var(--df-button-solid-basic-color-primary-default-background);border-color:var(--df-button-solid-basic-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-basic-color-primary-hovered-foreground);background-color:var(--df-button-solid-basic-color-primary-hovered-background);border-color:var(--df-button-solid-basic-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-basic-color-primary-hovered-foreground);background-color:var(--df-button-solid-basic-color-primary-hovered-background);border-color:var(--df-button-solid-basic-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-basic-color-primary-default-foreground);background-color:var(--df-button-solid-basic-color-primary-default-background);border-color:var(--df-button-solid-basic-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-basic-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-basic-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-basic-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-primary:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-basic-color-primary-pressed-foreground);background-color:var(--df-button-solid-basic-color-primary-pressed-background);border-color:var(--df-button-solid-basic-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-basic-color-disabled-foreground);background-color:var(--df-button-solid-basic-color-disabled-background);border-color:var(--df-button-solid-basic-color-disabled-background)}.df-btn.df-btn-outline.df-btn-primary{color:var(--df-button-outline-basic-color-primary-default-foreground);background-color:var(--df-button-outline-basic-color-primary-default-background);border-color:var(--df-button-outline-basic-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-basic-color-primary-hovered-foreground);background-color:var(--df-button-outline-basic-color-primary-hovered-background);border-color:var(--df-button-outline-basic-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-basic-color-primary-hovered-foreground);background-color:var(--df-button-outline-basic-color-primary-hovered-background);border-color:var(--df-button-outline-basic-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-basic-color-primary-default-foreground);background-color:var(--df-button-outline-basic-color-primary-default-background);border-color:var(--df-button-outline-basic-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-basic-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-basic-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-basic-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-primary:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-basic-color-primary-pressed-foreground);background-color:var(--df-button-outline-basic-color-primary-pressed-background);border-color:var(--df-button-outline-basic-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-basic-color-disabled-foreground);background-color:var(--df-button-outline-basic-color-disabled-background);border-color:var(--df-button-outline-basic-color-disabled-border)}.df-btn.df-btn-text.df-btn-primary{color:var(--df-button-text-basic-color-primary-default-foreground);background-color:var(--df-button-text-basic-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-basic-color-primary-hovered-foreground);background-color:var(--df-button-text-basic-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-basic-color-primary-hovered-foreground);background-color:var(--df-button-text-basic-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-basic-color-primary-default-foreground);background-color:var(--df-button-text-basic-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-basic-color-primary-default-border)}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-basic-color-primary-hovered-border)}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-basic-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-primary:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-basic-color-primary-pressed-foreground);background-color:var(--df-button-text-basic-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-basic-color-disabled-foreground);background-color:var(--df-button-text-basic-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger{color:var(--df-button-solid-basic-color-danger-default-foreground);background-color:var(--df-button-solid-basic-color-danger-default-background);border-color:var(--df-button-solid-basic-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-basic-color-danger-hovered-foreground);background-color:var(--df-button-solid-basic-color-danger-hovered-background);border-color:var(--df-button-solid-basic-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-basic-color-danger-hovered-foreground);background-color:var(--df-button-solid-basic-color-danger-hovered-background);border-color:var(--df-button-solid-basic-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-basic-color-danger-default-foreground);background-color:var(--df-button-solid-basic-color-danger-default-background);border-color:var(--df-button-solid-basic-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-basic-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-basic-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-basic-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-danger:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-basic-color-danger-pressed-foreground);background-color:var(--df-button-solid-basic-color-danger-pressed-background);border-color:var(--df-button-solid-basic-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-basic-color-disabled-foreground);background-color:var(--df-button-solid-basic-color-disabled-background);border-color:var(--df-button-solid-basic-color-disabled-background)}.df-btn.df-btn-outline.df-btn-danger{color:var(--df-button-outline-basic-color-danger-default-foreground);background-color:var(--df-button-outline-basic-color-danger-default-background);border-color:var(--df-button-outline-basic-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-basic-color-danger-hovered-foreground);background-color:var(--df-button-outline-basic-color-danger-hovered-background);border-color:var(--df-button-outline-basic-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-basic-color-danger-hovered-foreground);background-color:var(--df-button-outline-basic-color-danger-hovered-background);border-color:var(--df-button-outline-basic-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-basic-color-danger-default-foreground);background-color:var(--df-button-outline-basic-color-danger-default-background);border-color:var(--df-button-outline-basic-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-basic-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-basic-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-basic-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-danger:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-basic-color-danger-pressed-foreground);background-color:var(--df-button-outline-basic-color-danger-pressed-background);border-color:var(--df-button-outline-basic-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-basic-color-disabled-foreground);background-color:var(--df-button-outline-basic-color-disabled-background);border-color:var(--df-button-outline-basic-color-disabled-border)}.df-btn.df-btn-text.df-btn-danger{color:var(--df-button-text-basic-color-danger-default-foreground);background-color:var(--df-button-text-basic-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-basic-color-danger-hovered-foreground);background-color:var(--df-button-text-basic-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-basic-color-danger-hovered-foreground);background-color:var(--df-button-text-basic-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-basic-color-danger-default-foreground);background-color:var(--df-button-text-basic-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-basic-color-danger-default-border)}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-basic-color-danger-hovered-border)}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-basic-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-danger:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-basic-color-danger-pressed-foreground);background-color:var(--df-button-text-basic-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-basic-color-disabled-foreground);background-color:var(--df-button-text-basic-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral{color:var(--df-button-solid-basic-color-neutral-default-foreground);background-color:var(--df-button-solid-basic-color-neutral-default-background);border-color:var(--df-button-solid-basic-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-basic-color-neutral-hovered-foreground);background-color:var(--df-button-solid-basic-color-neutral-hovered-background);border-color:var(--df-button-solid-basic-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-basic-color-neutral-hovered-foreground);background-color:var(--df-button-solid-basic-color-neutral-hovered-background);border-color:var(--df-button-solid-basic-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-basic-color-neutral-default-foreground);background-color:var(--df-button-solid-basic-color-neutral-default-background);border-color:var(--df-button-solid-basic-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-basic-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-basic-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-basic-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-neutral:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-basic-color-neutral-pressed-foreground);background-color:var(--df-button-solid-basic-color-neutral-pressed-background);border-color:var(--df-button-solid-basic-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-basic-color-disabled-foreground);background-color:var(--df-button-solid-basic-color-disabled-background);border-color:var(--df-button-solid-basic-color-disabled-background)}.df-btn.df-btn-outline.df-btn-neutral{color:var(--df-button-outline-basic-color-neutral-default-foreground);background-color:var(--df-button-outline-basic-color-neutral-default-background);border-color:var(--df-button-outline-basic-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-basic-color-neutral-hovered-foreground);background-color:var(--df-button-outline-basic-color-neutral-hovered-background);border-color:var(--df-button-outline-basic-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-basic-color-neutral-hovered-foreground);background-color:var(--df-button-outline-basic-color-neutral-hovered-background);border-color:var(--df-button-outline-basic-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-basic-color-neutral-default-foreground);background-color:var(--df-button-outline-basic-color-neutral-default-background);border-color:var(--df-button-outline-basic-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-basic-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-basic-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-basic-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-neutral:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-basic-color-neutral-pressed-foreground);background-color:var(--df-button-outline-basic-color-neutral-pressed-background);border-color:var(--df-button-outline-basic-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-basic-color-disabled-foreground);background-color:var(--df-button-outline-basic-color-disabled-background);border-color:var(--df-button-outline-basic-color-disabled-border)}.df-btn.df-btn-text.df-btn-neutral{color:var(--df-button-text-basic-color-neutral-default-foreground);background-color:var(--df-button-text-basic-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-basic-color-neutral-hovered-foreground);background-color:var(--df-button-text-basic-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-basic-color-neutral-hovered-foreground);background-color:var(--df-button-text-basic-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-basic-color-neutral-default-foreground);background-color:var(--df-button-text-basic-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-basic-color-neutral-default-border)}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-basic-color-neutral-hovered-border)}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-basic-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-neutral:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-basic-color-neutral-pressed-foreground);background-color:var(--df-button-text-basic-color-neutral-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-basic-color-disabled-foreground);background-color:var(--df-button-text-basic-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror{color:var(--df-button-solid-mirror-color-primary-default-foreground);background-color:var(--df-button-solid-mirror-color-primary-default-background);border-color:var(--df-button-solid-mirror-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-mirror-color-primary-hovered-foreground);background-color:var(--df-button-solid-mirror-color-primary-hovered-background);border-color:var(--df-button-solid-mirror-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-mirror-color-primary-hovered-foreground);background-color:var(--df-button-solid-mirror-color-primary-hovered-background);border-color:var(--df-button-solid-mirror-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-mirror-color-primary-default-foreground);background-color:var(--df-button-solid-mirror-color-primary-default-background);border-color:var(--df-button-solid-mirror-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-primary-default-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-mirror-color-primary-hovered-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-mirror-color-primary-pressed-foreground);background-color:var(--df-button-solid-mirror-color-primary-pressed-background);border-color:var(--df-button-solid-mirror-color-primary-pressed-border)}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-mirror-color-disabled-foreground);background-color:var(--df-button-solid-mirror-color-disabled-background);border-color:var(--df-button-solid-mirror-color-disabled-background)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror{color:var(--df-button-outline-mirror-color-primary-default-foreground);background-color:var(--df-button-outline-mirror-color-primary-default-background);border-color:var(--df-button-outline-mirror-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-mirror-color-primary-hovered-foreground);background-color:var(--df-button-outline-mirror-color-primary-hovered-background);border-color:var(--df-button-outline-mirror-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-mirror-color-primary-hovered-foreground);background-color:var(--df-button-outline-mirror-color-primary-hovered-background);border-color:var(--df-button-outline-mirror-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-mirror-color-primary-default-foreground);background-color:var(--df-button-outline-mirror-color-primary-default-background);border-color:var(--df-button-outline-mirror-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-primary-default-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-mirror-color-primary-hovered-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-mirror-color-primary-pressed-foreground);background-color:var(--df-button-outline-mirror-color-primary-pressed-background);border-color:var(--df-button-outline-mirror-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-mirror-color-disabled-foreground);background-color:var(--df-button-outline-mirror-color-disabled-background);border-color:var(--df-button-outline-mirror-color-disabled-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror{color:var(--df-button-text-mirror-color-primary-default-foreground);background-color:var(--df-button-text-mirror-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-mirror-color-primary-hovered-foreground);background-color:var(--df-button-text-mirror-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-mirror-color-primary-hovered-foreground);background-color:var(--df-button-text-mirror-color-primary-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-mirror-color-primary-default-foreground);background-color:var(--df-button-text-mirror-color-primary-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-mirror-color-primary-default-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-mirror-color-primary-hovered-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-mirror-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-mirror-color-primary-pressed-foreground);background-color:var(--df-button-text-mirror-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-mirror-color-disabled-foreground);background-color:var(--df-button-text-mirror-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror{color:var(--df-button-solid-mirror-color-danger-default-foreground);background-color:var(--df-button-solid-mirror-color-danger-default-background);border-color:var(--df-button-solid-mirror-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-mirror-color-danger-hovered-foreground);background-color:var(--df-button-solid-mirror-color-danger-hovered-background);border-color:var(--df-button-solid-mirror-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-mirror-color-danger-hovered-foreground);background-color:var(--df-button-solid-mirror-color-danger-hovered-background);border-color:var(--df-button-solid-mirror-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-mirror-color-danger-default-foreground);background-color:var(--df-button-solid-mirror-color-danger-default-background);border-color:var(--df-button-solid-mirror-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-danger-default-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-mirror-color-danger-hovered-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-mirror-color-danger-pressed-foreground);background-color:var(--df-button-solid-mirror-color-danger-pressed-background);border-color:var(--df-button-solid-mirror-color-danger-pressed-border)}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-mirror-color-disabled-foreground);background-color:var(--df-button-solid-mirror-color-disabled-background);border-color:var(--df-button-solid-mirror-color-disabled-background)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror{color:var(--df-button-outline-mirror-color-danger-default-foreground);background-color:var(--df-button-outline-mirror-color-danger-default-background);border-color:var(--df-button-outline-mirror-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-mirror-color-danger-hovered-foreground);background-color:var(--df-button-outline-mirror-color-danger-hovered-background);border-color:var(--df-button-outline-mirror-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-mirror-color-danger-hovered-foreground);background-color:var(--df-button-outline-mirror-color-danger-hovered-background);border-color:var(--df-button-outline-mirror-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-mirror-color-danger-default-foreground);background-color:var(--df-button-outline-mirror-color-danger-default-background);border-color:var(--df-button-outline-mirror-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-danger-default-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-mirror-color-danger-hovered-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-mirror-color-danger-pressed-foreground);background-color:var(--df-button-outline-mirror-color-danger-pressed-background);border-color:var(--df-button-outline-mirror-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-mirror-color-disabled-foreground);background-color:var(--df-button-outline-mirror-color-disabled-background);border-color:var(--df-button-outline-mirror-color-disabled-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror{color:var(--df-button-text-mirror-color-danger-default-foreground);background-color:var(--df-button-text-mirror-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-mirror-color-danger-hovered-foreground);background-color:var(--df-button-text-mirror-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-mirror-color-danger-hovered-foreground);background-color:var(--df-button-text-mirror-color-danger-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-mirror-color-danger-default-foreground);background-color:var(--df-button-text-mirror-color-danger-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-mirror-color-danger-default-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-mirror-color-danger-hovered-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-mirror-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-mirror-color-danger-pressed-foreground);background-color:var(--df-button-text-mirror-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-mirror-color-disabled-foreground);background-color:var(--df-button-text-mirror-color-disabled-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror{color:var(--df-button-solid-mirror-color-neutral-default-foreground);background-color:var(--df-button-solid-mirror-color-neutral-default-background);border-color:var(--df-button-solid-mirror-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-solid-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-solid-mirror-color-neutral-hovered-background);border-color:var(--df-button-solid-mirror-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-solid-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-solid-mirror-color-neutral-hovered-background);border-color:var(--df-button-solid-mirror-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-solid-mirror-color-neutral-default-foreground);background-color:var(--df-button-solid-mirror-color-neutral-default-background);border-color:var(--df-button-solid-mirror-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-neutral-default-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-solid-mirror-color-neutral-hovered-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-solid-mirror-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-solid-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-solid-mirror-color-neutral-pressed-background);border-color:var(--df-button-solid-mirror-color-neutral-pressed-border)}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-solid-mirror-color-disabled-foreground);background-color:var(--df-button-solid-mirror-color-disabled-background);border-color:var(--df-button-solid-mirror-color-disabled-background)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror{color:var(--df-button-outline-mirror-color-neutral-default-foreground);background-color:var(--df-button-outline-mirror-color-neutral-default-background);border-color:var(--df-button-outline-mirror-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-outline-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-outline-mirror-color-neutral-hovered-background);border-color:var(--df-button-outline-mirror-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-outline-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-outline-mirror-color-neutral-hovered-background);border-color:var(--df-button-outline-mirror-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-outline-mirror-color-neutral-default-foreground);background-color:var(--df-button-outline-mirror-color-neutral-default-background);border-color:var(--df-button-outline-mirror-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-neutral-default-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-outline-mirror-color-neutral-hovered-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-outline-mirror-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-outline-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-outline-mirror-color-neutral-pressed-background);border-color:var(--df-button-outline-mirror-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-outline-mirror-color-disabled-foreground);background-color:var(--df-button-outline-mirror-color-disabled-background);border-color:var(--df-button-outline-mirror-color-disabled-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror{color:var(--df-button-text-mirror-color-neutral-default-foreground);background-color:var(--df-button-text-mirror-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):hover{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-text-mirror-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);background-color:var(--df-button-text-mirror-color-neutral-hovered-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:where(:not(:hover,:active)){color:var(--df-button-text-mirror-color-neutral-default-foreground);background-color:var(--df-button-text-mirror-color-neutral-default-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible{--df-button-focus-ring-color: var(--df-button-text-mirror-color-neutral-default-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:hover:not(:active){--df-button-focus-ring-color: var(--df-button-text-mirror-color-neutral-hovered-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):focus-visible:active{--df-button-focus-ring-color: var(--df-button-text-mirror-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):first-child:active,.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:not(:disabled,[aria-disabled=true]):active{color:var(--df-button-text-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-text-mirror-color-neutral-pressed-background);border-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror:is(:disabled,[aria-disabled=true]){color:var(--df-button-text-mirror-color-disabled-foreground);background-color:var(--df-button-text-mirror-color-disabled-background);border-color:transparent}.df-btn.df-btn-outline.df-btn-primary.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-primary.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-danger.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-danger.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-neutral.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-neutral.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-primary.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-danger.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active),.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror.df-btn-transparent:not(:disabled):not([aria-disabled=true]):not(:hover,:active){background-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror.df-btn-transparent:is(:disabled,[aria-disabled=true]){background-color:transparent}.df-btn-icononly{width:2.25rem;height:2.25rem;padding:0;font-size:var(--df-icons-sizing-default)}.df-btn-icononly.df-btn-sm{width:1.875rem;height:1.875rem;font-size:var(--df-icons-sizing-small)}.df-btn-icononly.df-btn-lg{width:3rem;height:3rem;font-size:var(--df-icons-sizing-large)}a.df-btn-icononly{font-size:var(--df-icons-sizing-2xlarge)}a.df-btn-icononly.df-btn-sm{font-size:var(--df-icons-sizing-large)}a.df-btn-icononly.df-btn-lg{font-size:var(--df-icons-sizing-3xlarge)}\n", ".df-btn.df-btn-solid.df-btn-primary.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-basic-color-primary-pressed-foreground);background-color:var(--df-button-solid-basic-color-primary-pressed-background);border-color:var(--df-button-solid-basic-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-basic-color-primary-pressed-foreground);background-color:var(--df-button-outline-basic-color-primary-pressed-background);border-color:var(--df-button-outline-basic-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-basic-color-primary-pressed-foreground);background-color:var(--df-button-text-basic-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-basic-color-danger-pressed-foreground);background-color:var(--df-button-solid-basic-color-danger-pressed-background);border-color:var(--df-button-solid-basic-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-basic-color-danger-pressed-foreground);background-color:var(--df-button-outline-basic-color-danger-pressed-background);border-color:var(--df-button-outline-basic-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-basic-color-danger-pressed-foreground);background-color:var(--df-button-text-basic-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-basic-color-neutral-pressed-foreground);background-color:var(--df-button-solid-basic-color-neutral-pressed-background);border-color:var(--df-button-solid-basic-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-basic-color-neutral-pressed-foreground);background-color:var(--df-button-outline-basic-color-neutral-pressed-background);border-color:var(--df-button-outline-basic-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-basic-color-neutral-pressed-foreground);background-color:var(--df-button-text-basic-color-neutral-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-primary.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-mirror-color-primary-pressed-foreground);background-color:var(--df-button-solid-mirror-color-primary-pressed-background);border-color:var(--df-button-solid-mirror-color-primary-pressed-border)}.df-btn.df-btn-outline.df-btn-primary.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-mirror-color-primary-pressed-foreground);background-color:var(--df-button-outline-mirror-color-primary-pressed-background);border-color:var(--df-button-outline-mirror-color-primary-pressed-border)}.df-btn.df-btn-text.df-btn-primary.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-mirror-color-primary-pressed-foreground);background-color:var(--df-button-text-mirror-color-primary-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-danger.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-mirror-color-danger-pressed-foreground);background-color:var(--df-button-solid-mirror-color-danger-pressed-background);border-color:var(--df-button-solid-mirror-color-danger-pressed-border)}.df-btn.df-btn-outline.df-btn-danger.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-mirror-color-danger-pressed-foreground);background-color:var(--df-button-outline-mirror-color-danger-pressed-background);border-color:var(--df-button-outline-mirror-color-danger-pressed-border)}.df-btn.df-btn-text.df-btn-danger.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-mirror-color-danger-pressed-foreground);background-color:var(--df-button-text-mirror-color-danger-pressed-background);border-color:transparent}.df-btn.df-btn-solid.df-btn-neutral.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-solid-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-solid-mirror-color-neutral-pressed-background);border-color:var(--df-button-solid-mirror-color-neutral-pressed-border)}.df-btn.df-btn-outline.df-btn-neutral.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-outline-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-outline-mirror-color-neutral-pressed-background);border-color:var(--df-button-outline-mirror-color-neutral-pressed-border)}.df-btn.df-btn-text.df-btn-neutral.df-btn-mirror.df-dropdown-toggle.df-show:not(:disabled){color:var(--df-button-text-mirror-color-neutral-pressed-foreground);background-color:var(--df-button-text-mirror-color-neutral-pressed-background);border-color:transparent}.df-dropdown{text-align:start;box-shadow:0 0 8px var(--df-color-shadow-1);z-index:1000;display:none;min-width:10rem;padding:0;margin:0;font-size:var(--df-typo-sizing-default);color:var(--df-color-neutral-alt-default-foreground);list-style:none;background-color:var(--df-color-inert-neutral-main-background);background-clip:padding-box;border:1px solid var(--df-color-inert-neutral-main-border);border-radius:var(--df-borderRadius-main-medium);overflow:hidden}.df-dropdown.df-show{display:block}.df-dropdown .df-dropdown-item{display:block;width:100%;padding:.5rem var(--df-spacing-4);clear:both;color:var(--df-color-neutral-alt-default-foreground);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;line-height:1.25}.df-dropdown .df-dropdown-item:hover,.df-dropdown .df-dropdown-item:focus-visible{color:var(--df-color-neutral-alt-hovered-foreground);background-color:var(--df-color-primary-alt-hovered-background);text-decoration:none}.df-dropdown .df-dropdown-item.df-active:not(:disabled,[aria-disabled=true]){font-weight:var(--df-typo-weight-bold)}.df-dropdown .df-dropdown-item.df-active,.df-dropdown .df-dropdown-item:active{color:var(--df-color-neutral-alt-active-foreground);text-decoration:none;background-color:var(--df-color-primary-alt-active-background)}.df-dropdown .df-dropdown-item[aria-disabled=true],.df-dropdown .df-dropdown-item:disabled{color:var(--df-color-disabled-main-foreground);pointer-events:none;background-color:transparent}.df-dropdown .df-dropdown-item:focus-visible{--df-box-shadow-color: var(--df-color-focus-main-border);--df-inner-box-shadow-color: var(--df-color-inert-neutral-main-pageBackground);box-shadow:inset 0 0 0 2px var(--df-inner-box-shadow-color),inset 0 0 0 4px var(--df-box-shadow-color);outline:none}.df-dropdown .df-dropdown-item:focus-visible:is(.df-active,:active){background-color:var(--df-color-primary-alt-active-background);--df-inner-box-shadow-color: var(--df-color-primary-alt-active-background)}.df-dropdown .df-dropdown-item:hover{--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background)}.df-dropdown .df-dropdown-item:is([aria-disabled=true],:disabled){cursor:not-allowed;pointer-events:auto}.df-dropdown .df-dropdown-item:focus:not(:hover,.df-active,:active){color:inherit;background-color:inherit}.df-dropdown a.df-dropdown-item:not([aria-disabled=true]),.df-dropdown a.df-dropdown-item:not([aria-disabled=true]):hover{color:var(--df-color-neutral-alt-default-foreground);border-bottom-width:0}.df-dropdown a.df-dropdown-item:not([aria-disabled=true]):hover{background-color:var(--df-color-primary-alt-hovered-background)}.df-dropdown df-separator{margin:var(--df-spacing-3) 0}.df-btn-lg.df-dropdown-toggle:not(.df-standalone-dropdown-toggle){gap:var(--df-spacing-3)}.df-dropdown-sm .df-dropdown-item{padding:.5rem var(--df-spacing-3);line-height:1.125;font-size:var(--df-typo-sizing-small)}.df-dropdown-lg .df-dropdown-item{padding:.6563rem var(--df-spacing-5);line-height:1.6875;font-size:var(--df-typo-sizing-large)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], dropdownWindow: [{ type: i0.ViewChild, args: ['dropdownWindow', { isSignal: true }] }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+/**
+ * Component representing the toggle button of a dropdown, which is used to toggle the visibility of the dropdown menu.
+ * @since 22.0
+ */
+class DfDropdownToggle {
+    constructor() {
+        /**
+         * The dropdown instance controlled by this toggle element.
+         *
+         * Pass the referenced {@link DfDropdown} instance to connect the host button to its menu.
+         */
+        this.dropdown = input.required({ ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), alias: 'dfDropdownToggle' });
+        /**
+         * When true, hides the chevron icon for icon-only dropdown buttons.
+         *
+         * **Accessibility:** When using `iconOnly`, you must provide an `aria-label` attribute on the button element.
+         *
+         * @example
+         * ```html
+         * <button [dfDropdownToggle]="menu" iconOnly aria-label="More options">
+         *   <df-icon class="fa-light fa-ellipsis-v" />
+         * </button>
+         * ```
+         */
+        this.iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        const element = inject(ElementRef).nativeElement;
+        effect(() => {
+            this.dropdown()['toggleElement'].set(element);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfDropdownToggle, isStandalone: true, selector: "button[dfDropdownToggle]", inputs: { dropdown: { classPropertyName: "dropdown", publicName: "dfDropdownToggle", isSignal: true, isRequired: true, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-show": "dropdown().isOpen()", "class.df-btn-icononly": "iconOnly()" }, classAttribute: "df-dropdown-toggle" }, hostDirectives: [{ directive: i1.ɵDfButtonVisual, inputs: ["variant", "variant", "appearance", "appearance", "size", "size", "transparent", "transparent", "mirror", "mirror"] }, { directive: i1.ɵDfButtonHost, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
+    <ng-content />
+    @if (!iconOnly()) {
+      <df-icon
+        class="fa-light"
+        [class.fa-chevron-down]="!dropdown().isOpen()"
+        [class.fa-chevron-up]="dropdown().isOpen()"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: DfIcon, selector: "df-icon" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[dfDropdownToggle]',
+                    imports: [DfIcon],
+                    template: `
+    <ng-content />
+    @if (!iconOnly()) {
+      <df-icon
+        class="fa-light"
+        [class.fa-chevron-down]="!dropdown().isOpen()"
+        [class.fa-chevron-up]="dropdown().isOpen()"
+      />
+    }
+  `,
+                    hostDirectives: [
+                        {
+                            directive: _DfButtonVisual,
+                            inputs: ['variant', 'appearance', 'size', 'transparent', 'mirror']
+                        },
+                        {
+                            directive: _DfButtonHost,
+                            inputs: ['disabled']
+                        }
+                    ],
+                    host: {
+                        class: 'df-dropdown-toggle',
+                        '[class.df-show]': 'dropdown().isOpen()',
+                        '[class.df-btn-icononly]': 'iconOnly()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfDropdownToggle", required: true }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
+/**
+ * Directive representing a button in the dropdown menu.
+ * @since 22.0
+ */
+class DfDropdownItemButton {
+    constructor() {
+        /**
+         * Whether the dropdown item is displayed in its active state.
+         */
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the dropdown item is disabled.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownItemButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: DfDropdownItemButton, isStandalone: true, selector: "button[dfDropdownItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-active": "active()", "disabled": "disabled() || null" }, classAttribute: "df-dropdown-item" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownItemButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[dfDropdownItem]',
+                    host: {
+                        class: 'df-dropdown-item',
+                        '[class.df-active]': 'active()',
+                        '[disabled]': 'disabled() || null'
+                    }
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/**
+ * Directive representing a link in the dropdown menu.
+ * @since 22.0
+ */
+class DfDropdownItemLink {
+    #hostEl;
+    constructor() {
+        this.#hostEl = inject(ElementRef).nativeElement;
+        /**
+         * Whether the dropdown item is displayed in its active state.
+         */
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the dropdown item is disabled.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        // Angular host listener metadata does not expose capture-phase options. Use a native listener so a
+        // disabled link can block clicks before RouterLink or other bubble-phase handlers navigate.
+        const destroyRef = inject(DestroyRef);
+        const onClickCapture = (event) => {
+            if (this.disabled()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        this.#hostEl.addEventListener('click', onClickCapture, { capture: true });
+        destroyRef.onDestroy(() => this.#hostEl.removeEventListener('click', onClickCapture, { capture: true }));
+    }
+    onKeydown(event) {
+        if (this.disabled() && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownItemLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: DfDropdownItemLink, isStandalone: true, selector: "a[dfDropdownItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.df-active": "active()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : null" }, classAttribute: "df-dropdown-item" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDropdownItemLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[dfDropdownItem]',
+                    host: {
+                        class: 'df-dropdown-item',
+                        '[class.df-active]': 'active()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'disabled() ? "-1" : null',
+                        '(keydown)': 'onKeydown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfDropdown, DfDropdownItemButton, DfDropdownItemLink, DfDropdownToggle, DfDropdownWindow };
+//# sourceMappingURL=design-factory-angular-dropdown.mjs.map