/* node_modules/@taiga-ui/core/styles/taiga-ui-theme.less */ :root, :host { --tui-font-heading: "Manrope", -apple-system, "BlinkMacSystemFont", system-ui, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif; --tui-font-text: "Manrope", -apple-system, "BlinkMacSystemFont", system-ui, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif; --tui-font-offset: 0rem; --tui-font-heading-1: bold calc(var(--tui-font-offset) + 3.125rem) / 3.5rem var(--tui-font-heading); --tui-font-heading-2: bold calc(var(--tui-font-offset) + 2.75rem) / 3rem var(--tui-font-heading); --tui-font-heading-3: bold calc(var(--tui-font-offset) + 2.25rem) / 2.5rem var(--tui-font-heading); --tui-font-heading-4: bold calc(var(--tui-font-offset) + 1.75rem) / 2rem var(--tui-font-heading); --tui-font-heading-5: bold calc(var(--tui-font-offset) + 1.5rem) / 1.75rem var(--tui-font-heading); --tui-font-heading-6: bold calc(var(--tui-font-offset) + 1.25rem) / 1.5rem var(--tui-font-heading); --tui-font-text-xl: normal calc(var(--tui-font-offset) + 1.1875rem) / 1.75rem var(--tui-font-text); --tui-font-text-l: normal calc(var(--tui-font-offset) + 1.0625rem) / 1.75rem var(--tui-font-text); --tui-font-text-m: normal calc(var(--tui-font-offset) + 1rem) / 1.5rem var(--tui-font-text); --tui-font-text-s: normal calc(var(--tui-font-offset) + 0.8125rem) / 1.25rem var(--tui-font-text); --tui-font-text-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / 1rem var(--tui-font-text); --tui-font-text-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / 1.5rem var(--tui-font-text); --tui-font-text-ui-m: normal calc(var(--tui-font-offset) + 1rem) / 1.25rem var(--tui-font-text); --tui-font-text-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / 1rem var(--tui-font-text); --tui-font-text-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / 0.8125rem var(--tui-font-text); --tui-radius-xs: 0.25rem; --tui-radius-s: 0.5rem; --tui-radius-m: 0.625rem; --tui-radius-l: 0.75rem; --tui-radius-xl: 1.5rem; --tui-height-xs: 1.5rem; --tui-height-s: 2rem; --tui-height-m: 2.75rem; --tui-height-l: 3.5rem; --tui-padding-s: 0.625rem; --tui-padding-m: 0.75rem; --tui-padding-l: 1rem; --tui-duration: 0.3s; --tui-disabled-opacity: 0.56; } @media screen { [tuiTheme=dark] { color-scheme: dark; --tui-background-base: #222; --tui-background-base-alt: #333; --tui-background-neutral-1: rgba(255, 255, 255, 0.08); --tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16); --tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24); --tui-background-neutral-2: rgba(255, 255, 255, 0.24); --tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32); --tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4); --tui-background-accent-opposite: #fff; --tui-background-accent-opposite-hover: #f6f6f6; --tui-background-accent-opposite-pressed: #ededed; --tui-background-elevation-1: #292929; --tui-background-elevation-2: #2f2f2f; --tui-background-elevation-3: #373737; --tui-service-autofill-background: #554a2a; --tui-border-normal: rgba(255, 255, 255, 0.14); --tui-border-hover: rgba(255, 255, 255, 0.6); --tui-border-focus: rgba(255, 255, 255, 0.64); --tui-status-negative: #ff8c67; --tui-status-negative-pale: rgba(244, 87, 37, 0.32); --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.4); --tui-status-positive: #4ac99b; --tui-status-positive-pale: rgba(74, 201, 155, 0.32); --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4); --tui-status-warning: #ffc700; --tui-status-warning-pale: rgba(255, 199, 0, 0.32); --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4); --tui-status-info: #70b6f6; --tui-status-info-pale: rgba(112, 182, 246, 0.32); --tui-status-info-pale-hover: rgba(112, 182, 246, 0.4); --tui-status-neutral: #959ba4; --tui-text-primary: #ffffff; --tui-text-secondary: rgba(255, 255, 255, 0.72); --tui-text-tertiary: rgba(255, 255, 255, 0.6); --tui-text-action: #6788ff; --tui-text-action-hover: #526ed3; --tui-text-positive: #44c596; --tui-text-positive-hover: #3aa981; --tui-text-negative: #ff8c67; --tui-text-negative-hover: #bb593a; } [tuiTheme=light] { color-scheme: light; } :root, :host, [tuiTheme=light] { --tui-background-base: #fff; --tui-background-base-alt: #f6f6f6; --tui-background-neutral-1: rgba(0, 0, 0, 0.04); --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08); --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12); --tui-background-neutral-2: rgba(0, 0, 0, 0.08); --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1); --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14); --tui-background-accent-1: #526ed3; --tui-background-accent-1-hover: #6c86e2; --tui-background-accent-1-pressed: #314692; --tui-background-accent-2: #ff7043; --tui-background-accent-2-hover: #ff9a94; --tui-background-accent-2-pressed: #e7716a; --tui-background-accent-opposite: #000; --tui-background-accent-opposite-hover: #333; --tui-background-accent-opposite-pressed: #808080; --tui-background-elevation-1: #fff; --tui-background-elevation-2: #fff; --tui-background-elevation-3: #fff; --tui-service-autofill-background: #fff5c0; --tui-service-selection-background: rgba(112, 182, 246, 0.12); --tui-service-backdrop: rgba(0, 0, 0, 0.75); --tui-border-normal: rgba(0, 0, 0, 0.1); --tui-border-hover: rgba(0, 0, 0, 0.16); --tui-border-focus: rgba(51, 51, 51, 0.64); --tui-status-negative: #f45725; --tui-status-negative-pale: rgba(244, 87, 37, 0.12); --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24); --tui-status-positive: #4ac99b; --tui-status-positive-pale: rgba(74, 201, 155, 0.12); --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24); --tui-status-warning: #ffc700; --tui-status-warning-pale: rgba(255, 199, 0, 0.12); --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24); --tui-status-info: #70b6f6; --tui-status-info-pale: rgba(112, 182, 246, 0.12); --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24); --tui-status-neutral: #79818c; --tui-text-primary: #1b1f3b; --tui-text-secondary: rgba(27, 31, 59, 0.65); --tui-text-tertiary: rgba(27, 31, 59, 0.4); --tui-text-primary-on-accent-1: #fff; --tui-text-primary-on-accent-2: #fff; --tui-text-action: #4c66c3; --tui-text-action-hover: #6c86e2; --tui-text-positive: #3aa981; --tui-text-positive-hover: #7ac5aa; --tui-text-negative: #dd4c1e; --tui-text-negative-hover: #e38163; --tui-chart-categorical-00: var(--tui-background-accent-1); --tui-chart-categorical-01: #ea97c4; --tui-chart-categorical-02: #a0c5df; --tui-chart-categorical-03: #fee797; --tui-chart-categorical-04: #b0b0b0; --tui-chart-categorical-05: #e29398; --tui-chart-categorical-06: #b8474e; --tui-chart-categorical-07: #fcc068; --tui-chart-categorical-08: #ff8a00; --tui-chart-categorical-09: #dab3f9; --tui-chart-categorical-10: #7b439e; --tui-chart-categorical-11: #8dda71; --tui-chart-categorical-12: #fcbb14; --tui-chart-categorical-13: #a8cef1; --tui-chart-categorical-14: #bd65a4; --tui-chart-categorical-15: #7fd7cc; --tui-chart-categorical-16: #2fad96; --tui-chart-categorical-17: #d4aca2; --tui-chart-categorical-18: #9d6f64; --tui-chart-categorical-19: #d2e9a2; --tui-chart-categorical-20: #aadc42; --tui-chart-categorical-21: #3682db; --tui-chart-categorical-22: #34b41f; --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14); --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12); --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18); --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2); } } @media print { :root, :host, [tuiTheme] { color-scheme: light; --tui-background-base: #fff; --tui-background-base-alt: #f6f6f6; --tui-background-neutral-1: rgba(0, 0, 0, 0.04); --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08); --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12); --tui-background-neutral-2: rgba(0, 0, 0, 0.08); --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1); --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14); --tui-background-accent-1: #526ed3; --tui-background-accent-1-hover: #6c86e2; --tui-background-accent-1-pressed: #314692; --tui-background-accent-2: #ff7043; --tui-background-accent-2-hover: #ff9a94; --tui-background-accent-2-pressed: #e7716a; --tui-background-accent-opposite: #000; --tui-background-accent-opposite-hover: #333; --tui-background-accent-opposite-pressed: #808080; --tui-background-elevation-1: #fff; --tui-background-elevation-2: #fff; --tui-background-elevation-3: #fff; --tui-service-autofill-background: #fff5c0; --tui-service-selection-background: rgba(112, 182, 246, 0.12); --tui-service-backdrop: rgba(0, 0, 0, 0.75); --tui-border-normal: rgba(0, 0, 0, 0.1); --tui-border-hover: rgba(0, 0, 0, 0.16); --tui-border-focus: rgba(51, 51, 51, 0.64); --tui-status-negative: #f45725; --tui-status-negative-pale: rgba(244, 87, 37, 0.12); --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24); --tui-status-positive: #4ac99b; --tui-status-positive-pale: rgba(74, 201, 155, 0.12); --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24); --tui-status-warning: #ffc700; --tui-status-warning-pale: rgba(255, 199, 0, 0.12); --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24); --tui-status-info: #70b6f6; --tui-status-info-pale: rgba(112, 182, 246, 0.12); --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24); --tui-status-neutral: #79818c; --tui-text-primary: #1b1f3b; --tui-text-secondary: rgba(27, 31, 59, 0.65); --tui-text-tertiary: rgba(27, 31, 59, 0.4); --tui-text-primary-on-accent-1: #fff; --tui-text-primary-on-accent-2: #fff; --tui-text-action: #4c66c3; --tui-text-action-hover: #6c86e2; --tui-text-positive: #3aa981; --tui-text-positive-hover: #7ac5aa; --tui-text-negative: #dd4c1e; --tui-text-negative-hover: #e38163; --tui-chart-categorical-00: var(--tui-background-accent-1); --tui-chart-categorical-01: #ea97c4; --tui-chart-categorical-02: #a0c5df; --tui-chart-categorical-03: #fee797; --tui-chart-categorical-04: #b0b0b0; --tui-chart-categorical-05: #e29398; --tui-chart-categorical-06: #b8474e; --tui-chart-categorical-07: #fcc068; --tui-chart-categorical-08: #ff8a00; --tui-chart-categorical-09: #dab3f9; --tui-chart-categorical-10: #7b439e; --tui-chart-categorical-11: #8dda71; --tui-chart-categorical-12: #fcbb14; --tui-chart-categorical-13: #a8cef1; --tui-chart-categorical-14: #bd65a4; --tui-chart-categorical-15: #7fd7cc; --tui-chart-categorical-16: #2fad96; --tui-chart-categorical-17: #d4aca2; --tui-chart-categorical-18: #9d6f64; --tui-chart-categorical-19: #d2e9a2; --tui-chart-categorical-20: #aadc42; --tui-chart-categorical-21: #3682db; --tui-chart-categorical-22: #34b41f; --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14); --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12); --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18); --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2); } } [tuiAppearance][data-appearance=accent] { background: var(--tui-background-accent-2); color: var(--tui-text-primary-on-accent-2); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=accent]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-2-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=accent]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-2-hover); } } [tuiAppearance][data-appearance=accent][data-state=hover] { background: var(--tui-background-accent-2-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=accent][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=accent][tuiWrapper][data-state=hover] { background: var(--tui-background-accent-2-hover); } } [tuiAppearance][data-appearance=accent]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-2-pressed); } [tuiAppearance][data-appearance=accent]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-2-pressed); } [tuiAppearance][data-appearance=accent][data-state=active] { background: var(--tui-background-accent-2-pressed); } [tuiAppearance][data-appearance=accent][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=accent][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=accent][tuiWrapper][data-state=active]:hover { background: var(--tui-background-accent-2-pressed); } [tuiAppearance][data-appearance=link] { color: var(--tui-text-action); background: transparent; } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=link]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=link]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } } [tuiAppearance][data-appearance=link][data-state=hover] { color: var(--tui-text-action-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=link][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=link][tuiWrapper][data-state=hover] { color: var(--tui-text-action-hover); } } [tuiAppearance][data-appearance=link]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=link]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=link][data-state=active] { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=link][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=link][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=link][tuiWrapper][data-state=active]:hover { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=action] { color: var(--tui-text-action); background: transparent; } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } } [tuiAppearance][data-appearance=action][data-state=hover] { color: var(--tui-text-action-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=action][tuiWrapper][data-state=hover] { color: var(--tui-text-action-hover); } } [tuiAppearance][data-appearance=action]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=action]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=action][data-state=active] { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=action][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=action][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=action][tuiWrapper][data-state=active]:hover { color: var(--tui-text-action-hover); } [tuiAppearance][data-appearance=action-destructive] { color: var(--tui-text-negative); background: transparent; } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); } } [tuiAppearance][data-appearance=action-destructive][data-state=hover] { color: var(--tui-text-negative-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action-destructive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=action-destructive][tuiWrapper][data-state=hover] { color: var(--tui-text-negative-hover); } } [tuiAppearance][data-appearance=action-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); } [tuiAppearance][data-appearance=action-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); } [tuiAppearance][data-appearance=action-destructive][data-state=active] { color: var(--tui-text-negative-hover); } [tuiAppearance][data-appearance=action-destructive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=action-destructive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=action-destructive][tuiWrapper][data-state=active]:hover { color: var(--tui-text-negative-hover); } [tuiAppearance][data-appearance=action-grayscale] { color: var(--tui-text-secondary); background: transparent; } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-primary); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-primary); } } [tuiAppearance][data-appearance=action-grayscale][data-state=hover] { color: var(--tui-text-primary); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=action-grayscale][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=action-grayscale][tuiWrapper][data-state=hover] { color: var(--tui-text-primary); } } [tuiAppearance][data-appearance=action-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=action-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=action-grayscale][data-state=active] { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=action-grayscale][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=action-grayscale][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=action-grayscale][tuiWrapper][data-state=active]:hover { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=flat], [tuiAppearance][data-appearance=flat-destructive], [tuiAppearance][data-appearance=flat-grayscale] { color: var(--tui-text-action); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=flat]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=flat]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-hover); } } [tuiAppearance][data-appearance=flat][data-state=hover], [tuiAppearance][data-appearance=flat-destructive][data-state=hover], [tuiAppearance][data-appearance=flat-grayscale][data-state=hover] { background: var(--tui-background-neutral-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=flat][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=flat-destructive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=flat-grayscale][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=flat][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=flat-destructive][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=flat-grayscale][tuiWrapper][data-state=hover] { background: var(--tui-background-neutral-1-hover); } } [tuiAppearance][data-appearance=flat]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=flat]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=flat-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=flat][data-state=active], [tuiAppearance][data-appearance=flat-destructive][data-state=active], [tuiAppearance][data-appearance=flat-grayscale][data-state=active] { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=flat][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=flat-destructive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=flat-grayscale][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=flat][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=flat-destructive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=flat-grayscale][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=flat][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=flat-destructive][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=flat-grayscale][tuiWrapper][data-state=active]:hover { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=flat-destructive] { color: var(--tui-text-negative); } [tuiAppearance][data-appearance=flat-grayscale] { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=floating] { background: var(--tui-background-elevation-2); color: var(--tui-text-primary); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=floating]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=floating]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } } [tuiAppearance][data-appearance=floating][data-state=hover] { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=floating][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=hover] { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } } [tuiAppearance][data-appearance=floating]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-base-alt); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=floating]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-base-alt); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=floating][data-state=active] { background: var(--tui-background-base-alt); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=floating][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=active]:hover { background: var(--tui-background-base-alt); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=glass] { background: rgba(0, 0, 0, 0.4); color: #fff; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); --tui-border-focus: rgba(255, 255, 255, 0.64); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=glass]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: rgba(0, 0, 0, 0.48); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=glass]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: rgba(0, 0, 0, 0.48); } } [tuiAppearance][data-appearance=glass][data-state=hover] { background: rgba(0, 0, 0, 0.48); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=glass][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=glass][tuiWrapper][data-state=hover] { background: rgba(0, 0, 0, 0.48); } } [tuiAppearance][data-appearance=glass]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: rgba(0, 0, 0, 0.6); } [tuiAppearance][data-appearance=glass]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: rgba(0, 0, 0, 0.6); } [tuiAppearance][data-appearance=glass][data-state=active] { background: rgba(0, 0, 0, 0.6); } [tuiAppearance][data-appearance=glass][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=glass][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=glass][tuiWrapper][data-state=active]:hover { background: rgba(0, 0, 0, 0.6); } [tuiTheme=dark] [tuiAppearance][data-appearance=glass], [tuiTheme=dark][tuiAppearance][data-appearance=glass] { background: rgba(255, 255, 255, 0.3); } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark] [tuiAppearance][data-appearance=glass]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiTheme=dark][tuiAppearance][data-appearance=glass]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: rgba(255, 255, 255, 0.4); } } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark] [tuiAppearance][data-appearance=glass]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiTheme=dark][tuiAppearance][data-appearance=glass]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: rgba(255, 255, 255, 0.4); } } [tuiTheme=dark] [tuiAppearance][data-appearance=glass][data-state=hover], [tuiTheme=dark][tuiAppearance][data-appearance=glass][data-state=hover] { background: rgba(255, 255, 255, 0.4); } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark] [tuiAppearance][data-appearance=glass][tuiWrapper]:hover:not(._no-hover), [tuiTheme=dark][tuiAppearance][data-appearance=glass][tuiWrapper]:hover:not(._no-hover), [tuiTheme=dark] [tuiAppearance][data-appearance=glass][tuiWrapper][data-state=hover], [tuiTheme=dark][tuiAppearance][data-appearance=glass][tuiWrapper][data-state=hover] { background: rgba(255, 255, 255, 0.4); } } [tuiTheme=dark] [tuiAppearance][data-appearance=glass]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiTheme=dark][tuiAppearance][data-appearance=glass]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: rgba(255, 255, 255, 0.5); } [tuiTheme=dark] [tuiAppearance][data-appearance=glass]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiTheme=dark][tuiAppearance][data-appearance=glass]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: rgba(255, 255, 255, 0.5); } [tuiTheme=dark] [tuiAppearance][data-appearance=glass][data-state=active], [tuiTheme=dark][tuiAppearance][data-appearance=glass][data-state=active] { background: rgba(255, 255, 255, 0.5); } [tuiTheme=dark] [tuiAppearance][data-appearance=glass][tuiWrapper]:active:not(._no-active), [tuiTheme=dark][tuiAppearance][data-appearance=glass][tuiWrapper]:active:not(._no-active), [tuiTheme=dark] [tuiAppearance][data-appearance=glass][tuiWrapper][data-state=active], [tuiTheme=dark][tuiAppearance][data-appearance=glass][tuiWrapper][data-state=active], [tuiTheme=dark] [tuiAppearance][data-appearance=glass][tuiWrapper][data-state=active]:hover, [tuiTheme=dark][tuiAppearance][data-appearance=glass][tuiWrapper][data-state=active]:hover { background: rgba(255, 255, 255, 0.5); } [tuiAppearance][data-appearance=opposite] { --tui-border-focus: #979797; background: var(--tui-background-accent-opposite); color: var(--tui-background-base); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=opposite]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=opposite]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-hover); } } [tuiAppearance][data-appearance=opposite][data-state=hover] { background: var(--tui-background-accent-opposite-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=opposite][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=opposite][tuiWrapper][data-state=hover] { background: var(--tui-background-accent-opposite-hover); } } [tuiAppearance][data-appearance=opposite]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=opposite]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=opposite][data-state=active] { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=opposite][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=opposite][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=opposite][tuiWrapper][data-state=active]:hover { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=outline], [tuiAppearance][data-appearance=outline-destructive], [tuiAppearance][data-appearance=outline-grayscale], [tuiAppearance][data-appearance=whiteblock] { --t-bs: var(--tui-border-normal); color: var(--tui-text-action); box-shadow: inset 0 0 0 1px var(--t-bs); } [tuiAppearance][data-appearance=outline]:checked:not([data-mode]), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode]), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode]), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode]), [tuiAppearance][data-appearance=outline][data-mode~=checked], [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked], [tuiAppearance][data-appearance=whiteblock][data-mode~=checked] { --t-bs: var(--tui-background-accent-1); box-shadow: inset 0 0 0 2px var(--t-bs); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=outline]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bs: var(--tui-background-accent-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=outline]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bs: var(--tui-background-accent-1-hover); } } [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=outline][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][data-state=hover] { --t-bs: var(--tui-background-accent-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][tuiWrapper][data-state=hover] { --t-bs: var(--tui-background-accent-1-hover); } } [tuiAppearance][data-appearance=outline]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bs: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=outline]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bs: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=outline][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][data-state=active] { --t-bs: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline-destructive]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline-grayscale]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=whiteblock]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][tuiWrapper][data-state=active]:hover { --t-bs: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=outline]:invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-destructive]:invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-grayscale]:invalid:not([data-mode]), [tuiAppearance][data-appearance=whiteblock]:invalid:not([data-mode]), [tuiAppearance][data-appearance=outline][data-mode~=invalid], [tuiAppearance][data-appearance=outline-destructive][data-mode~=invalid], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=invalid], [tuiAppearance][data-appearance=whiteblock][data-mode~=invalid], [tuiAppearance][data-appearance=outline].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-destructive].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-grayscale].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=whiteblock].tui-invalid:not([data-mode]) { box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=outline]:checked:invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-destructive]:checked:invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-grayscale]:checked:invalid:not([data-mode]), [tuiAppearance][data-appearance=whiteblock]:checked:invalid:not([data-mode]), [tuiAppearance][data-appearance=outline][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=outline-destructive][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=outline-grayscale][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=whiteblock][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=outline]:checked.tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-destructive]:checked.tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=outline-grayscale]:checked.tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=whiteblock]:checked.tui-invalid:not([data-mode]) { box-shadow: inset 0 0 0 2px var(--tui-status-negative); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=outline]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { cursor: pointer; --t-bs: var(--tui-border-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=outline]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { cursor: pointer; --t-bs: var(--tui-border-hover); } } [tuiAppearance][data-appearance=outline][data-state=hover], [tuiAppearance][data-appearance=outline-destructive][data-state=hover], [tuiAppearance][data-appearance=outline-grayscale][data-state=hover], [tuiAppearance][data-appearance=whiteblock][data-state=hover] { cursor: pointer; --t-bs: var(--tui-border-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=outline][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline-destructive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=whiteblock][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=outline][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline-destructive][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=hover] { cursor: pointer; --t-bs: var(--tui-border-hover); } } [tuiAppearance][data-appearance=outline]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1); --t-bs: var(--tui-border-hover); } [tuiAppearance][data-appearance=outline]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=outline-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=whiteblock]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1); --t-bs: var(--tui-border-hover); } [tuiAppearance][data-appearance=outline][data-state=active], [tuiAppearance][data-appearance=outline-destructive][data-state=active], [tuiAppearance][data-appearance=outline-grayscale][data-state=active], [tuiAppearance][data-appearance=whiteblock][data-state=active] { background: var(--tui-background-neutral-1); --t-bs: var(--tui-border-hover); } [tuiAppearance][data-appearance=outline][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline-destructive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=whiteblock][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=outline][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline-destructive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=outline][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline-destructive][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=active]:hover { background: var(--tui-background-neutral-1); --t-bs: var(--tui-border-hover); } [tuiAppearance][data-appearance=outline-grayscale], [tuiAppearance][data-appearance=whiteblock] { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=outline-destructive] { color: var(--tui-text-negative); } [tuiAppearance][data-appearance=icon], [tuiAppearance][data-appearance=outline-grayscale], [tuiAppearance][data-appearance=floating], [tuiAppearance][data-appearance=whiteblock] { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=icon]::before, [tuiAppearance][data-appearance=outline-grayscale]::before, [tuiAppearance][data-appearance=floating]::before, [tuiAppearance][data-appearance=whiteblock]::before, [tuiAppearance][data-appearance=icon]::after, [tuiAppearance][data-appearance=outline-grayscale]::after, [tuiAppearance][data-appearance=floating]::after, [tuiAppearance][data-appearance=whiteblock]::after { transition-property: color, transform; color: var(--tui-text-tertiary); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=icon]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=outline-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=floating]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=icon]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=outline-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=floating]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=whiteblock]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after { color: var(--tui-text-secondary); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=icon]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=outline-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=floating]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=icon]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=outline-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=floating]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=whiteblock]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):after { color: var(--tui-text-secondary); } } [tuiAppearance][data-appearance=icon][data-state=hover]:before, [tuiAppearance][data-appearance=outline-grayscale][data-state=hover]:before, [tuiAppearance][data-appearance=floating][data-state=hover]:before, [tuiAppearance][data-appearance=whiteblock][data-state=hover]:before, [tuiAppearance][data-appearance=icon][data-state=hover]:after, [tuiAppearance][data-appearance=outline-grayscale][data-state=hover]:after, [tuiAppearance][data-appearance=floating][data-state=hover]:after, [tuiAppearance][data-appearance=whiteblock][data-state=hover]:after { color: var(--tui-text-secondary); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=icon][tuiWrapper]:hover:not(._no-hover):before, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper]:hover:not(._no-hover):before, [tuiAppearance][data-appearance=floating][tuiWrapper]:hover:not(._no-hover):before, [tuiAppearance][data-appearance=whiteblock][tuiWrapper]:hover:not(._no-hover):before, [tuiAppearance][data-appearance=icon][tuiWrapper][data-state=hover]:before, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=hover]:before, [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=hover]:before, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=hover]:before, [tuiAppearance][data-appearance=icon][tuiWrapper]:hover:not(._no-hover):after, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper]:hover:not(._no-hover):after, [tuiAppearance][data-appearance=floating][tuiWrapper]:hover:not(._no-hover):after, [tuiAppearance][data-appearance=whiteblock][tuiWrapper]:hover:not(._no-hover):after, [tuiAppearance][data-appearance=icon][tuiWrapper][data-state=hover]:after, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=hover]:after, [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=hover]:after, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=hover]:after { color: var(--tui-text-secondary); } } [tuiAppearance][data-appearance=icon]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=outline-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=floating]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=icon]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=outline-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=floating]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=whiteblock]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=icon]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=outline-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=floating]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):before, [tuiAppearance][data-appearance=icon]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=outline-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=floating]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after, [tuiAppearance][data-appearance=whiteblock]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=icon][data-state=active]:before, [tuiAppearance][data-appearance=outline-grayscale][data-state=active]:before, [tuiAppearance][data-appearance=floating][data-state=active]:before, [tuiAppearance][data-appearance=whiteblock][data-state=active]:before, [tuiAppearance][data-appearance=icon][data-state=active]:after, [tuiAppearance][data-appearance=outline-grayscale][data-state=active]:after, [tuiAppearance][data-appearance=floating][data-state=active]:after, [tuiAppearance][data-appearance=whiteblock][data-state=active]:after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=icon][tuiWrapper]:active:not(._no-active):before, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper]:active:not(._no-active):before, [tuiAppearance][data-appearance=floating][tuiWrapper]:active:not(._no-active):before, [tuiAppearance][data-appearance=whiteblock][tuiWrapper]:active:not(._no-active):before, [tuiAppearance][data-appearance=icon][tuiWrapper][data-state=active]:before, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=active]:before, [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=active]:before, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=active]:before, [tuiAppearance][data-appearance=icon][tuiWrapper][data-state=active]:hover:before, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=active]:hover:before, [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=active]:hover:before, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=active]:hover:before, [tuiAppearance][data-appearance=icon][tuiWrapper]:active:not(._no-active):after, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper]:active:not(._no-active):after, [tuiAppearance][data-appearance=floating][tuiWrapper]:active:not(._no-active):after, [tuiAppearance][data-appearance=whiteblock][tuiWrapper]:active:not(._no-active):after, [tuiAppearance][data-appearance=icon][tuiWrapper][data-state=active]:after, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=active]:after, [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=active]:after, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=active]:after, [tuiAppearance][data-appearance=icon][tuiWrapper][data-state=active]:hover:after, [tuiAppearance][data-appearance=outline-grayscale][tuiWrapper][data-state=active]:hover:after, [tuiAppearance][data-appearance=floating][tuiWrapper][data-state=active]:hover:after, [tuiAppearance][data-appearance=whiteblock][tuiWrapper][data-state=active]:hover:after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=primary] { --t-bg: var(--tui-background-accent-1); background: var(--t-bg); color: var(--tui-text-primary-on-accent-1); } [tuiAppearance][data-appearance=primary]:invalid:not([data-mode]), [tuiAppearance][data-appearance=primary][data-mode~=invalid], [tuiAppearance][data-appearance=primary].tui-invalid:not([data-mode]) { background: var(--tui-status-negative); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-accent-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-accent-1-hover); } } [tuiAppearance][data-appearance=primary][data-state=hover] { --t-bg: var(--tui-background-accent-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=primary][tuiWrapper][data-state=hover] { --t-bg: var(--tui-background-accent-1-hover); } } [tuiAppearance][data-appearance=primary]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=primary]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=primary][data-state=active] { --t-bg: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=primary][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=primary][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=primary][tuiWrapper][data-state=active]:hover { --t-bg: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=primary-destructive] { color: #fff; background: var(--tui-status-negative); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { filter: saturate(1) brightness(1.3); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { filter: saturate(1) brightness(1.3); } } [tuiAppearance][data-appearance=primary-destructive][data-state=hover] { filter: saturate(1) brightness(1.3); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary-destructive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=primary-destructive][tuiWrapper][data-state=hover] { filter: saturate(1) brightness(1.3); } } [tuiAppearance][data-appearance=primary-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { filter: saturate(0.8) brightness(1); } [tuiAppearance][data-appearance=primary-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { filter: saturate(0.8) brightness(1); } [tuiAppearance][data-appearance=primary-destructive][data-state=active] { filter: saturate(0.8) brightness(1); } [tuiAppearance][data-appearance=primary-destructive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=primary-destructive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=primary-destructive][tuiWrapper][data-state=active]:hover { filter: saturate(0.8) brightness(1); } [tuiAppearance][data-appearance=primary-grayscale] { --tui-border-focus: #979797; background: var(--tui-background-accent-opposite); color: var(--tui-background-base); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-hover); } } [tuiAppearance][data-appearance=primary-grayscale][data-state=hover] { background: var(--tui-background-accent-opposite-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=primary-grayscale][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=primary-grayscale][tuiWrapper][data-state=hover] { background: var(--tui-background-accent-opposite-hover); } } [tuiAppearance][data-appearance=primary-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=primary-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=primary-grayscale][data-state=active] { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=primary-grayscale][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=primary-grayscale][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=primary-grayscale][tuiWrapper][data-state=active]:hover { background: var(--tui-background-accent-opposite-pressed); } [tuiAppearance][data-appearance=secondary], [tuiAppearance][data-appearance=secondary-destructive], [tuiAppearance][data-appearance=secondary-grayscale], [tuiAppearance][data-appearance=destructive] { background: var(--tui-background-neutral-1); color: var(--tui-text-action); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-hover); } } [tuiAppearance][data-appearance=secondary][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-state=hover], [tuiAppearance][data-appearance=destructive][data-state=hover] { background: var(--tui-background-neutral-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][tuiWrapper][data-state=hover] { background: var(--tui-background-neutral-1-hover); } } [tuiAppearance][data-appearance=secondary]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=secondary]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=secondary][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-state=active], [tuiAppearance][data-appearance=destructive][data-state=active] { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=secondary][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][tuiWrapper][data-state=active]:hover { background: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]), [tuiAppearance][data-appearance=secondary][data-mode~=checked], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked], [tuiAppearance][data-appearance=destructive][data-mode~=checked], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]) { background: var(--tui-background-accent-1); color: var(--tui-text-primary-on-accent-1); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-background-accent-1-hover); } } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-state=hover] { background: var(--tui-background-accent-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][data-mode~=checked][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=hover] { background: var(--tui-background-accent-1-hover); } } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-state=active] { background: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][data-mode~=checked][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][data-mode~=checked][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[tuiWrapper][data-state=active]:hover { background: var(--tui-background-accent-1-pressed); } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]) { background: var(--tui-status-negative); color: #fff; } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-status-negative); color: #fff; } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background: var(--tui-status-negative); color: #fff; } } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=hover] { background: var(--tui-status-negative); color: #fff; } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover] { background: var(--tui-status-negative); color: #fff; } } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-status-negative); color: #fff; } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { background: var(--tui-status-negative); color: #fff; } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[data-state=active] { background: var(--tui-status-negative); color: #fff; } [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][data-mode~=checked]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]):invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive]:checked:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][data-mode~=checked][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode])[data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive]:checked:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][data-mode~=checked].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][type=checkbox]:indeterminate:not([data-mode]).tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover { background: var(--tui-status-negative); color: #fff; } [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary][data-mode~=invalid], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid], [tuiAppearance][data-appearance=destructive][data-mode~=invalid], [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode]), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode]) { color: var(--tui-text-negative); background: var(--tui-status-negative-pale); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } } [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=invalid][data-state=hover], [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[data-state=hover], [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[data-state=hover] { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive][data-mode~=invalid][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive][data-mode~=invalid][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[tuiWrapper][data-state=hover] { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } } [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive][data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=invalid][data-state=active], [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[data-state=active], [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[data-state=active] { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive][data-mode~=invalid][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive][data-mode~=invalid][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[tuiWrapper][data-state=active], [tuiAppearance][data-appearance=secondary]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive]:invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive][data-mode~=invalid][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-destructive].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=secondary-grayscale].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=destructive].tui-invalid:not([data-mode])[tuiWrapper][data-state=active]:hover { color: var(--tui-text-negative-hover); background: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=secondary-destructive], [tuiAppearance][data-appearance=destructive] { color: var(--tui-text-negative); } [tuiAppearance][data-appearance=secondary-grayscale] { color: var(--tui-text-primary); } input[type=checkbox][data-appearance=secondary], input[type=radio][data-appearance=secondary] { --tui-background-neutral-1: var(--tui-background-neutral-2); --tui-background-neutral-1-hover: var(--tui-background-neutral-2-hover); --tui-background-neutral-1-pressed: var(--tui-background-neutral-2-pressed); } [tuiAppearance][data-appearance=error], [tuiAppearance][data-appearance=success], [tuiAppearance][data-appearance=negative], [tuiAppearance][data-appearance=positive], [tuiAppearance][data-appearance=warning], [tuiAppearance][data-appearance=info], [tuiAppearance][data-appearance=neutral] { background: var(--t-bg); color: var(--tui-text-primary); } [tuiAppearance][data-appearance=error]:checked:not([data-mode]), [tuiAppearance][data-appearance=success]:checked:not([data-mode]), [tuiAppearance][data-appearance=negative]:checked:not([data-mode]), [tuiAppearance][data-appearance=positive]:checked:not([data-mode]), [tuiAppearance][data-appearance=warning]:checked:not([data-mode]), [tuiAppearance][data-appearance=info]:checked:not([data-mode]), [tuiAppearance][data-appearance=neutral]:checked:not([data-mode]), [tuiAppearance][data-appearance=error][data-mode~=checked], [tuiAppearance][data-appearance=success][data-mode~=checked], [tuiAppearance][data-appearance=negative][data-mode~=checked], [tuiAppearance][data-appearance=positive][data-mode~=checked], [tuiAppearance][data-appearance=warning][data-mode~=checked], [tuiAppearance][data-appearance=info][data-mode~=checked], [tuiAppearance][data-appearance=neutral][data-mode~=checked] { color: #fff; } [tuiAppearance][data-appearance=error], [tuiAppearance][data-appearance=negative] { --t-bg: var(--tui-status-negative-pale); } [tuiAppearance][data-appearance=error]::before, [tuiAppearance][data-appearance=negative]::before, [tuiAppearance][data-appearance=error]::after, [tuiAppearance][data-appearance=negative]::after { color: var(--tui-status-negative); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=error]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=negative]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-negative-pale-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=error]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=negative]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-negative-pale-hover); } } [tuiAppearance][data-appearance=error][data-state=hover], [tuiAppearance][data-appearance=negative][data-state=hover] { --t-bg: var(--tui-status-negative-pale-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=error][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=negative][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=error][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=negative][tuiWrapper][data-state=hover] { --t-bg: var(--tui-status-negative-pale-hover); } } [tuiAppearance][data-appearance=error]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=negative]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=error]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=negative]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=error][data-state=active], [tuiAppearance][data-appearance=negative][data-state=active] { --t-bg: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=error][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=negative][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=error][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=negative][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=error][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=negative][tuiWrapper][data-state=active]:hover { --t-bg: var(--tui-status-negative-pale-hover); } [tuiAppearance][data-appearance=error]:checked:not([data-mode]), [tuiAppearance][data-appearance=negative]:checked:not([data-mode]), [tuiAppearance][data-appearance=error][data-mode~=checked], [tuiAppearance][data-appearance=negative][data-mode~=checked] { background: var(--tui-status-negative); } [tuiAppearance][data-appearance=success], [tuiAppearance][data-appearance=positive] { --t-bg: var(--tui-status-positive-pale); } [tuiAppearance][data-appearance=success]::before, [tuiAppearance][data-appearance=positive]::before, [tuiAppearance][data-appearance=success]::after, [tuiAppearance][data-appearance=positive]::after { color: var(--tui-status-positive); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=success]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=positive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-positive-pale-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=success]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=positive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-positive-pale-hover); } } [tuiAppearance][data-appearance=success][data-state=hover], [tuiAppearance][data-appearance=positive][data-state=hover] { --t-bg: var(--tui-status-positive-pale-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=success][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=positive][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=success][tuiWrapper][data-state=hover], [tuiAppearance][data-appearance=positive][tuiWrapper][data-state=hover] { --t-bg: var(--tui-status-positive-pale-hover); } } [tuiAppearance][data-appearance=success]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=positive]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-positive-pale-hover); } [tuiAppearance][data-appearance=success]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]), [tuiAppearance][data-appearance=positive]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-positive-pale-hover); } [tuiAppearance][data-appearance=success][data-state=active], [tuiAppearance][data-appearance=positive][data-state=active] { --t-bg: var(--tui-status-positive-pale-hover); } [tuiAppearance][data-appearance=success][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=positive][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=success][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=positive][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=success][tuiWrapper][data-state=active]:hover, [tuiAppearance][data-appearance=positive][tuiWrapper][data-state=active]:hover { --t-bg: var(--tui-status-positive-pale-hover); } [tuiAppearance][data-appearance=success]:checked:not([data-mode]), [tuiAppearance][data-appearance=positive]:checked:not([data-mode]), [tuiAppearance][data-appearance=success][data-mode~=checked], [tuiAppearance][data-appearance=positive][data-mode~=checked] { background: var(--tui-status-positive); } [tuiAppearance][data-appearance=warning] { --t-bg: var(--tui-status-warning-pale); } [tuiAppearance][data-appearance=warning]::before, [tuiAppearance][data-appearance=warning]::after { color: var(--tui-status-warning); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=warning]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-warning-pale-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=warning]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-warning-pale-hover); } } [tuiAppearance][data-appearance=warning][data-state=hover] { --t-bg: var(--tui-status-warning-pale-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=warning][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=warning][tuiWrapper][data-state=hover] { --t-bg: var(--tui-status-warning-pale-hover); } } [tuiAppearance][data-appearance=warning]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-warning-pale-hover); } [tuiAppearance][data-appearance=warning]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-warning-pale-hover); } [tuiAppearance][data-appearance=warning][data-state=active] { --t-bg: var(--tui-status-warning-pale-hover); } [tuiAppearance][data-appearance=warning][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=warning][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=warning][tuiWrapper][data-state=active]:hover { --t-bg: var(--tui-status-warning-pale-hover); } [tuiAppearance][data-appearance=warning]:checked:not([data-mode]), [tuiAppearance][data-appearance=warning][data-mode~=checked] { background: var(--tui-status-warning); } [tuiAppearance][data-appearance=info] { --t-bg: var(--tui-status-info-pale); } [tuiAppearance][data-appearance=info]::before, [tuiAppearance][data-appearance=info]::after { color: var(--tui-status-info); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=info]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-info-pale-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=info]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-info-pale-hover); } } [tuiAppearance][data-appearance=info][data-state=hover] { --t-bg: var(--tui-status-info-pale-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=info][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=info][tuiWrapper][data-state=hover] { --t-bg: var(--tui-status-info-pale-hover); } } [tuiAppearance][data-appearance=info]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-info-pale-hover); } [tuiAppearance][data-appearance=info]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-status-info-pale-hover); } [tuiAppearance][data-appearance=info][data-state=active] { --t-bg: var(--tui-status-info-pale-hover); } [tuiAppearance][data-appearance=info][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=info][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=info][tuiWrapper][data-state=active]:hover { --t-bg: var(--tui-status-info-pale-hover); } [tuiAppearance][data-appearance=info]:checked:not([data-mode]), [tuiAppearance][data-appearance=info][data-mode~=checked] { background: var(--tui-status-info); } [tuiAppearance][data-appearance=neutral] { --t-bg: var(--tui-background-neutral-1); } [tuiAppearance][data-appearance=neutral]::before, [tuiAppearance][data-appearance=neutral]::after { color: var(--tui-status-neutral); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=neutral]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-neutral-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=neutral]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-neutral-1-hover); } } [tuiAppearance][data-appearance=neutral][data-state=hover] { --t-bg: var(--tui-background-neutral-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=neutral][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=neutral][tuiWrapper][data-state=hover] { --t-bg: var(--tui-background-neutral-1-hover); } } [tuiAppearance][data-appearance=neutral]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=neutral]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]) { --t-bg: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=neutral][data-state=active] { --t-bg: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=neutral][tuiWrapper]:active:not(._no-active), [tuiAppearance][data-appearance=neutral][tuiWrapper][data-state=active], [tuiAppearance][data-appearance=neutral][tuiWrapper][data-state=active]:hover { --t-bg: var(--tui-background-neutral-1-pressed); } [tuiAppearance][data-appearance=neutral]:checked:not([data-mode]), [tuiAppearance][data-appearance=neutral][data-mode~=checked] { background: var(--tui-status-neutral); } [tuiAppearance][data-appearance=table]:not([tuiWrapper]) { content: ""; position: fixed; top: -1px; bottom: -1px; left: -1px; right: -1px; inline-size: auto; block-size: auto; border-radius: 0; background: transparent; border: none; outline: none; border-block-end: calc(var(--t-row-height) - var(--t-height)) solid transparent; } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):not(._empty) { color: var(--tui-text-primary); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=table]:not([tuiWrapper]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false] { background-color: var(--tui-background-neutral-1); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=table]:not([tuiWrapper]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false] { background-color: var(--tui-background-neutral-1); } } [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-state=hover][data-focus=false] { background-color: var(--tui-background-neutral-1); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=table]:not([tuiWrapper])[tuiWrapper]:hover:not(._no-hover)[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[tuiWrapper][data-state=hover][data-focus=false] { background-color: var(--tui-background-neutral-1); } } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):focus-visible:not([data-focus=false]) { outline-offset: -0.125rem; outline: 0.125rem solid var(--tui-border-focus); } [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-focus=true] { outline-offset: -0.125rem; outline: 0.125rem solid var(--tui-border-focus); } [tuiAppearance][data-appearance=table]:not([tuiWrapper])[tuiWrapper]:not(._focused):has(:focus-visible), [tuiAppearance][data-appearance=table]:not([tuiWrapper])[tuiWrapper]._focused { outline-offset: -0.125rem; outline: 0.125rem solid var(--tui-border-focus); } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode]), [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode]) { background-origin: border-box; background-position: top right; background-repeat: no-repeat; background-image: linear-gradient( to top right, transparent 0% 50%, var(--tui-status-negative) 50% 100%); background-size: 0.5rem 0.5rem; } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[data-focus=false] { background-color: var(--tui-status-negative-pale); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode]):matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false] { background-color: var(--tui-status-negative-pale-hover); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode]):is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state])[data-focus=false] { background-color: var(--tui-status-negative-pale-hover); } } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[data-state=hover][data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][data-state=hover][data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[data-state=hover][data-focus=false] { background-color: var(--tui-status-negative-pale-hover); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover)[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][tuiWrapper]:hover:not(._no-hover)[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[tuiWrapper]:hover:not(._no-hover)[data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[tuiWrapper][data-state=hover][data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][tuiWrapper][data-state=hover][data-focus=false], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[tuiWrapper][data-state=hover][data-focus=false] { background-color: var(--tui-status-negative-pale-hover); } } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode]):disabled:not([data-state]), [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid]:disabled:not([data-state]), [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode]):disabled:not([data-state]), [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[data-state=disabled], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][data-state=disabled], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[data-state=disabled] { background: transparent; outline: none; } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[tuiWrapper]:disabled:not([data-state]), [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][tuiWrapper]:disabled:not([data-state]), [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[tuiWrapper]:disabled:not([data-state]), [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[tuiWrapper][data-state=disabled], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][tuiWrapper][data-state=disabled], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[tuiWrapper][data-state=disabled] { background: transparent; outline: none; } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode]):focus-visible:not([data-focus=false]), [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid]:focus-visible:not([data-focus=false]), [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode]):focus-visible:not([data-focus=false]) { background-color: transparent; outline-offset: -0.0625rem; outline: 0.0625rem solid var(--tui-status-negative); } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[data-focus=true], [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][data-focus=true], [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[data-focus=true] { background-color: transparent; outline-offset: -0.0625rem; outline: 0.0625rem solid var(--tui-status-negative); } [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[tuiWrapper]:not(._focused):has(:focus-visible), [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][tuiWrapper]:not(._focused):has(:focus-visible), [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[tuiWrapper]:not(._focused):has(:focus-visible), [tuiAppearance][data-appearance=table]:not([tuiWrapper]):invalid:not([data-mode])[tuiWrapper]._focused, [tuiAppearance][data-appearance=table]:not([tuiWrapper])[data-mode~=invalid][tuiWrapper]._focused, [tuiAppearance][data-appearance=table]:not([tuiWrapper]).tui-invalid:not([data-mode])[tuiWrapper]._focused { background-color: transparent; outline-offset: -0.0625rem; outline: 0.0625rem solid var(--tui-status-negative); } [tuiWrapper] { transition-property: color, background, opacity; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; position: relative; display: block; block-size: 100%; inline-size: 100%; appearance: none; border-radius: inherit; } [tuiWrapper]:disabled:disabled, [tuiWrapper][data-state=disabled][data-state=disabled] { pointer-events: none; opacity: var(--tui-disabled-opacity); } [tuiWrapper][data-appearance=textfield] { transition-property: box-shadow, background; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; background: var(--tui-background-base); color: var(--tui-text-primary); outline: none !important; box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1); } [tuiWrapper][data-appearance=textfield]::after { transition-property: color; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; border-radius: inherit; border: 1px solid currentColor; pointer-events: none; color: var(--tui-border-normal); } @media (hover: hover) and (pointer: fine) { [tuiWrapper][data-appearance=textfield]:hover:not(._no-hover), [tuiWrapper][data-appearance=textfield][data-state=hover] { box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); } } [tuiWrapper][data-appearance=textfield]:focus-visible:focus-visible { box-shadow: none; } [tuiWrapper][data-appearance=textfield]:focus-visible:focus-visible:after { border-width: 2px; color: var(--tui-background-accent-1); } [tuiWrapper][data-appearance=textfield]:has(:focus-visible) { box-shadow: none; } [tuiWrapper][data-appearance=textfield]:has(:focus-visible):after { border-width: 2px; color: var(--tui-background-accent-1); } [tuiWrapper][data-appearance=textfield]._focused._focused { box-shadow: none; } [tuiWrapper][data-appearance=textfield]._focused._focused:after { border-width: 2px; color: var(--tui-background-accent-1); } [tuiWrapper][data-appearance=textfield][data-state=readonly][data-state=readonly] { box-shadow: none; background: transparent; } [tuiWrapper][data-appearance=textfield][data-state=readonly][data-state=readonly]:after { color: var(--tui-border-normal); } [tuiWrapper][data-appearance=textfield]:disabled:disabled, [tuiWrapper][data-appearance=textfield][data-state=disabled][data-state=disabled] { box-shadow: none; } [tuiWrapper][data-appearance=textfield]:invalid:invalid:after, [tuiWrapper][data-appearance=textfield]._invalid._invalid:after { color: var(--tui-text-negative); } [tuiTheme=dark][tuiWrapper][data-appearance=textfield], [tuiTheme=dark] [tuiWrapper][data-appearance=textfield] { background: var(--tui-background-neutral-1); } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark][tuiWrapper][data-appearance=textfield]:hover:not(._no-hover), [tuiTheme=dark] [tuiWrapper][data-appearance=textfield]:hover:not(._no-hover), [tuiTheme=dark][tuiWrapper][data-appearance=textfield][data-state=hover], [tuiTheme=dark] [tuiWrapper][data-appearance=textfield][data-state=hover] { background: var(--tui-background-neutral-1-hover); } } [tuiTheme=dark][tuiWrapper][data-appearance=textfield]:focus-visible:focus-visible, [tuiTheme=dark] [tuiWrapper][data-appearance=textfield]:focus-visible:focus-visible { background: transparent; } [tuiTheme=dark][tuiWrapper][data-appearance=textfield]:has(:focus-visible), [tuiTheme=dark] [tuiWrapper][data-appearance=textfield]:has(:focus-visible) { background: transparent; } [tuiTheme=dark][tuiWrapper][data-appearance=textfield]._focused._focused, [tuiTheme=dark] [tuiWrapper][data-appearance=textfield]._focused._focused { background: transparent; } [tuiWrapper][data-appearance=table] { border-radius: 0; background: transparent; color: var(--tui-text-primary); outline: none !important; } [tuiWrapper][data-appearance=table]::before, [tuiWrapper][data-appearance=table][data-appearance=table]::after { content: ""; position: fixed; top: -0.03125rem; left: -1px; right: -0.03125rem; bottom: -1px; } [tuiWrapper][data-appearance=table]::before { transition-property: background; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; z-index: -1; background-repeat: no-repeat; background-position: top right; background-size: 0.5rem 0.5rem; } [tuiWrapper][data-appearance=table][data-appearance=table]::after { border: 1px solid currentColor; border-radius: inherit; pointer-events: none; color: var(--tui-border-normal); } @media (hover: hover) and (pointer: fine) { [tuiWrapper][data-appearance=table]:hover:not(._no-hover):not(._focused):before, [tuiWrapper][data-appearance=table][data-state=hover]:not(._focused):before { background-color: var(--tui-background-neutral-1); } } [tuiWrapper][data-appearance=table]:focus-visible:focus-visible { background: transparent; } [tuiWrapper][data-appearance=table]:focus-visible:focus-visible:after { border-width: 2px; color: var(--tui-border-focus); } [tuiWrapper][data-appearance=table]:has(:focus-visible) { background: transparent; } [tuiWrapper][data-appearance=table]:has(:focus-visible):after { border-width: 2px; color: var(--tui-border-focus); } [tuiWrapper][data-appearance=table]._focused._focused { background: transparent; } [tuiWrapper][data-appearance=table]._focused._focused:after { border-width: 2px; color: var(--tui-border-focus); } [tuiWrapper][data-appearance=table]:invalid:invalid:before, [tuiWrapper][data-appearance=table]._invalid._invalid:before { background-image: linear-gradient( to top right, transparent 0%, transparent 50%, var(--tui-status-negative) 50%, var(--tui-status-negative) 100%); } [tuiWrapper][data-appearance=table]:invalid:invalid:not(._focused):before, [tuiWrapper][data-appearance=table]._invalid._invalid:not(._focused):before { background-color: var(--tui-status-negative-pale); } @media (hover: hover) and (pointer: fine) { [tuiWrapper][data-appearance=table]:invalid:invalid:hover:not(._no-hover):not(._focused):before, [tuiWrapper][data-appearance=table]._invalid._invalid:hover:not(._no-hover):not(._focused):before, [tuiWrapper][data-appearance=table]:invalid:invalid[data-state=hover]:not(._focused):before, [tuiWrapper][data-appearance=table]._invalid._invalid[data-state=hover]:not(._focused):before { background-color: var(--tui-status-negative-pale-hover); } } [tuiWrapper][data-appearance=table]:invalid:invalid:disabled:disabled, [tuiWrapper][data-appearance=table]._invalid._invalid:disabled:disabled, [tuiWrapper][data-appearance=table]:invalid:invalid[data-state=disabled][data-state=disabled], [tuiWrapper][data-appearance=table]._invalid._invalid[data-state=disabled][data-state=disabled] { background: transparent; } [tuiWrapper][data-appearance=table]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=table]._invalid._invalid:focus-visible:focus-visible { background: transparent; --tui-border-focus: var(--tui-status-negative); } [tuiWrapper][data-appearance=table]:invalid:invalid:focus-visible:focus-visible:after, [tuiWrapper][data-appearance=table]._invalid._invalid:focus-visible:focus-visible:after { border-width: 1px; } [tuiWrapper][data-appearance=table]:invalid:invalid:has(:focus-visible), [tuiWrapper][data-appearance=table]._invalid._invalid:has(:focus-visible) { background: transparent; --tui-border-focus: var(--tui-status-negative); } [tuiWrapper][data-appearance=table]:invalid:invalid:has(:focus-visible):after, [tuiWrapper][data-appearance=table]._invalid._invalid:has(:focus-visible):after { border-width: 1px; } [tuiWrapper][data-appearance=table]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=table]._invalid._invalid._focused._focused { background: transparent; --tui-border-focus: var(--tui-status-negative); } [tuiWrapper][data-appearance=table]:invalid:invalid._focused._focused:after, [tuiWrapper][data-appearance=table]._invalid._invalid._focused._focused:after { border-width: 1px; } table [tuiWrapper][data-appearance=table][data-appearance=table]:not(._focused)::after { border-width: 0; } table [tuiWrapper][data-appearance=table]._focused { z-index: 1; } [tuiWrapper][data-appearance=icon] { color: var(--tui-text-tertiary); } [tuiWrapper]:not([data-state=readonly]):hover .t-textfield-icon [tuiWrapper][data-appearance=icon]:not([data-state=disabled]) { color: var(--tui-text-secondary); } @media (hover: hover) and (pointer: fine) { [tuiWrapper][data-appearance=icon]:hover:not(._no-hover), [tuiWrapper][data-appearance=icon][data-state=hover] { color: var(--tui-text-secondary); } } [tuiWrapper][data-appearance=icon]:active:not(._no-active), [tuiWrapper][data-appearance=icon][data-state=active], [tuiWrapper][data-appearance=icon][data-state=active]:hover { color: var(--tui-text-primary); } tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance=icon], tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance=icon], tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance=icon] { color: var(--tui-text-secondary); } tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance=icon]:active:not(._no-active), tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance=icon]:active:not(._no-active), tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance=icon]:active:not(._no-active), tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance=icon][data-state=active], tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance=icon][data-state=active], tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance=icon][data-state=active], tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance=icon][data-state=active]:hover, tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance=icon][data-state=active]:hover, tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance=icon][data-state=active]:hover { color: var(--tui-text-primary); } [tuiWrapper][data-appearance=none] { outline: none; } [tuiWrapper][data-appearance=none]::after { border: none; } [tuiAppearance][data-appearance=textfield] { transition-property: box-shadow, background-color, outline-color, border-color; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1); background-color: var(--tui-background-base); color: var(--tui-text-primary); box-shadow: var(--t-shadow); outline: 1px solid var(--tui-border-normal); outline-offset: -1px; border-width: 0; } [tuiAppearance][data-appearance=textfield]:not([tuiWrapper])::before, [tuiAppearance][data-appearance=textfield]:not([tuiWrapper])::after { transition-property: color, transform; color: var(--tui-text-tertiary); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); } [tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):not([tuiWrapper]):after { color: var(--tui-text-secondary); } } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); } [tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]):not([tuiWrapper]):after { color: var(--tui-text-secondary); } } [tuiAppearance][data-appearance=textfield][data-state=hover] { --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); } [tuiAppearance][data-appearance=textfield][data-state=hover]:not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][data-state=hover]:not([tuiWrapper]):after { color: var(--tui-text-secondary); } @media (hover: hover) and (pointer: fine) { [tuiAppearance][data-appearance=textfield][tuiWrapper]:hover:not(._no-hover), [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=hover] { --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); } [tuiAppearance][data-appearance=textfield][tuiWrapper]:hover:not(._no-hover):not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=hover]:not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][tuiWrapper]:hover:not(._no-hover):not([tuiWrapper]):after, [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=hover]:not([tuiWrapper]):after { color: var(--tui-text-secondary); } } [tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):not([tuiWrapper]):after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):active:not(:disabled):not([data-state]):not([tuiWrapper]):after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=textfield][data-state=active]:not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][data-state=active]:not([tuiWrapper]):after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=textfield][tuiWrapper]:active:not(._no-active):not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=active]:not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=active]:hover:not([tuiWrapper]):before, [tuiAppearance][data-appearance=textfield][tuiWrapper]:active:not(._no-active):not([tuiWrapper]):after, [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=active]:not([tuiWrapper]):after, [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=active]:hover:not([tuiWrapper]):after { color: var(--tui-text-primary); } [tuiAppearance][data-appearance=textfield]:focus-visible:not([data-focus=false]) { box-shadow: none; outline: 0.125rem solid var(--tui-background-accent-1); outline-offset: -0.125rem; } [tuiAppearance][data-appearance=textfield][data-focus=true] { box-shadow: none; outline: 0.125rem solid var(--tui-background-accent-1); outline-offset: -0.125rem; } [tuiAppearance][data-appearance=textfield][tuiWrapper]:not(._focused):has(:focus-visible), [tuiAppearance][data-appearance=textfield][tuiWrapper]._focused { box-shadow: none; outline: 0.125rem solid var(--tui-background-accent-1); outline-offset: -0.125rem; } [tuiAppearance][data-appearance=textfield]:disabled:not([data-state]), [tuiAppearance][data-appearance=textfield][data-state=disabled] { box-shadow: none; } [tuiAppearance][data-appearance=textfield][tuiWrapper]:disabled:not([data-state]), [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=disabled] { box-shadow: none; } [tuiAppearance][data-appearance=textfield][data-mode~=invalid][data-mode~=invalid], [tuiAppearance][data-appearance=textfield]:invalid:not([data-mode]), [tuiAppearance][data-appearance=textfield].tui-invalid:not([data-mode]) { outline-color: var(--tui-status-negative); } [tuiAppearance][data-appearance=textfield][data-mode~=readonly], input[tuiAppearance][data-appearance=textfield]:read-only:not([data-mode]) { background: transparent !important; box-shadow: none !important; outline-color: var(--tui-border-normal) !important; } [tuiAppearance][data-appearance=textfield][chrome-autofilled], [tuiAppearance][data-appearance=textfield]:-webkit-autofill { -webkit-text-fill-color: var(--tui-text-primary) !important; caret-color: var(--tui-text-primary) !important; box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important; transition: background-color 600000s 0s; } [tuiTheme=dark] [tuiAppearance][data-appearance=textfield], [tuiTheme=dark][tuiAppearance][data-appearance=textfield] { background-color: var(--tui-background-neutral-1); } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark] [tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiTheme=dark][tuiAppearance][data-appearance=textfield]:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background-color: var(--tui-background-neutral-1-hover); } } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark] [tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]), [tuiTheme=dark][tuiAppearance][data-appearance=textfield]:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]) { background-color: var(--tui-background-neutral-1-hover); } } [tuiTheme=dark] [tuiAppearance][data-appearance=textfield][data-state=hover], [tuiTheme=dark][tuiAppearance][data-appearance=textfield][data-state=hover] { background-color: var(--tui-background-neutral-1-hover); } @media (hover: hover) and (pointer: fine) { [tuiTheme=dark] [tuiAppearance][data-appearance=textfield][tuiWrapper]:hover:not(._no-hover), [tuiTheme=dark][tuiAppearance][data-appearance=textfield][tuiWrapper]:hover:not(._no-hover), [tuiTheme=dark] [tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=hover], [tuiTheme=dark][tuiAppearance][data-appearance=textfield][tuiWrapper][data-state=hover] { background-color: var(--tui-background-neutral-1-hover); } } [tuiTheme=dark] [tuiAppearance][data-appearance=textfield]:focus-visible:not([data-focus=false]), [tuiTheme=dark][tuiAppearance][data-appearance=textfield]:focus-visible:not([data-focus=false]) { background-color: transparent !important; } [tuiTheme=dark] [tuiAppearance][data-appearance=textfield][data-focus=true], [tuiTheme=dark][tuiAppearance][data-appearance=textfield][data-focus=true] { background-color: transparent !important; } [tuiTheme=dark] [tuiAppearance][data-appearance=textfield][tuiWrapper]:not(._focused):has(:focus-visible), [tuiTheme=dark][tuiAppearance][data-appearance=textfield][tuiWrapper]:not(._focused):has(:focus-visible), [tuiTheme=dark] [tuiAppearance][data-appearance=textfield][tuiWrapper]._focused, [tuiTheme=dark][tuiAppearance][data-appearance=textfield][tuiWrapper]._focused { background-color: transparent !important; } /* node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less */ /* src/styles.scss */ .light { --dark-text: #212129; --light-text: #b5c7d8; --gray-text: #8b9eb0; --gray-text-2: #1b1f3b; --gray-text-2-alpha: #1b1f3ba6; --gray-text-3-alpha: rgba(27, 31, 59, 0.4); --white-text: #fff; --highlight-primary: #f3cc50; --gray-0: #475f76; --gray-1: #5f7487; --gray-2: #f7f8fa; --gray-3: #e1ebf4; --gray-4: #cbd8e5; --gray-5: #465461; --gray-6: #bebebe; --light-bg: #ffffff; --light-bg-hover: #f4f4f4; --light-bg-darken: #f6f6f6; --light-bg-darken-2: #f1f1f1; --light-bg-darken-3: #f9f9f9; --light-bg-opacity: rgba(255, 255, 255, 0.4); --dark-bg: #212129; --dark-bg-hover: #3a3a45; --dark-bg-opacity: rgba(33, 33, 41, 0.1); --gray-bg: #505055; --gray-bg-hover: #757575; --negative-bg: #f45725; --secondary-active: #e0e0e0; --accent: #f3cc50; --accent-hover: #fddd75; --accent-dark: #c3a40e; --red-primary: #e41b4c; --red-hover: rgba(228, 27, 76, 0.5); --green-primary: #34b41f; --green-hover: rgba(52, 180, 31, 0.5); --blue-primary: #357cf2; --blue-hover: #1645ca; --orange-primary: #f19c1c; --orange-hover: #f4aa30; --gray-primary: #b5c7d8; --gray-line: #dadcde; --gray-line-2: #d1d5d9; --gray-line-3: #dfe1e8; --gray-line-opacity: #c4c4c440; --dark-line: #383b3f; --dark-line-stroke: #39434f; --btn-border-color: #cedcea; --btn-hover-border-color: #b8c4d2; --light-gray-border: #f0f1f4; --dark-icon: var(--dark-text); --light-icon: var(--gray-text); --light-gray-icon: #b0b0b0; --box-shadow-default: rgba(33, 33, 41, 0.1) 0px 10px 36px 0px; --box-shadow-gridster: 0 4px 24px 0 rgba(0, 0, 0, 0.12); --blur-default: 3px; --widget-placeholder-bg: rgba(255, 255, 255, 0.75); --widget-border-color: #dadada; --gridster-grid-color: #dadada; --skeleton-filter: contrast(0) brightness(0); } .dark { --dark-text: #fcfcfc; --light-text: #b5c7d8; --gray-text: #8d929c; --gray-text-2-alpha: #c7c8d0a6; --gray-text-3-alpha: rgba(141, 146, 156, 0.4); --white-text: #fff; --highlight-primary: #2f6fda; --gray-0: #475f76; --gray-1: #5f7487; --gray-2: #f7f8fa; --gray-3: #e1ebf4; --gray-4: #cbd8e5; --gray-5: #465461; --gray-6: #676767; --light-bg: #212129; --light-bg-hover: #3a3a45; --light-bg-darken: #2e2e33; --light-bg-darken-2: #25252c; --light-bg-darken-3: #25252c; --dark-bg: #212129; --dark-bg-hover: #3a3a45; --dark-bg-opacity: rgba(197, 197, 197, 0.1); --gray-bg: #505055; --gray-bg-hover: #757575; --negative-bg: #f45725; --secondary-active: #e0e0e0; --accent: #f3cc50; --accent-hover: #fddd75; --accent-dark: #c3a40e; --red-primary: #e11d4e; --red-hover: rgba(225, 29, 78, 0.8); --green-primary: #2fa11c; --green-hover: rgba(52, 180, 31, 0.5); --blue-primary: #2f6fda; --blue-hover: #2b5cdd; --orange-primary: #f19c1c; --orange-hover: #f4aa30; --gray-primary: #737373; --gray-line: #555555; --gray-line-2: #555555; --gray-line-3: #555555; --gray-line-opacity: rgba(103, 103, 103, 0.25); --dark-line: #383b3f; --dark-line-stroke: #39434f; --btn-border-color: #cedcea; --btn-hover-border-color: #b8c4d2; --light-gray-border: #333333; --dark-icon: var(--dark-text); --light-icon: var(--gray-text); --light-gray-icon: #b0b0b0; --box-shadow-default: rgba(143, 143, 143, 0.1) 0px 10px 36px 0px; --box-shadow-gridster: 0 4px 24px 0 rgba(0, 0, 0, 0.12); --widget-placeholder-bg: rgba(255, 255, 255, 0.75); --widget-border-color: #dadada; --gridster-grid-color: #3c3c3c; --skeleton-filter: contrast(0) brightness(10); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--tui-font-text), sans-serif; color: var(--dark-text); } a { line-height: 1; text-decoration: none; color: inherit; } button:disabled, input:disabled { pointer-events: none !important; } ::-webkit-scrollbar { width: 6px; scrollbar-width: thin; scrollbar-color: var(--accent) var(--light-bg); } ::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 8px; width: 6px; } ::-webkit-scrollbar-thumb:vertical { width: 6px; } ::-webkit-scrollbar-thumb:horizontal { height: 6px; } ::-webkit-scrollbar-track { background-color: var(--light-bg); } .dark { --tui-theme-color: var(--white-text); --tui-text-primary: var(--dark-text); --tui-text-color: var(--light-text); --tui-text-secondary: var(--gray-text); --tui-text-tertiary: var(--gray-4); --tui-text-primary-on-accent-1: var(--white-text); --tui-text-primary-on-accent-2: var(--light-text); --tui-text-action: var(--accent); --tui-text-action-hover: var(--accent-hover); --tui-text-negative: var(--red-primary); --tui-text-negative-hover: var(--red-primary); --tui-text-positive: var(--green-primary); --tui-text-positive-hover: var(--green-primary); --tui-background-base: var(--light-bg); --tui-background-base-alt: var(--light-bg-hover); --tui-background-dark: var(--dark-bg); --tui-background-dark-hover: var(--dark-bg-hover); --tui-background-neutral-1: var(--gray-primary); --tui-background-neutral-1-hover: var(--dark-bg-opacity); --tui-background-neutral-2: var(--light-text); --tui-background-accent-1: var(--accent); --tui-background-accent-1-hover: var(--accent-hover); --tui-background-accent-2: var(--blue-primary); --tui-background-accent-opposite: var(--light-bg); --tui-background-elevation-1: var(--light-bg); --tui-background-elevation-2: var(--light-bg); --tui-background-elevation-3: var(--light-bg); --tui-status-negative: var(--red-primary); --tui-status-negative-pale-hover: var(--red-hover); --tui-status-positive: var(--green-primary); --tui-status-positive-pale-hover: var(--green-hover); --tui-status-warning: var(--orange-primary); --tui-status-warning-hover: var(--orange-hover); --tui-status-info: var(--blue-primary); --tui-status-neutral: var(--green-primary); --tui-border-normal: var(--gray-line); --tui-border-hover: var(--gray-line-2); --tui-border-focus: var(--gray-line-3); } .light { --tui-theme-color: var(--white-text); --tui-text-primary: var(--dark-text); --tui-text-color: var(--light-text); --tui-text-secondary: var(--gray-text); --tui-text-tertiary: var(--gray-4); --tui-text-primary-on-accent-1: var(--white-text); --tui-text-primary-on-accent-2: var(--light-text); --tui-text-action: var(--accent); --tui-text-action-hover: var(--accent-hover); --tui-text-negative: var(--red-primary); --tui-text-negative-hover: var(--red-primary); --tui-text-positive: var(--green-primary); --tui-text-positive-hover: var(--green-primary); --tui-background-base: var(--light-bg); --tui-background-base-alt: var(--light-bg-hover); --tui-background-dark: var(--dark-bg); --tui-background-dark-hover: var(--dark-bg-hover); --tui-background-neutral-1: var(--light-bg); --tui-background-neutral-1-hover: var(--light-bg-darken-3); --tui-background-neutral-2: var(--light-bg); --tui-background-accent-1: var(--accent); --tui-background-accent-1-hover: var(--accent-hover); --tui-background-accent-2: var(--blue-primary); --tui-background-accent-opposite: var(--light-bg); --tui-background-elevation-1: var(--light-bg); --tui-background-elevation-2: var(--light-bg); --tui-background-elevation-3: var(--light-bg); --tui-status-negative: var(--red-primary); --tui-status-negative-pale-hover: var(--red-hover); --tui-status-positive: var(--green-primary); --tui-status-positive-pale-hover: var(--green-hover); --tui-status-warning: var(--orange-primary); --tui-status-warning-hover: var(--orange-hover); --tui-status-info: var(--blue-primary); --tui-status-neutral: var(--green-primary); --tui-border-normal: var(--gray-line); --tui-border-hover: var(--gray-line-2); --tui-border-focus: var(--gray-line-3); } :root { --tui-font-heading: "dinpro", sans-serif; --tui-font-text: "sf-pro-display", sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: var(--tui-font-heading), sans-serif; } [tuiAppearance]::after, [tuiAppearance][data-appearance=textfield]::after, [tuiWrapper][data-appearance=textfield]::after { transition: none !important; } [tuiAppearance][data-appearance=textfield] { font-family: var(--tui-font-heading); font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -0.3px; --t-shadow: none !important; background-color: var(--light-bg-darken) !important; border: 1px solid var(--gray-6); border-radius: 6px; outline: none !important; } [tuiAppearance][data-appearance=textfield] [chrome-autofilled] { box-shadow: 0 0 0 100rem var(--light-bg) inset !important; } [tuiAppearance][data-appearance=textfield]:-webkit-autofill { box-shadow: 0 0 0 100rem var(--light-bg) inset !important; } [tuiAppearance][data-appearance=textfield]:focus-visible { border: 1px solid var(--gray-6); outline: none !important; } [tuiAppearance][data-appearance=textfield]:hover { box-shadow: none !important; } [tuiAppearance][data-appearance=textfield]::after { border: none !important; } [tuiAppearance][data-appearance=textfield][data-focus=true] { outline: none !important; } [tuiAppearance][data-appearance=neutral] { --t-bg: none !important; } [tuiButtonGroup] > button, [tuiButtonGroup] > a { background: none; transition: none !important; } [tuiAppearance][data-appearance=outline-grayscale]::before { color: var(--btn-border-color) !important; } [tuiAppearance][data-appearance=outline-grayscale]::before:hover { color: var(--light-bg-hover) !important; } [tuiButton] { font-family: var(--tui-font-heading); font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: -0.5px; } [tuiButton]:disabled { filter: grayscale(0.1); } [tuiButton] tui-icon:after { background: var(--dark-icon) !important; } [tuiButton][tuiAppearance] { transition: none !important; } [tuiButton][tuiAppearance][data-appearance=primary] { font-family: var(--tui-font-heading); font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -0.23px; background: var(--accent) !important; color: var(--dark-text) !important; } [tuiButton][tuiAppearance][data-appearance=primary]:hover { background: var(--accent-hover) !important; } [tuiButton][tuiAppearance][data-appearance=primary-grayscale] { background: var(--dark-bg) !important; color: var(--white-text); } [tuiButton][tuiAppearance][data-appearance=primary-grayscale]:hover { background: var(--dark-bg-hover) !important; } [tuiButton][tuiAppearance][data-appearance=primary-destructive] { background: var(--dark-bg) !important; color: var(--white-text); } [tuiButton][tuiAppearance][data-appearance=primary-destructive]:hover { background: var(--dark-bg-hover) !important; } [tuiButton][tuiAppearance][data-appearance=accent] { background: var(--blue-primary) !important; } [tuiButton][tuiAppearance][data-appearance=accent]:hover { background: var(--blue-hover) !important; } [tuiButton][tuiAppearance][data-appearance=outline] { background: transparent !important; color: var(--dark-text) !important; --t-bs: var(--gray-line) !important; } [tuiButton][tuiAppearance][data-appearance=outline]:hover { --t-bs: var(--gray-text-2-alpha) !important; } [tuiButton][tuiAppearance][data-appearance=outline-grayscale] { background: transparent !important; color: var(--dark-text) !important; } [tuiButton][tuiAppearance][data-appearance=outline-destructive] { background: transparent !important; color: var(--dark-text) !important; } [tuiButton][tuiAppearance][data-appearance=floating] { background: var(--light-bg) !important; color: var(--dark-text) !important; } [tuiButton][tuiAppearance][data-appearance=floating]:hover { background: var(--light-bg-hover) !important; } [tuiButton][tuiAppearance][data-appearance=positive] { background: var(--green-primary) !important; color: var(--white-text) !important; } [tuiButton][tuiAppearance][data-appearance=positive]:hover { background: var(--green-primary) !important; } [tuiButton][tuiAppearance][data-appearance=negative] { font-family: var(--tui-font-heading); font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -0.23px; background: var(--negative-bg) !important; color: var(--white-text) !important; } [tuiButton][tuiAppearance][data-appearance=negative]:hover { background: var(--negative-bg) !important; } [tuiButton][tuiAppearance][data-appearance=neutral] { background: var(--light-bg-hover) !important; color: var(--dark-text) !important; } [tuiButton][tuiAppearance][data-appearance=neutral]:hover { background: var(--dark-bg-opacity) !important; } [tuiButton][tuiAppearance][data-appearance=info] { color: var(--dark-text) !important; } [tuiButton][tuiAppearance][data-appearance=info]:hover { background: var(--light-bg-hover) !important; } [tuiButton][tuiAppearance][data-appearance=warning] { background: var(--orange-primary) !important; color: var(--white-text) !important; } [tuiButton][tuiAppearance][data-appearance=warning]:hover { background: var(--orange-hover) !important; } [tuiButton][tuiAppearance][data-appearance=action] { color: var(--blue-primary) !important; } [tuiButton][tuiAppearance][data-appearance=action]:hover { color: var(--blue-hover) !important; } [tuiButton][tuiAppearance][data-appearance=flat-grayscale] { font-family: var(--tui-font-heading); font-size: 14px; font-weight: 500; line-height: 17px; letter-spacing: -0.35px; } [tuiBadge] { border-radius: 4px !important; font-weight: 600 !important; color: var(--tui-text-primary-on-accent-1) !important; } [tuiBadge][data-appearance=positive] { background: var(--green-primary) !important; } [tuiBadge][data-appearance=positive]:hover { background: var(--green-primary) !important; } [tuiBadge][data-appearance=negative] { background: var(--red-primary) !important; } [tuiBadge][data-appearance=negative]:hover { background: var(--red-primary) !important; } [tuiBadge][data-appearance=neutral] { background: var(--gray-primary) !important; } [tuiBadge][data-appearance=neutral]:hover { background: var(--gray-primary) !important; } tui-alerts .t-wrapper { z-index: 50; } tui-notification[data-appearance=positive] { background: var(--green-primary) !important; } tui-notification[data-appearance=positive]:hover { background: var(--green-primary) !important; } tui-notification[data-appearance=negative] { background: var(--red-primary) !important; } tui-notification[data-appearance=negative]:hover { background: var(--red-primary) !important; } tui-notification[data-appearance=warning] { background: var(--accent) !important; } tui-notification[data-appearance=warning]:hover { background: var(--accent) !important; } tui-notification:before { color: var(--white-text) !important; } tui-notification [tuititle] { color: var(--white-text); } tui-notification [tuisubtitle] { color: var(--white-text); } tui-notification [tuisubtitle] span { color: var(--white-text); } tui-notification [data-appearance=outline-grayscale]::before { background-color: var(--white-text); } tui-scrollbar { background-color: transparent; opacity: 1; border: none; block-size: 100% !important; } tui-scrollbar .t-content { height: 100% !important; } .t-bar_vertical { inline-size: 3px !important; min-block-size: 100% !important; } .t-bar_vertical .t-thumb { inline-size: 3px !important; border-color: var(--accent) !important; background: var(--accent) !important; opacity: 1 !important; } .t-bar_horizontal .t-thumb { block-size: 4px !important; border-color: var(--accent) !important; background: var(--accent) !important; opacity: 1 !important; } tui-dropdown { box-shadow: var(--box-shadow-default) !important; border-radius: 8px !important; } tui-dropdown[data-appearance=dropdown-navigation] { background: var(--light-bg) !important; } tui-avatar { background: var(--light-bg) !important; transition: none !important; } tui-avatar:before { color: var(--dark-text); } tui-dialogs { z-index: 10; } tui-dialogs tui-dialog { border-radius: 10px !important; width: max-content !important; } tui-dialogs tui-dialog .t-close { top: 10px !important; } tui-dialogs tui-dialog .t-close:before { color: var(--light-gray-icon) !important; } tui-dialogs .t-heading { font-weight: 600 !important; } tui-dialogs .t-content { padding: 0 !important; } tui-dialogs .t-content .t-icon_left { padding-left: 12px !important; } [tuiSwitch] { background: var(--light-bg-hover) !important; } [tuiSwitch]:hover { background: var(--light-bg-hover) !important; } [tuiSwitch]:checked { background: var(--accent) !important; } [tuiCardLarge] { box-shadow: var(--box-shadow-default) !important; } tui-textfield tui-error .t-message-text { color: var(--red-primary) !important; } tui-textfield [tuiInputNumber]._with-buttons { padding-right: 40px; border-radius: 4px; inline-size: 100%; } tui-textfield [tuiInputNumber]._with-buttons ~ .t-content { margin-inline-end: 35px; } tui-textfield ._with-buttons { margin: 0 !important; } tui-textfield .t-input-number-buttons.t-input-number-buttons { top: 0; gap: 0; height: 32px; width: 32px; border-radius: 4px; flex-direction: column !important; } tui-textfield .t-input-number-buttons.t-input-number-buttons > *:first-child { border-radius: 0 4px 0 0 !important; } tui-textfield .t-input-number-buttons.t-input-number-buttons > *:last-child { border-radius: 0 0 4px 0 !important; } tui-textfield .t-button::before { font-size: 10px !important; background-color: var(--gray-primary); } tui-textfield .t-button[data-appearance=textfield] { --t-bg: var(--white-text) !important; background-color: var(--light-bg) !important; } tui-textfield .t-button[data-appearance=textfield]:disabled { background-color: var(--light-bg-darken) !important; opacity: 1 !important; } .tui-select { padding-top: 0; width: 100%; border-radius: 6px !important; } .tui-select .t-primitive-value { font-family: var(--tui-font-heading); font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -0.3px; } .tui-select .t-icons .t-icon ._rotated { transform: none !important; } .tui-select .t-icons .t-icon tui-icon { --t-icon: url(/images/icons/chevrons-up-down.svg) !important; } tui-textarea .t-pseudo-content { padding-top: 10px !important; } tui-textarea .t-pseudo-content span { font-size: 14px !important; color: transparent !important; } tui-textarea .t-placeholder { padding: 5px; width: 100%; z-index: 50; } tui-textarea .t-placeholder [tuilabel] { display: block; width: 100%; background: transparent !important; z-index: 50; color: var(--light-color); } tui-textarea .t-input { min-height: 150px !important; padding-top: 10px !important; font-size: 14px !important; color: var(--dark-text) !important; } tui-error .t-message-text { color: var(--red-primary) !important; } tui-accordion { --t-group-mask: none !important; --t-group-mask-end: none !important; --t-group-mask-start: none !important; border-radius: 0 !important; } tui-accordion tui-expand { box-shadow: none !important; } [tuiCheckbox] { --t-size: 16px !important; --t-radius: 2px !important; background-color: var(--light-bg-hover); } [tuiCheckbox]::before { inline-size: 12px; block-size: 7px; } [tuiCheckbox][data-appearance=primary] { background: var(--green-primary) !important; } tui-input [tuiAppearance] [data-appearance=icon]::after { color: var(--gray-text); } tui-input .t-content { gap: 10px !important; } [tuiSkeleton]._skeleton { filter: var(--skeleton-filter) !important; } tui-tabs::before { background: var(--gray-bg-hover) !important; } tui-calendar { background: var(--light-bg); height: 350px; overflow-y: auto; padding: 12px !important; } tui-calendar tui-calendar-spin { margin-bottom: 10px !important; } tui-calendar .t-row:last-child { padding-bottom: 12px; } tui-calendar .t-cell { border-color: transparent !important; font-family: var(--tui-font-heading); font-size: 13px; font-weight: 500; line-height: 16px; letter-spacing: -0.5px; } tui-calendar .t-cell[data-range]:before { background: var(--light-bg-darken) !important; } tui-calendar .t-cell[data-range=middle] { background: var(--light-bg-darken) !important; } tui-data-list tui-select-option { font-family: var(--tui-font-heading); font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -0.3px; } .t-empty { display: none !important; } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 100; src: url("./media/SFProDisplay-Light-PNX6UYQX.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 200; src: url("./media/SFProDisplay-Light-PNX6UYQX.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 300; src: url("./media/SFProDisplay-Light-PNX6UYQX.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 400; src: url("./media/SFProDisplay-Regular-B7T6ZBMI.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 500; src: url("./media/SFProDisplay-Medium-NSUD6FII.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 600; src: url("./media/SFProDisplay-Semibold-2RCMW7XE.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 700; src: url("./media/SFProDisplay-Bold-6FMDPXPT.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 800; src: url("./media/SFProDisplay-Heavy-G6M2XHDK.woff2") format("woff2"); } @font-face { font-family: "sf-pro-display"; font-style: normal; font-weight: 900; src: url("./media/SFProDisplay-Heavy-G6M2XHDK.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 100; src: url("./media/DINPro-Light-UJS4DG5G.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 200; src: url("./media/DINPro-Light-UJS4DG5G.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 300; src: url("./media/DINPro-Light-UJS4DG5G.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 400; src: url("./media/DINPro-M4IWZW5H.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 500; src: url("./media/DINPro-Medium-TGDLFAIR.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 600; src: url("./media/DINPro-Bold-CUGLUQDP.woff2") format("woff2"); } @font-face { font-family: "dinpro"; font-style: normal; font-weight: 700; src: url("./media/DINPro-Black-PDKMPGJX.woff2") format("woff2"); } .table-elastic { display: flex; flex-direction: column; width: 100%; border: none; } .table-elastic .table-row { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .table-elastic .table-row > [tuiTd], .table-elastic .table-row [tuiTh] { flex: 1; min-width: 5%; width: 100%; max-width: 50%; border: none; text-wrap: nowrap; background: var(--light-bg); } .table-elastic .table-row > [tuiTd]:last-child, .table-elastic .table-row [tuiTh]:last-child { justify-content: flex-end; } .highlight.positive-text { color: var(--green-primary) !important; } .highlight.positive-bg { background-color: var(--green-primary) !important; } .highlight.negative-text { color: var(--red-primary) !important; } .highlight.negative-bg { background-color: var(--red-primary) !important; } .highlight.neutral-text { color: var(--gray-text) !important; } .highlight.neutral-bg { background-color: var(--gray-text) !important; } [carousel] { position: relative; width: 100%; overflow: hidden; display: block; } [carousel] [carouselItem] { position: absolute; top: 0; left: 0; transform: translateY(-50%); transition: ease-in-out 0.4s; display: flex; align-items: center; justify-content: center; } [carousel] [carouselTriggerPrev], [carousel] [carouselTriggerNext] { cursor: pointer; } .context-menu { position: fixed; width: 150px; padding: 5px; display: flex; flex-direction: column; gap: 10px; background: var(--light-bg); border: 1px solid var(--gray-line-2); border-radius: 6px; box-shadow: var(--box-shadow-default); z-index: 50; transition: ease-in-out 0.3s; opacity: 0; } .context-menu.visible { opacity: 1; } .context-menu .action { display: flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 0 7px; } .context-menu .action .title { font-size: 14px; font-weight: 400; } .ngx-slider { margin: 35px -2px 15px !important; } .ngx-slider .ngx-slider-selection { background-color: var(--accent) !important; } .ngx-slider .ngx-slider-pointer { height: 16px !important; width: 16px !important; transform: translate(7px, 7px) !important; background-color: var(--accent) !important; position: relative; } .ngx-slider .ngx-slider-pointer::after { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; height: 8px !important; width: 8px !important; border-radius: 50px !important; } .ngx-slider .ngx-slider-pointer.ngx-slider-active::after { background-color: var(--white-text) !important; } .ngx-slider .ngx-slider-inner-tooltip { position: absolute; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; height: 6px !important; width: 6px !important; border-radius: 50px !important; background-color: var(--white-text) !important; } .ngx-slider .ngx-slider-tick { top: -1px !important; } .ngx-slider .ngx-slider-tick.ngx-slider-selected { background-color: var(--accent) !important; } .ngx-slider .ngx-slider-bubble { font-family: var(--tui-font-heading) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 17px !important; letter-spacing: -0.35px !important; } .ngx-slider .ngx-slider-bar { height: 2px !important; } .grid { min-height: calc(100vh - 60px); background: var(--light-bg-darken); overflow: hidden !important; } .grid.display-grid { background-image: radial-gradient( circle 2px, var(--gridster-grid-color) 100%, transparent 0); background-size: var(--col-width) var(--row-height); background-position: calc(var(--col-width) / 2) calc(var(--row-height) / 2); } .grid .gridster-preview { background: var(--dark-bg-opacity) !important; border: 2px solid var(--accent) !important; } .grid .gridster-row, .grid .gridster-column { border: none; } .grid .gridster-item { border-radius: 6px !important; overflow: hidden !important; box-shadow: var(--box-shadow-gridster); } .grid .gridster-item-moving { z-index: 50 !important; } .grid .gridster-item-resizable-handler.handle-n { height: 4px !important; } .grid .gridster-item-resizable-handler.handle-s { height: 4px !important; } .grid .gridster-item-resizable-handler.handle-e { width: 4px !important; } .grid .gridster-item-resizable-handler.handle-w { width: 4px !important; } .cdk-preview-content { font-family: var(--tui-font-heading); font-size: 14px; font-weight: 500; line-height: 17px; letter-spacing: -0.35px; width: 200px; height: 32px; padding: 0 7px 0 10px; display: flex; justify-content: space-between; align-items: center; opacity: 1 !important; border: none; border-radius: 4px; background-color: var(--light-bg) !important; box-shadow: var(--box-shadow-default); } .cdk-preview-content .inner { display: flex; align-items: center; justify-content: flex-start; gap: 5px; } .cdk-preview-content .drag { width: 16px; height: 16px; } .cdk-preview-content .check-box { width: 18px; height: 18px; border: 1px solid var(--gray-line); } .cdk-preview-content .check-box:checked { background-color: var(--green-primary) !important; } .cdk-drag-placeholder { opacity: 0; } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } /* angular:styles/global:styles */ /*# sourceMappingURL=styles-QRCCHMIB.css.map */