@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

package/dist/esm/components/ds-icon-button/styles/seat-legacy.styles.js

@@ -0,0 +1,748 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-icon-button/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .button {
+        border-width: var(--dg-icon-button-border-width-base);
+        border-style: solid;
+        outline-color: transparent;
+    }
+
+    /* Base button styles */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary {
+        border-color: transparent;
+        border-radius: var(--dg-icon-button-border-radius-base);
+        background: var(--dg-icon-button-bg-color-primary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary {
+        border-color: var(--dg-icon-button-border-color-secondary-default);
+        border-radius: var(--dg-icon-button-border-radius-base);
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary {
+        border-color: transparent;
+        border-radius: var(--dg-icon-button-border-radius-base);
+        background: var(--dg-icon-button-bg-color-tertiary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary {
+        border-color: transparent;
+        border-radius: var(--dg-icon-button-border-radius-base);
+        background: var(--dg-icon-button-bg-color-quaternary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked {
+        border-color: transparent;
+        border-radius: var(--dg-icon-button-border-radius-base);
+        background: var(--dg-icon-button-bg-color-standard-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded {
+        border-color: transparent;
+        border-radius: var(--dg-border-radius-full);
+        background: var(--dg-icon-button-bg-color-rounded-default);
+    }
+
+    /* Dark theme base button styles */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary) {
+        background: var(--dg-icon-button-bg-color-primary-default-dark, var(--dg-icon-button-bg-color-primary-default));
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary) {
+        border-color: var(
+            --dg-icon-button-border-color-secondary-default-dark,
+            var(--dg-icon-button-border-color-secondary-default)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary) {
+        background: var(
+            --dg-icon-button-bg-color-tertiary-default-dark,
+            var(--dg-icon-button-bg-color-tertiary-default)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary) {
+        background: var(--dg-icon-button-bg-color-rounded-default-dark, var(--dg-icon-button-bg-color-rounded-default));
+    }
+
+    /* Hover state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary:hover {
+        background: var(--dg-icon-button-bg-color-primary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary:hover {
+        border-color: var(--dg-icon-button-border-color-secondary-hover);
+        border-width: var(--dg-icon-button-border-width-hover);
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary:hover {
+        background: var(--dg-icon-button-bg-color-tertiary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary:hover {
+        background: var(--dg-icon-button-bg-color-quaternary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked:hover {
+        background: var(--dg-icon-button-bg-color-standard-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded:hover {
+        background: var(--dg-icon-button-bg-color-rounded-hover);
+    }
+
+    /* Dark theme hover state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary):hover {
+        background: var(--dg-icon-button-bg-color-primary-hover-dark, var(--dg-icon-button-bg-color-primary-hover));
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary):hover {
+        border-color: var(
+            --dg-icon-button-border-color-secondary-hover-dark,
+            var(--dg-icon-button-border-color-secondary-hover)
+        );
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary):hover {
+        background: var(--dg-icon-button-bg-color-tertiary-hover-dark, var(--dg-icon-button-bg-color-tertiary-hover));
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary):hover {
+        background: var(--dg-icon-button-bg-color-rounded-hover-dark, var(--dg-icon-button-bg-color-rounded-hover));
+    }
+
+    /* Focus-visible state */
+    :host([data-ui-kit-theme='seat-legacy']) .button:focus-visible {
+        outline-offset: 0.125rem;
+        outline-color: var(--dg-icon-button-outline-color-focus);
+        outline-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary:focus-visible {
+        background: var(--dg-icon-button-bg-color-primary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary:focus-visible {
+        border-color: var(--dg-icon-button-border-color-secondary-focus);
+        border-width: var(--dg-icon-button-border-width-hover);
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary:focus-visible {
+        background: var(--dg-icon-button-bg-color-tertiary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary:focus-visible {
+        background: var(--dg-icon-button-bg-color-quaternary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked:focus-visible {
+        background: var(--dg-icon-button-bg-color-standard-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded:focus-visible {
+        background: var(--dg-icon-button-bg-color-rounded-focus);
+    }
+
+    /* Dark theme focus-visible state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary):focus-visible {
+        background: var(--dg-icon-button-bg-color-primary-focus-dark, var(--dg-icon-button-bg-color-primary-focus));
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary):focus-visible {
+        border-color: var(
+            --dg-icon-button-border-color-secondary-focus-dark,
+            var(--dg-icon-button-border-color-secondary-focus)
+        );
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary):focus-visible {
+        background: var(--dg-icon-button-bg-color-tertiary-focus-dark, var(--dg-icon-button-bg-color-tertiary-focus));
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary):focus-visible {
+        background: var(--dg-icon-button-bg-color-rounded-focus-dark, var(--dg-icon-button-bg-color-rounded-focus));
+    }
+
+    /* Active state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary:active {
+        background: var(--dg-icon-button-bg-color-primary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary:active {
+        border-color: var(--dg-icon-button-border-color-secondary-pressed);
+        border-width: var(--dg-icon-button-border-width-hover);
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary:active {
+        background: var(--dg-icon-button-bg-color-tertiary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary:active {
+        background: var(--dg-icon-button-bg-color-quaternary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked:active {
+        background: var(--dg-icon-button-bg-color-standard-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded:active {
+        background: var(--dg-icon-button-bg-color-rounded-pressed);
+    }
+
+    /* Dark theme active state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary):active {
+        background: var(--dg-icon-button-bg-color-primary-pressed-dark, var(--dg-icon-button-bg-color-primary-pressed));
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary):active {
+        border-color: var(
+            --dg-icon-button-border-color-secondary-pressed-dark,
+            var(--dg-icon-button-border-color-secondary-pressed)
+        );
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary):active {
+        background: var(
+            --dg-icon-button-bg-color-tertiary-pressed-dark,
+            var(--dg-icon-button-bg-color-tertiary-pressed)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary):active {
+        background: var(--dg-icon-button-bg-color-rounded-pressed-dark, var(--dg-icon-button-bg-color-rounded-pressed));
+    }
+
+    /* Disabled state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.disabled {
+        background: var(--dg-icon-button-bg-color-primary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.disabled {
+        border-color: var(--dg-icon-button-border-color-secondary-disabled);
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.disabled {
+        background: var(--dg-icon-button-bg-color-tertiary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary.disabled {
+        background: var(--dg-icon-button-bg-color-quaternary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.disabled {
+        background: var(--dg-icon-button-bg-color-standard-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.disabled {
+        background: var(--dg-icon-button-bg-color-rounded-disabled);
+    }
+
+    /* Dark theme disabled state */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary).disabled {
+        background: var(
+            --dg-icon-button-bg-color-primary-disabled-dark,
+            var(--dg-icon-button-bg-color-primary-disabled)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary).disabled {
+        border-color: var(
+            --dg-icon-button-border-color-secondary-disabled-dark,
+            var(--dg-icon-button-border-color-secondary-disabled)
+        );
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary).disabled {
+        background: var(
+            --dg-icon-button-bg-color-tertiary-disabled-dark,
+            var(--dg-icon-button-bg-color-tertiary-disabled)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary).disabled {
+        background: var(
+            --dg-icon-button-bg-color-rounded-disabled-dark,
+            var(--dg-icon-button-bg-color-rounded-disabled)
+        );
+    }
+
+    /* Size variations */
+    :host([data-ui-kit-theme='seat-legacy']) .button.large {
+        height: 3rem;
+        width: 3rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.medium {
+        height: 2.5rem;
+        width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.small {
+        height: 2rem;
+        width: 2rem;
+    }
+
+    /* Icon colors */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-default);
+    }
+
+    /* Dark theme icon colors */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary) .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-primary-default-dark,
+            var(--dg-icon-button-icon-color-primary-default)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary) .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-secondary-default-dark,
+            var(--dg-icon-button-icon-color-secondary-default)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary) .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-tertiary-default-dark,
+            var(--dg-icon-button-icon-color-tertiary-default)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.dark:not(.variant-quaternary) .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-standard-default-dark,
+            var(--dg-icon-button-icon-color-standard-default)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary) .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-rounded-default-dark,
+            var(--dg-icon-button-icon-color-rounded-default)
+        );
+    }
+
+    /* Icon color on hover */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary:hover .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary:hover .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary:hover .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary:hover .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked:hover .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded:hover .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-hover);
+    }
+
+    /* Dark theme icon color on hover */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary):hover .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-primary-hover-dark,
+            var(--dg-icon-button-icon-color-primary-hover)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary):hover .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-secondary-hover-dark,
+            var(--dg-icon-button-icon-color-secondary-hover)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary):hover .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-tertiary-hover-dark,
+            var(--dg-icon-button-icon-color-tertiary-hover)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.dark:not(.variant-quaternary):hover .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-standard-hover-dark,
+            var(--dg-icon-button-icon-color-standard-hover)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary):hover .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-rounded-hover-dark,
+            var(--dg-icon-button-icon-color-rounded-hover)
+        );
+    }
+
+    /* Icon color on focus-visible */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary:focus-visible .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary:focus-visible .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary:focus-visible .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary:focus-visible .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked:focus-visible .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded:focus-visible .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-focus);
+    }
+
+    /* Dark theme icon color on focus-visible */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary):focus-visible .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-primary-focus-dark,
+            var(--dg-icon-button-icon-color-primary-focus)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy'])
+        .button.variant-secondary.dark:not(.variant-quaternary):focus-visible
+        .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-secondary-focus-dark,
+            var(--dg-icon-button-icon-color-secondary-focus)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy'])
+        .button.variant-tertiary.dark:not(.variant-quaternary):focus-visible
+        .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-tertiary-focus-dark,
+            var(--dg-icon-button-icon-color-tertiary-focus)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.dark:not(.variant-quaternary):focus-visible .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-standard-focus-dark,
+            var(--dg-icon-button-icon-color-standard-focus)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary):focus-visible .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-rounded-focus-dark,
+            var(--dg-icon-button-icon-color-rounded-focus)
+        );
+    }
+
+    /* Icon color on active */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary:active .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary:active .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary:active .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary:active .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked:active .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded:active .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-pressed);
+    }
+
+    /* Dark theme icon color on active */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary):active .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-primary-pressed-dark,
+            var(--dg-icon-button-icon-color-primary-pressed)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary):active .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-secondary-pressed-dark,
+            var(--dg-icon-button-icon-color-secondary-pressed)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary):active .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-tertiary-pressed-dark,
+            var(--dg-icon-button-icon-color-tertiary-pressed)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.dark:not(.variant-quaternary):active .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-standard-pressed-dark,
+            var(--dg-icon-button-icon-color-standard-pressed)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary):active .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-rounded-pressed-dark,
+            var(--dg-icon-button-icon-color-rounded-pressed)
+        );
+    }
+
+    /* Icon color on disabled */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.disabled .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.disabled .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.disabled .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-quaternary.disabled .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.disabled .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.disabled .icon {
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-disabled);
+    }
+
+    /* Dark theme icon color on disabled */
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-primary.dark:not(.variant-quaternary).disabled .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-primary-disabled-dark,
+            var(--dg-icon-button-icon-color-primary-disabled)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-secondary.dark:not(.variant-quaternary).disabled .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-secondary-disabled-dark,
+            var(--dg-icon-button-icon-color-secondary-disabled)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-tertiary.dark:not(.variant-quaternary).disabled .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-tertiary-disabled-dark,
+            var(--dg-icon-button-icon-color-tertiary-disabled)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-naked.dark:not(.variant-quaternary).disabled .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-standard-disabled-dark,
+            var(--dg-icon-button-icon-color-standard-disabled)
+        );
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.variant-rounded.dark:not(.variant-quaternary).disabled .icon {
+        --ui-kit-icon-color: var(
+            --dg-icon-button-icon-color-rounded-disabled-dark,
+            var(--dg-icon-button-icon-color-rounded-disabled)
+        );
+    }
+
+    /* Size variations */
+    :host([data-ui-kit-theme='seat-legacy']) .button.large {
+        height: 3rem;
+        width: 3rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.medium {
+        height: 2.5rem;
+        width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.small {
+        height: 2rem;
+        width: 2rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.xsmall {
+        height: 1.25rem;
+        width: 1.25rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .button.large .icon {
+        --ui-kit-icon-height: 3rem;
+        --ui-kit-icon-width: 3rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.medium .icon {
+        --ui-kit-icon-height: 2.5rem;
+        --ui-kit-icon-width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.small .icon {
+        --ui-kit-icon-height: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .button.xsmall .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+
+    /* tag-custom: wrapper becomes layout-transparent, slotted native element is styled */
+    :host([data-ui-kit-theme='seat-legacy']) .button.tag-custom {
+        display: contents;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom ::slotted(*) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        text-decoration: none;
+        padding: 0;
+        outline-style: solid;
+        outline-color: transparent;
+        border-style: solid;
+        border-width: var(--dg-icon-button-border-width-base);
+        border-radius: var(--dg-icon-button-border-radius-base);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.small ::slotted(*) {
+        height: 2rem;
+        width: 2rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.medium ::slotted(*) {
+        height: 2.5rem;
+        width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.large ::slotted(*) {
+        height: 3rem;
+        width: 3rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.xsmall ::slotted(*) {
+        height: 1.25rem;
+        width: 1.25rem;
+    }
+
+    /* Variant base styles */
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-primary ::slotted(*) {
+        border-color: transparent;
+        background: var(--dg-icon-button-bg-color-primary-default);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-secondary ::slotted(*) {
+        border-color: var(--dg-icon-button-border-color-secondary-default);
+        background: transparent;
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-tertiary ::slotted(*) {
+        border-color: transparent;
+        background: var(--dg-icon-button-bg-color-tertiary-default);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-quaternary ::slotted(*) {
+        border-color: transparent;
+        background: var(--dg-icon-button-bg-color-quaternary-default);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-naked ::slotted(*) {
+        border-color: transparent;
+        background: var(--dg-icon-button-bg-color-standard-default);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-rounded ::slotted(*) {
+        border-color: transparent;
+        background: var(--dg-icon-button-bg-color-rounded-default);
+        border-radius: var(--dg-border-radius-full);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-default);
+    }
+
+    /* Hover */
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-primary:hover ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-primary-hover);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-secondary:hover ::slotted(*) {
+        border-color: var(--dg-icon-button-border-color-secondary-hover);
+        border-width: var(--dg-icon-button-border-width-hover);
+        background: transparent;
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-tertiary:hover ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-tertiary-hover);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-quaternary:hover ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-quaternary-hover);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-naked:hover ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-standard-hover);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-rounded:hover ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-rounded-hover);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-hover);
+    }
+
+    /* Focus */
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom ::slotted(*:focus-visible) {
+        outline-offset: 0.125rem;
+        outline-color: var(--dg-icon-button-outline-color-focus);
+        outline-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-primary:focus-within ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-primary-focus);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-secondary:focus-within ::slotted(*) {
+        border-color: var(--dg-icon-button-border-color-secondary-focus);
+        border-width: var(--dg-icon-button-border-width-hover);
+        background: transparent;
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-tertiary:focus-within ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-tertiary-focus);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-quaternary:focus-within ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-quaternary-focus);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-naked:focus-within ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-standard-focus);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-rounded:focus-within ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-rounded-focus);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-focus);
+    }
+
+    /* Active */
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-primary:active ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-primary-pressed);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-secondary:active ::slotted(*) {
+        border-color: var(--dg-icon-button-border-color-secondary-pressed);
+        border-width: var(--dg-icon-button-border-width-hover);
+        background: transparent;
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-tertiary:active ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-tertiary-pressed);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-quaternary:active ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-quaternary-pressed);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-naked:active ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-standard-pressed);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-pressed);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-rounded:active ::slotted(*) {
+        background: var(--dg-icon-button-bg-color-rounded-pressed);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-pressed);
+    }
+
+    /* Disabled */
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-primary.disabled ::slotted(*),
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-primary ::slotted(*:disabled) {
+        background: var(--dg-icon-button-bg-color-primary-disabled);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-primary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-secondary.disabled ::slotted(*),
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-secondary ::slotted(*:disabled) {
+        border-color: var(--dg-icon-button-border-color-secondary-disabled);
+        background: transparent;
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-secondary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-tertiary.disabled ::slotted(*),
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-tertiary ::slotted(*:disabled) {
+        background: var(--dg-icon-button-bg-color-tertiary-disabled);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-tertiary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-quaternary.disabled ::slotted(*),
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-quaternary ::slotted(*:disabled) {
+        background: var(--dg-icon-button-bg-color-quaternary-disabled);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-quaternary-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-naked.disabled ::slotted(*),
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-naked ::slotted(*:disabled) {
+        background: var(--dg-icon-button-bg-color-standard-disabled);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-standard-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-rounded.disabled ::slotted(*),
+    :host([data-ui-kit-theme='seat-legacy']) .tag-custom.variant-rounded ::slotted(*:disabled) {
+        background: var(--dg-icon-button-bg-color-rounded-disabled);
+        --ui-kit-icon-color: var(--dg-icon-button-icon-color-rounded-disabled);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };