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

package/dist-react/cjs/components/ds-icon-button/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,534 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra-diagonal']) .button.custom {
+        --ui-kit-private-button-custom-bg-hover: color-mix(in srgb, var(--ui-kit-private-button-custom-bg) 80%, black);
+        --ui-kit-private-button-custom-bg-pressed: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-bg) 65%,
+            black
+        );
+        --ui-kit-private-button-custom-bg-disabled: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-bg) 40%,
+            transparent
+        );
+        --ui-kit-private-button-custom-color-hover: var(--ui-kit-private-button-custom-color);
+        --ui-kit-private-button-custom-color-pressed: var(--ui-kit-private-button-custom-color);
+        --ui-kit-private-button-custom-color-disabled: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-color) 40%,
+            transparent
+        );
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom) {
+        border-width: var(--ds-icon-button-border-width-base, 1px);
+        border-style: solid;
+        outline-color: transparent;
+        border-radius: var(--ds-icon-button-border-radius-base, 6px);
+        background: var(--ui-kit-private-button-custom-bg, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+        --ui-kit-icon-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).xlarge {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).large {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).medium {
+        height: var(--ds-sizing-40, 40px);
+        width: var(--ds-sizing-40, 40px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).small {
+        height: var(--ds-sizing-36, 36px);
+        width: var(--ds-sizing-36, 36px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-default,
+            linear-gradient(47deg, #fafafa 0%, #fafafa 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-default, #09090b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-default,
+            linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-default,
+            linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-default, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-default, #fafafa);
+        border-radius: var(--ds-border-radius-full, 100000px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-hover,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-hover, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-hover,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-hover, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-hover,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-hover, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked:hover {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-hover, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom):hover {
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-focus,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-focus, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-focus,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-focus, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary:focus-visible {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-focus,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-focus, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked:focus-visible {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-focus, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded:focus-visible {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom):focus-visible {
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-icon-button-outline-color-focus, #6b8494);
+        outline-width: var(--ds-border-width-l, 2px);
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-pressed,
+            linear-gradient(47deg, #aeaeb7 0%, #aeaeb7 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-pressed, #18181b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-pressed,
+            linear-gradient(179deg, #fafafa4d 0%, #c3c3cb26 95%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-pressed, #aeaeb7);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-pressed,
+            linear-gradient(47deg, #6c472f 0%, #4e3322 45%, #392619 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-pressed, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked:active {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom):active {
+        background: var(--ui-kit-private-button-custom-bg-pressed, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-primary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-primary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-secondary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-secondary-disabled, #09090b4d);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-tertiary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-quaternary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-quaternary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-naked.disabled {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).variant-rounded.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:not(.tag-custom).disabled {
+        background: var(--ui-kit-private-button-custom-bg-disabled, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .button.tag-custom {
+        display: contents;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom ::slotted(*) {
+        cursor: pointer;
+        justify-content: center;
+        outline-style: solid;
+        display: inline-flex;
+        text-decoration: none;
+        align-items: center;
+        box-sizing: border-box;
+        border-width: var(--ds-icon-button-border-width-base, 1px);
+        border-style: solid;
+        outline-color: transparent;
+        border-radius: var(--ds-icon-button-border-radius-base, 6px);
+        background: var(--ui-kit-private-button-custom-bg, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+        --ui-kit-icon-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-default,
+            linear-gradient(47deg, #fafafa 0%, #fafafa 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-default, #09090b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-default,
+            linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-default,
+            linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-default, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-hover,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-hover, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-hover,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-hover, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-hover,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-hover, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked:hover {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-hover, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom:hover ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-focus,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-focus, #0e0e10);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-focus,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-focus, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary:focus-within {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-focus,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-focus, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked:focus-within {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-focus, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded:focus-within {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom ::slotted(*:focus-visible) {
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-icon-button-outline-color-focus, #6b8494);
+        outline-width: var(--ds-border-width-l, 2px);
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-pressed,
+            linear-gradient(47deg, #aeaeb7 0%, #aeaeb7 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-pressed, #18181b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-pressed,
+            linear-gradient(179deg, #fafafa4d 0%, #c3c3cb26 95%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-pressed, #aeaeb7);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-pressed,
+            linear-gradient(47deg, #6c472f 0%, #4e3322 45%, #392619 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-pressed, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked:active {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom:active ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-pressed, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-primary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-primary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-secondary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-secondary-disabled, #09090b4d);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-tertiary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-quaternary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-quaternary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-naked.disabled {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.variant-rounded.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom ::slotted(*:disabled),
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.disabled ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-disabled, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.xlarge ::slotted(*) {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.large ::slotted(*) {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.medium ::slotted(*) {
+        height: var(--ds-sizing-40, 40px);
+        width: var(--ds-sizing-40, 40px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .tag-custom.small ::slotted(*) {
+        height: var(--ds-sizing-36, 36px);
+        width: var(--ds-sizing-36, 36px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .xlarge ::slotted(*) {
+        height: 2rem;
+        --ui-kit-icon-height: 2rem;
+        width: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(*) {
+        height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(*) {
+        height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .small ::slotted(*) {
+        height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .xlarge .icon {
+        --ui-kit-icon-height: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .icon {
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .small .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+`;exports.cupraDiagonalStyles=t;