/* 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/theme.less */ /* src/styles.scss */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } ::before, ::after { --tw-content: ""; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: Inter, Sora, sans-serif; font-feature-settings: normal; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } a:hover, a:focus { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #000000D9; } button, [role=button] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } .appContainer { margin-left: auto; margin-right: auto; width: 100%; max-width: 1414px; padding-left: 16px; padding-right: 16px; } @font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 400; src: url(/fonts/Inter/Inter-Regular.woff2) format("woff2"), url(/fonts/Inter/Inter-Regular.woff) format("woff"); } @font-face { font-display: swap; font-family: "Sora"; font-style: normal; font-weight: 400; src: url(/fonts/Sora/Sora-Regular.woff2) format("woff2"), url(/fonts/Sora/Sora-Regular.woff) format("woff"); } @font-face { font-display: swap; font-family: "Sora"; font-style: normal; font-weight: 600; src: url(/fonts/Sora/Sora-Bold.woff2) format("woff2"), url(/fonts/Sora/Sora-Bold.woff) format("woff"); } @font-face { font-display: swap; font-family: "Sora"; font-style: normal; font-weight: 300; src: url(/fonts/Sora/Sora-Light.woff2) format("woff2"), url(/fonts/Sora/Sora-Light.woff) format("woff"); } @font-face { font-display: swap; font-family: "PressStart2P"; font-style: normal; font-weight: 400; src: url(/fonts/PressStart2P/PressStart2P-Regular.woff2) format("woff2"), url(/fonts/PressStart2P/PressStart2P-Regular.woff) format("woff"); } :root { --tui-font-heading: PressStart2P, sans-serif; --tui-font-text: Inter, Sora, sans-serif; --tui-font-heading-1: 2.5rem; --tui-font-heading-2: 2rem; --tui-font-heading-3: 1.5rem; --tui-font-heading-4: 1.25rem; --tui-text-primary: #000000D9; --tui-text-secondary: #9CA3AF; --tui-text-action: #8B5CF6; --tui-background-accent-1: #8B5CF6; --tui-background-accent-1-hover: #F97316; --tui-background-accent-1-pressed: #F97316; --tui-background-accent-2: #F97316; --tui-text-negative: #FF4D4F; --tui-status-negative: #FF4D4F; --tui-text-positive: #22C55E; --tui-status-positive: #22C55E; --tui-status-warning: #F97316; --tui-radius-xs: 0; --tui-radius-s: 0; --tui-radius-m: 0; --tui-radius-l: 0; --tui-radius-xl: 0; } tui-root { border-image: none !important; font: inherit !important; color: inherit; } tui-root button[tuiButton] { border: inherit; font-weight: 400; } tui-root button[tuiButton]:not([size]) { padding-left: 40px; padding-right: 40px; padding-top: 12px; padding-bottom: 16px; font-family: PressStart2P, sans-serif; border-bottom-width: 4px; --tw-border-opacity: 1; border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } tui-root button[tuiButton][size=m] { padding-left: 20px; padding-right: 20px; padding-top: 12px; padding-bottom: 16px; font-family: PressStart2P, sans-serif; font-size: 14px; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } ::before, ::after { --tw-content: ""; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: Inter, Sora, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role=button] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden]:where(:not([hidden=until-found])) { display: none; } html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body, html, #root { min-height: 100vh; overflow-x: auto; } body { --tw-bg-opacity: 1; background-color: rgb(11 15 26 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 1024px) { #root { margin-left: auto; margin-right: auto; min-width: 1920px; } } td[big], th[big] { padding: 64px; } td[medium], th[medium] { padding: 48px; } td[small], th[small] { padding: 32px; } th { font-size: 0.8572rem !important; line-height: 1.667 !important; font-weight: 500 !important; } td { font-size: 0.8572rem; line-height: 1.667; font-weight: 400; } td[big] { font-size: 1rem; line-height: 1.572; font-weight: 400; } td[medium] { font-size: 1rem; line-height: 1.572; font-weight: 400; } pre { font-family: inherit; } :root { --tui-background-base: #EFF4F8; } html { font-size: 16px; } body { font-family: Inter, Sora, sans-serif; font-size: 1rem; line-height: 1.572; font-weight: 400; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: PressStart2P, sans-serif; } h1, .h1 { font-size: 2.5rem; line-height: 1.2; } h2, .h2 { font-size: 2rem; line-height: 1.25; } h3, .h3 { font-size: 1.5rem; line-height: 1.25; } .h4, h4 { font-size: 1.25rem; line-height: 1.2; } table { font-size: 0.8572rem; line-height: 1.667; font-weight: 400; } th { font-size: 1.5rem; line-height: 1.25; } button { font-size: 1rem; line-height: 1.672; font-weight: 400; } .static { position: static; } .\!fixed { position: fixed !important; } .\!absolute { position: absolute !important; } .absolute { position: absolute; } .relative { position: relative; } .inset-x-0 { left: 0px; right: 0px; } .-right-0 { right: -0px; } .-top-4 { top: -16px; } .-top-8 { top: -32px; } .bottom-8 { bottom: 32px; } .bottom-full { bottom: 100%; } .left-0 { left: 0px; } .right-4 { right: 16px; } .right-8 { right: 32px; } .top-0 { top: 0px; } .top-4 { top: 16px; } .top-\[calc\(100\%-6px\)\] { top: calc(100% - 6px); } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .row-span-2 { grid-row: span 2 / span 2; } .mx-auto { margin-left: auto; margin-right: auto; } .my-10 { margin-top: 40px; margin-bottom: 40px; } .my-2 { margin-top: 8px; margin-bottom: 8px; } .my-4 { margin-top: 16px; margin-bottom: 16px; } .-mb-5 { margin-bottom: -20px; } .-ml-\[6px\] { margin-left: -6px; } .-mt-1 { margin-top: -4px; } .-mt-2 { margin-top: -8px; } .mb-2 { margin-bottom: 8px; } .mb-20 { margin-bottom: 80px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-9 { margin-bottom: 36px; } .mb-auto { margin-bottom: auto; } .ml-1 { margin-left: 4px; } .ml-6 { margin-left: 24px; } .ml-auto { margin-left: auto; } .mr-2 { margin-right: 8px; } .mr-auto { margin-right: auto; } .mt-1 { margin-top: 4px; } .mt-12 { margin-top: 48px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-auto { margin-top: auto; } .box-content { box-sizing: content-box; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .size-5 { width: 20px; height: 20px; } .size-6 { width: 24px; height: 24px; } .size-8 { width: 32px; height: 32px; } .h-10 { height: 40px; } .h-16 { height: 64px; } .h-2 { height: 8px; } .h-20 { height: 80px; } .h-5 { height: 20px; } .h-6 { height: 24px; } .h-8 { height: 32px; } .h-\[431px\] { height: 431px; } .h-full { height: 100%; } .min-h-full { min-height: 100%; } .w-1\/5 { width: 20%; } .w-10 { width: 40px; } .w-12 { width: 48px; } .w-16 { width: 64px; } .w-2\/5 { width: 40%; } .w-20 { width: 80px; } .w-23 { width: 92px; } .w-24 { width: 96px; } .w-28 { width: 112px; } .w-30 { width: 120px; } .w-32 { width: 128px; } .w-36 { width: 144px; } .w-40 { width: 160px; } .w-6 { width: 24px; } .w-8 { width: 32px; } .w-\[150px\] { width: 150px; } .w-\[300px\] { width: 300px; } .w-\[400px\] { width: 400px; } .w-\[calc\(100\%-632px\)\] { width: calc(100% - 632px); } .w-fit { width: fit-content; } .w-full { width: 100%; } .w-max { width: max-content; } .min-w-15 { min-width: 60px; } .min-w-\[300px\] { min-width: 300px; } .\!max-w-\[600px\] { max-width: 600px !important; } .max-w-\[1127px\] { max-width: 1127px; } .max-w-\[307px\] { max-width: 307px; } .max-w-\[600px\] { max-width: 600px; } .max-w-\[632px\] { max-width: 632px; } .max-w-\[649px\] { max-width: 649px; } .max-w-\[788px\] { max-width: 788px; } .max-w-\[820px\] { max-width: 820px; } .max-w-\[838px\] { max-width: 838px; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .basis-\[min-content\] { flex-basis: min-content; } .translate-y-18 { --tw-translate-y: 72px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[6px\] { --tw-translate-y: 6px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-pointer { cursor: pointer; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-\[130px_auto\] { grid-template-columns: 130px auto; } .grid-cols-\[649px_1fr\] { grid-template-columns: 649px 1fr; } .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-stretch { justify-content: stretch; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-x-1 { column-gap: 4px; } .gap-x-2 { column-gap: 8px; } .gap-x-4 { column-gap: 16px; } .gap-x-6 { column-gap: 24px; } .gap-x-8 { column-gap: 32px; } .gap-y-1 { row-gap: 4px; } .gap-y-2 { row-gap: 8px; } .gap-y-3 { row-gap: 12px; } .gap-y-4 { row-gap: 16px; } .gap-y-5 { row-gap: 20px; } .gap-y-6 { row-gap: 24px; } .text-nowrap { text-wrap: nowrap; } .\!rounded-full { border-radius: 9999px !important; } .rounded { border-radius: 0.25rem; } .rounded-\[12px\] { border-radius: 12px; } .rounded-\[16px\] { border-radius: 16px; } .rounded-\[8px\] { border-radius: 8px; } .rounded-full { border-radius: 9999px; } .border { border-width: 1px; } .border-4 { border-width: 4px; } .border-b { border-bottom-width: 1px; } .border-l-\[6px\] { border-left-width: 6px; } .border-r-\[6px\] { border-right-width: 6px; } .border-divider { border-color: #0000000F; } .border-primary { --tw-border-opacity: 1; border-color: rgb(139 92 246 / var(--tw-border-opacity, 1)); } .\!border-b-dark { --tw-border-opacity: 1 !important; border-bottom-color: rgb(11 15 26 / var(--tw-border-opacity, 1)) !important; } .\!border-b-warning { --tw-border-opacity: 1 !important; border-bottom-color: rgb(249 115 22 / var(--tw-border-opacity, 1)) !important; } .border-l-primary { --tw-border-opacity: 1; border-left-color: rgb(139 92 246 / var(--tw-border-opacity, 1)); } .bg-\[\#00061A\] { --tw-bg-opacity: 1; background-color: rgb(0 6 26 / var(--tw-bg-opacity, 1)); } .bg-alert { --tw-bg-opacity: 1; background-color: rgb(255 77 79 / var(--tw-bg-opacity, 1)); } .bg-bg-dark { --tw-bg-opacity: 1; background-color: rgb(21 27 45 / var(--tw-bg-opacity, 1)); } .bg-gray10 { --tw-bg-opacity: 1; background-color: rgb(239 244 248 / var(--tw-bg-opacity, 1)); } .bg-primary { --tw-bg-opacity: 1; background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1)); } .bg-success { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .bg-warning { --tw-bg-opacity: 1; background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .p-2 { padding: 8px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-\[2px\] { padding: 2px; } .px-2 { padding-left: 8px; padding-right: 8px; } .px-4 { padding-left: 16px; padding-right: 16px; } .px-5 { padding-left: 20px; padding-right: 20px; } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-3 { padding-top: 12px; padding-bottom: 12px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .py-8 { padding-top: 32px; padding-bottom: 32px; } .pb-10 { padding-bottom: 40px; } .pb-12 { padding-bottom: 48px; } .pb-21 { padding-bottom: 84px; } .pb-4 { padding-bottom: 16px; } .pb-6 { padding-bottom: 24px; } .pb-7 { padding-bottom: 28px; } .pb-8 { padding-bottom: 32px; } .pb-9 { padding-bottom: 36px; } .pl-\[22px\] { padding-left: 22px; } .pt-5 { padding-top: 20px; } .pt-6 { padding-top: 24px; } .text-center { text-align: center; } .font-heading { font-family: PressStart2P, sans-serif; } .font-sans { font-family: Inter, Sora, sans-serif; } .\!text-body { font-size: 1rem !important; line-height: 1.572 !important; font-weight: 400 !important; } .text-\[14px\] { font-size: 14px; } .text-\[21px\] { font-size: 21px; } .text-big-title { font-size: 3rem; line-height: 1.1458333333333333; } .text-body { font-size: 1rem; line-height: 1.572; font-weight: 400; } .text-button-big { font-size: 1.143rem; line-height: 1.5; font-weight: 400; } .text-description { font-size: 0.8572rem; line-height: 1.667; font-weight: 400; } .text-subheading { font-size: 1.25rem; line-height: 1.55; font-weight: 400; } .text-subtitle { font-size: 1.5rem; line-height: 1.2916666666666667; font-weight: 400; } .text-subtitle-small { font-size: 1.25rem; line-height: 1.4; font-weight: 400; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .text-alert { --tw-text-opacity: 1; color: rgb(255 77 79 / var(--tw-text-opacity, 1)); } .text-dark { --tw-text-opacity: 1; color: rgb(11 15 26 / var(--tw-text-opacity, 1)); } .text-gray30 { --tw-text-opacity: 1; color: rgb(130 130 130 / var(--tw-text-opacity, 1)); } .text-secondary { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-success { --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1)); } .text-text { color: #000000D9; } .text-warning { --tw-text-opacity: 1; color: rgb(249 115 22 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .opacity-25 { opacity: 0.25; } .opacity-75 { opacity: 0.75; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .\!transition-transform { transition-property: transform !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .last\:border-b-0:last-child { border-bottom-width: 0px; } /* angular:styles/global:styles */ /*# sourceMappingURL=styles.css.map */