/* 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 1000rem 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 */ .toast-center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .toast-top-center { top: 0; right: 0; width: 100%; } .toast-bottom-center { bottom: 0; right: 0; width: 100%; } .toast-top-full-width { top: 0; right: 0; width: 100%; } .toast-bottom-full-width { bottom: 0; right: 0; width: 100%; } .toast-top-left { top: 12px; left: 12px; } .toast-top-right { top: 12px; right: 12px; } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } .toast-title { font-weight: bold; } .toast-message { word-wrap: break-word; } .toast-message a, .toast-message label { color: #FFFFFF; } .toast-message a:hover { color: #CCCCCC; text-decoration: none; } .toast-close-button { position: relative; right: -0.3em; top: -0.3em; float: right; font-size: 20px; font-weight: bold; color: #FFFFFF; text-shadow: 0 1px 0 #ffffff; } .toast-close-button:hover, .toast-close-button:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; } button.toast-close-button { padding: 0; cursor: pointer; background: transparent; border: 0; } .toast-container { pointer-events: none; position: fixed; z-index: 999999; } .toast-container * { box-sizing: border-box; } .toast-container .ngx-toastr { position: relative; overflow: hidden; margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; background-size: 24px; box-shadow: 0 0 12px #999999; color: #FFFFFF; } .toast-container .ngx-toastr:hover { box-shadow: 0 0 12px #000000; opacity: 1; cursor: pointer; } .toast-info { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+); } .toast-error { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+); } .toast-success { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==); } .toast-warning { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==); } .toast-container.toast-top-center .ngx-toastr, .toast-container.toast-bottom-center .ngx-toastr { width: 300px; margin-left: auto; margin-right: auto; } .toast-container.toast-top-full-width .ngx-toastr, .toast-container.toast-bottom-full-width .ngx-toastr { width: 96%; margin-left: auto; margin-right: auto; } .ngx-toastr { background-color: #030303; pointer-events: auto; } .toast-success { background-color: #51A351; } .toast-error { background-color: #BD362F; } .toast-info { background-color: #2F96B4; } .toast-warning { background-color: #F89406; } .toast-progress { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #000000; opacity: 0.4; } @media all and (max-width: 240px) { .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 11em; } .toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 241px) and (max-width: 480px) { .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 18em; } .toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 481px) and (max-width: 768px) { .toast-container .ngx-toastr.div { padding: 15px 15px 15px 50px; width: 25em; } } html, body { width: 100%; max-width: 100%; height: 100%; touch-action: manipulation; overflow-x: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: "Manrope", sans-serif; text-align: left; font-weight: 500; font-size: 15px; line-height: 24px; } *, *::after, *::before { box-sizing: border-box; margin: 0; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ul, ol { padding: 0; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; } ul[class] { list-style: none; } img { max-width: 100%; display: block; height: auto; } button, a { cursor: pointer; } input:hover, input:focus, input:active, button:hover, button:focus, button:active { outline: none; } input, button, textarea, select { font: inherit; } a { text-decoration: none; color: inherit; display: block; } a:active, a:focus, a:hover { color: inherit; } ul { list-style: none; } small { font-size: inherit; line-height: inherit; } h1, h2, h3, h4, h5 { font-weight: 800; line-height: 100%; font-size: inherit; } h2 { font-size: 19px; line-height: 28px; } h3 { font-size: 17px; line-height: 28px; } b { font-weight: 800; } :root { --tui-text-primary: #111111; --tui-text-action: #5044F8; --tui-background-accent-1: #5044F8; --tui-background-accent-1-hover: rgba(80, 68, 248, 0.66); --tui-background-accent-1-pressed: rgba(80, 68, 248, 0.35); --tui-text-negative: #DD4C1E; --tui-text-positive: #3AA981; --tui-font-text-m: 500 15px/24px var(--tui-font-family); --tui-font-text-s: 500 15px/24px var(--tui-font-family); } .object-cover { object-fit: cover; } .cursor-pointer { cursor: pointer; } .nowrap { white-space: nowrap; } .underline { text-decoration: underline; } label { font-weight: 500 !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .toast-container.toast-top-center .ngx-toastr, .toast-container.toast-bottom-center .ngx-toastr { max-width: 400px !important; width: 100% !important; } tui-root { border-image: linear-gradient(#EDEDED, #EDEDED) fill 0/0/0 0 100vh 0 !important; } .t-tag { font-weight: 500 !important; font-size: 13px !important; line-height: 20px !important; color: #111111 !important; background: rgba(0, 0, 0, 0.04) !important; } .t-tag:active, .t-tag:hover { background: #F6F6F6 !important; } .t-placeholder { font-weight: 500 !important; } .tui-table__td, .tui-table__th { word-break: normal !important; border-left: none !important; border-right: none !important; font-size: 13px !important; line-height: 20px !important; } .tui-table__td:first-child, .tui-table__th:first-child { padding-left: 0 !important; } .tui-table__td:last-child, .tui-table__th:last-child { padding-right: 0 !important; } .tui-table__th { border-top: none !important; font-weight: 500 !important; } .tui-table__th_nowrap { white-space: nowrap; } .tui-table__link { cursor: pointer; text-decoration: underline; } .tui-pagination { width: fit-content; margin-left: auto; } .tui-pagination [automation-id=tui-pagination__element] { color: #111111 !important; } .tui-pagination [tuiAppearance][data-appearance=primary] { color: var(--tui-text-primary-on-accent-1) !important; } @media (max-width: 640px) { .tui-pagination { margin-right: auto; } } ._sticky:after, ._stuck ._sticky:after { background: white !important; } .flex-shrink { flex-shrink: 0; } .btn_w-full { width: 100%; } .btn_w-fit { width: fit-content; } .btn_none { padding: 0; border: none; background: none; } .form-group { display: flex; flex-direction: column; min-width: 0; } .form-group_mb-20 { margin-bottom: 20px; } .form-checkbox_invalid input { outline: 1px solid var(--tui-status-negative) !important; } @media (max-width: 640px) { .form-select { font-weight: 500; font-size: 13px; line-height: 20px; } } .form-input_placeholder::placeholder { font-weight: 500; } .form-label { display: block; margin-bottom: 10px; } .form-label_required:after { content: " *"; color: var(--tui-status-negative); } .container { padding: 20px; } .container_pt-0 { padding-top: 0; } .container_pb-0 { padding-bottom: 0; } .container_w-797 { max-width: 797px; } .container_w-765 { max-width: 765px; } .container_flex { flex: 1 1 auto; } .container_grid { display: grid; grid-template-columns: 1fr 269px; gap: 56px; } @media (max-width: 1200px) { .container_grid { gap: 30px; display: flex; flex-direction: column-reverse; } } @media (max-width: 640px) { .container_grid { display: flex; flex-direction: column-reverse; } } .container-head { padding: 20px; display: flex; align-items: center; gap: 20px; } .container-head_border { border-bottom: 1px solid #EDEDED; } .container-head__row { display: flex; align-items: center; gap: 20px; } .container-head__title { font-weight: 800; font-size: 24px; line-height: 28px; display: flex; align-items: end; } .container-head__title_count { color: #B0B0B0; font-weight: 500; font-size: 19px; line-height: 24px; display: flex; align-items: center; } .container-head__title_count:before { content: ""; display: block; width: 6px; height: 6px; background: #B0B0B0; border-radius: 50%; margin: 0 12px; flex-shrink: 0; } @media (max-width: 640px) { .container-head__link { height: 32px !important; width: 32px; padding: 8px !important; } } .container-head__link_right { margin-left: auto; } @media (max-width: 640px) { .container-head__link:before { font-size: 16px !important; } } tui-error.ng-touched.ng-invalid, tui-error.ng-touched.ng-valid { margin-top: 10px; } tui-dialog[data-size=s] { inline-size: 553px !important; border-radius: 12px !important; } @media (max-width: 768px) { tui-dialog[data-size=s] { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } } .confirm__head { padding-bottom: 20px; border-bottom: 1px solid #E0E0E0; margin-bottom: 20px; } .confirm__title { font-weight: 800; font-size: 19px; line-height: 28px; margin-bottom: 20px; } .confirm__title_mb-0 { margin-bottom: 0; } .confirm__btns { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; } .confirm__btn_delete { color: var(--tui-status-negative) !important; } .confirm__btn_delete-border { --tui-background-accent-1: var(--tui-status-negative) !important; --tui-background-accent-1-hover: var(--tui-status-negative) !important; color: var(--tui-status-negative) !important; } .confirm__btn_black { color: #111111 !important; } .radio { display: flex; align-items: center; gap: 12px; } .item-tabs { display: flex; justify-content: start; gap: 34px; margin-bottom: 20px; border-bottom: 1px solid #E0E0E0; overflow-x: auto; min-width: 0; width: 100%; } @media (max-width: 450px) { .item-tabs { } } .item-tabs__tab { padding: 12px 0; font-size: 13px; line-height: 20px; color: #959595; border-bottom: 2px solid transparent; cursor: pointer; } .item-tabs__tab_active { color: #191C30; border-color: #526ED3; } .item-tabs__btn { height: fit-content; margin-left: auto; font-weight: 800; font-size: 13px; line-height: 20px; text-decoration-line: underline; color: #5044F8; } .button--red { box-shadow: inset 0 0 0 2px var(--tui-text-negative) !important; color: var(--tui-text-negative) !important; } .info-block { display: flex; flex-direction: column; padding: 20px; width: 100%; border: 1px solid #e5e5e5; border-radius: 12px; box-sizing: border-box; background: #fff; font-family: sans-serif; row-gap: 20px; } .info-block__item { display: grid; grid-template-columns: minmax(140px, 170px) 1fr; column-gap: 20px; } .info-block__label { font-size: 13px; color: #959595; } .info-block__value { font-size: 13px; } /* angular:styles/global:styles */ /*# sourceMappingURL=styles.css.map */