/* t-design-system v0.1.0 */ @layer tds.reset, tds.tokens, tds.themes, tds.base, tds.components, tds.utilities, tds.visibility; @layer tds.tokens { :root { --layout-reading-width: 48rem; --composer-reserved-size: 10rem; --composer-input-max-size: calc(var(--space-16) * 2); --media-max-size: 55dvh; --fs-xs: clamp(.75rem, .7rem + .2vw, .8125rem); --fs-sm: clamp(.8125rem, .78rem + .25vw, .875rem); --fs: 1rem; --fs-lg: clamp(1rem, .98rem + .35vw, 1.125rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-display: clamp(1.5rem, 1.3rem + 1vw, 2rem); --radius-xs: .5rem; --radius-sm: .625rem; --radius: .75rem; --radius-lg: 1rem; --radius-pill: 9999px; --radius-control: var(--radius); --radius-inset: calc(var(--radius-control) - var(--space-1)); --control-h: clamp(2.75rem, 2.6rem + .8vw, 3rem); --choice-size: 1.5rem; --switch-h: calc(var(--choice-size) + .125rem); --chip-h: clamp(2rem, 1.9rem + .5vw, 2.25rem); --icon-btn-prep: clamp(2.25rem, 2.1rem + .6vw, 2.5rem); --icon-btn: calc(var(--icon-btn-prep) + .25rem); --icon-avatar: calc(var(--icon-btn-prep) + 1.5rem); --icon-size: 1.25rem; --icon-stroke: 2; --select-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='0.65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --select-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='0.65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --select-arrow-hover-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --select-arrow-hover-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --select-arrow: var(--select-arrow-light); --icon-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --icon-mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); --icon-mask-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --icon-chevron-right-on-action: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --icon-mask-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --color-white: #fff; --color-black: #000; --mask-opaque: var(--color-black); --switch-knob-color: var(--color-white); --avatar-initials-color: var(--text-color); --spinner-color: var(--progress-color); --spinner-track-color: var(--accent-soft); --option-gap: 2px; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --duration-fast: 120ms; --duration: 180ms; --ease: cubic-bezier(.23, 1, .32, 1); --duration-fade-in: var(--duration); --duration-fade-out: var(--duration-fast); --z-sticky: 20; --z-overlay: 100; --z-toast: 120; --progress-height: .875rem; --progress-duration: 1s; --progress-stripe-speed: .8s; --progress-stripe-size: 1.5rem; --progress-stripe-blur: 2px; --progress-stripe-color: rgb(255 255 255 / .32); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --ios-h: 0px; --panel-lightness-rise: .06; --panel-lightness-floor: .215; --surface-lightness-step: .065975; --control-hover-lightness-step: .023861; --control-hover-brightness: 1; --border-color: rgb(from var(--text-color) r g b / 0.08); --border-subtle-color: rgb(from var(--text-color) r g b / 0.04); --border: 1px solid var(--border-color); --border-transparent: 1px solid var(--border-subtle-color); --background-main: var(--bg-color); --background-raised: oklch(from var(--bg-color) clamp(var(--panel-lightness-floor), calc(l + var(--panel-lightness-rise)), 1) c h); --background-panel: var(--background-raised); --background-muted-derived: oklch(from var(--background-panel) clamp(0, calc(l + var(--color-inversion) * var(--surface-lightness-step)), 1) c h); --background-muted: var(--background-muted-derived); --semantic-readable-dark-weight: 55%; --text-main: var(--text-color); --text-secondary: color-mix(in srgb, var(--text-main) 70%, var(--background-panel)); --text-muted: color-mix(in srgb, var(--text-main) 55%, var(--background-panel)); --accent-main: var(--button-color); --accent-strong: color-mix(in srgb, var(--accent-main) 72%, var(--color-black)); --accent-soft: color-mix(in srgb, var(--accent-main) 12%, var(--surface-bg)); --accent-readable: light-dark(color-mix(in srgb, var(--accent-main) 72%, var(--color-black)), color-mix(in srgb, var(--accent-main) var(--semantic-readable-dark-weight), var(--color-white))); --danger-main: var(--destructive-text-color); --danger-strong: color-mix(in srgb, var(--danger-main) 72%, var(--color-black)); --danger-soft: color-mix(in srgb, var(--danger-main) 10%, var(--surface-bg)); --danger-readable: light-dark(color-mix(in srgb, var(--danger-main) 72%, var(--color-black)), color-mix(in srgb, var(--danger-main) var(--semantic-readable-dark-weight), var(--color-white))); --badge-primary-bg: light-dark(var(--accent-soft), var(--accent-strong)); --badge-primary-text: light-dark(var(--accent-strong), var(--text-main)); --badge-danger-bg: light-dark(var(--danger-soft), var(--danger-strong)); --badge-danger-text: light-dark(var(--danger-strong), var(--text-main)); --ripple-on-dark: rgb(from var(--color-white) r g b / 0.25); --ripple-on-light: rgb(from var(--color-black) r g b / 0.25); --border-active: 1px solid var(--accent-main); --focus: 0 0 0 .25rem var(--accent-soft); --section-bg-color: var(--background-panel); --secondary-bg-color: var(--background-muted); --header-bg-color: var(--background-muted); --bottom-bar-bg-color: var(--background-muted); --section-separator-color: var(--border-color); --hint-color: var(--text-muted); --subtitle-text-color: var(--text-secondary); --section-header-text-color: var(--text-secondary); --accent-text-color: var(--accent-main); --link-color: var(--accent-main); --button-text-color: var(--color-white); --highlight-bg-color: var(--background-panel); --highlight-ficus-color: var(--background-muted); --shadow-soft: var(--shadow-overlay); --shadow-elev: var(--shadow-control); --bg-body: var(--background-main); --section-color: var(--background-panel); --section-color2: var(--background-muted); --field-bg: var(--background-muted); --field-bg-hover: var(--background-panel); --secondary-bg-color-transparent: var(--background-muted); --button-color-transparent: var(--accent-strong); --destructive-text-color-transparent: var(--danger-strong); --section-bg-color-transparent: var(--background-panel); --text-link: var(--accent-readable); --progress-color: var(--accent-readable); --progress-track-color: var(--background-muted); --text-danger: var(--danger-readable); --action-bg: var(--accent-strong); --action-hover-bg: var(--accent-strong); --action-danger-bg: var(--danger-strong); --control-border-color: rgb(from var(--text-main) r g b / 0.5); --choice-border-color: var(--action-border-color); --disabled-opacity: .5; --border-control: 1px solid var(--control-border-color); --field-border-color: var(--border-color); --border-field: 1px solid var(--field-border-color); --group-border-color: var(--field-border-color); --action-border-color: rgb(from var(--text-main) r g b / 0.04); --border-action: 1px solid var(--action-border-color); --panel-hover-border-color: rgb(from var(--text-main) r g b / 0.24); --switch-track-color: var(--background-muted); --switch-border-color: var(--action-border-color); --notice-danger-bg: var(--danger-soft); --surface-bg: var(--section-color); --floating-bg: var(--section-color); --floating-color: var(--text-color); --floating-border: var(--border); --floating-shadow: var(--shadow-overlay); --ring-bg: var(--background-main); --surface-muted: var(--secondary-bg-color); --control-hover-surface: var(--surface-bg); --overlay-bg: rgb(from var(--color-black) r g b / 0.66); --overlay-text: var(--color-white); --shadow-control: 0 1px 3px rgb(from var(--color-black) r g b / 0.12); --shadow-overlay: 0 .75rem 3rem rgb(from var(--color-black) r g b / 0.2); } @media (prefers-contrast: more) { :root { --field-border-color: var(--control-border-color); --action-border-color: var(--control-border-color); } } } @layer tds.themes { :root { color-scheme: light; --color-inversion: -1; --select-arrow: var(--select-arrow-light); --select-arrow-hover: var(--select-arrow-hover-light); --tds-bg: #f5f5f5; --tds-button: #2481cc; --tds-text: #000000; --tds-destructive-text: #ff3b30; --bg-color: var(--tds-bg); --button-color: var(--tds-button); --text-color: var(--tds-text); --destructive-text-color: var(--tds-destructive-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-inversion: 1; --select-arrow: var(--select-arrow-dark); --select-arrow-hover: var(--select-arrow-hover-dark); --tds-bg: #151e27; --tds-button: #2ea6ff; --tds-text: #ffffff; --tds-destructive-text: #ef5b5b; } :root:not([data-theme])[data-platform=ios] { color-scheme: dark; --color-inversion: 1; --select-arrow: var(--select-arrow-dark); --select-arrow-hover: var(--select-arrow-hover-dark); --tds-bg: #000000; --tds-button: #3e88f7; --tds-text: #ffffff; --tds-destructive-text: #eb5545; } } :root[data-theme=dark] { color-scheme: dark; --color-inversion: 1; --select-arrow: var(--select-arrow-dark); --select-arrow-hover: var(--select-arrow-hover-dark); --tds-bg: #151e27; --tds-button: #2ea6ff; --tds-text: #ffffff; --tds-destructive-text: #ef5b5b; } :root[data-theme=dark][data-platform=ios], :root[data-theme=ios-dark] { color-scheme: dark; --color-inversion: 1; --select-arrow: var(--select-arrow-dark); --select-arrow-hover: var(--select-arrow-hover-dark); --tds-bg: #000000; --tds-button: #3e88f7; --tds-text: #ffffff; --tds-destructive-text: #eb5545; } :root[data-theme=light] { color-scheme: light; --color-inversion: -1; --select-arrow: var(--select-arrow-light); --select-arrow-hover: var(--select-arrow-hover-light); --tds-bg: #f5f5f5; --tds-button: #2481cc; --tds-text: #000000; --tds-destructive-text: #ff3b30; } } @layer tds.components { :where(:is(button[class*=tg-], .tg-btn, .tg-icon-btn, .tg-chip, .tg-tab, .tg-dot, .tg-tabbar__item, a.tg-badge[href], a.tg-list-item[href], a.tg-menu__item[href], a.tg-pager__link[href], a.tg-site-nav__link[href], .tg-disclosure__trigger, .tg-bottom-panel__header, .tg-bottom-panel__trigger, .tg-segmented__item, a.tg-sidebar__link[href], summary.tg-sidebar__link, a.tg-nav-menu__link[href], a.tg-nav-menu__top[href], .tg-command__item, .tg-listbox__option, .tg-check, .tg-radio):not(.tg-switch, [role=switch])) { --control-idle-bg: transparent; --control-hover-bg: var(--control-hover-surface); } :is(button[class*=tg-], .tg-btn, .tg-icon-btn, .tg-chip, .tg-tab, .tg-dot, .tg-tabbar__item, a.tg-badge[href], a.tg-list-item[href], a.tg-menu__item[href], a.tg-pager__link[href], a.tg-site-nav__link[href], .tg-disclosure__trigger, .tg-bottom-panel__header, .tg-bottom-panel__trigger, .tg-segmented__item, a.tg-sidebar__link[href], summary.tg-sidebar__link, a.tg-nav-menu__link[href], a.tg-nav-menu__top[href], .tg-command__item, .tg-listbox__option, .tg-check, .tg-radio):not(.tg-switch, [role=switch]), input[type=file].tg-input::file-selector-button { touch-action: manipulation; transition: background-color var(--control-paint-duration, var(--duration)) var(--ease), color var(--control-paint-duration, var(--duration)) var(--ease), border-color var(--duration) var(--ease), transform var(--duration-fast) var(--ease), filter var(--duration-fast) var(--ease); } :is(.tg-btn--ghost, .tg-icon-btn--ghost, .tg-search__clear, .tg-tag-input__remove, .tg-wheel__option):not([inert]) { --control-hover-lightness-step: 0; --control-idle-bg: transparent; --control-hover-bg: transparent; --control-hover-filter: none; border-color: transparent; } :is(.tg-btn--ghost, .tg-icon-btn--ghost, .tg-search__clear, .tg-tag-input__remove, .tg-wheel__option):not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *)):is(:active, [data-pressed=true]) { background-color: transparent; color: var(--accent-strong); filter: none; } @media (hover: hover) and (pointer: fine) { :is(button[class*=tg-], .tg-btn, .tg-icon-btn, .tg-chip, .tg-tab, .tg-dot, .tg-tabbar__item, a.tg-badge[href], a.tg-list-item[href], a.tg-menu__item[href], a.tg-pager__link[href], a.tg-site-nav__link[href], .tg-disclosure__trigger, .tg-bottom-panel__header, .tg-bottom-panel__trigger, .tg-segmented__item, a.tg-sidebar__link[href], summary.tg-sidebar__link, a.tg-nav-menu__link[href], a.tg-nav-menu__top[href], .tg-command__item, .tg-listbox__option, .tg-check, .tg-radio):not(.tg-switch, [role=switch]):not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *)):hover, .tg-choice:hover > :is(button[class*=tg-], .tg-btn, .tg-icon-btn, .tg-chip, .tg-tab, .tg-dot, .tg-tabbar__item, a.tg-badge[href], a.tg-list-item[href], a.tg-menu__item[href], a.tg-pager__link[href], a.tg-site-nav__link[href], .tg-disclosure__trigger, .tg-bottom-panel__header, .tg-bottom-panel__trigger, .tg-segmented__item, a.tg-sidebar__link[href], summary.tg-sidebar__link, a.tg-nav-menu__link[href], a.tg-nav-menu__top[href], .tg-command__item, .tg-listbox__option, .tg-check, .tg-radio):not(.tg-switch, [role=switch]):not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *)), input[type=file].tg-input:not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *)):hover::file-selector-button { background-color: oklch(from var(--control-hover-bg) clamp(0, calc(l + var(--color-inversion) * var(--control-hover-lightness-step)), 1) c h); filter: var(--control-hover-filter, brightness(var(--control-hover-brightness, 1))); cursor: pointer; } .tg-switch:not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *)):hover::before, .tg-choice:hover > .tg-switch:not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *))::before { filter: brightness(var(--control-hover-brightness, 1)); } :is(.tg-btn--ghost, .tg-icon-btn--ghost, .tg-search__clear, .tg-tag-input__remove, .tg-wheel__option):not([inert]):where(:not(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *, [inert] *)):hover:where(:not(:active, [data-pressed=true])) { color: var(--text-color); } :is(button[class*=tg-], .tg-btn, .tg-icon-btn, .tg-chip, .tg-tab, .tg-dot, .tg-tabbar__item, a.tg-badge[href], a.tg-list-item[href], a.tg-menu__item[href], a.tg-pager__link[href], a.tg-site-nav__link[href], .tg-disclosure__trigger, .tg-bottom-panel__header, .tg-bottom-panel__trigger, .tg-segmented__item, a.tg-sidebar__link[href], summary.tg-sidebar__link, a.tg-nav-menu__link[href], a.tg-nav-menu__top[href], .tg-command__item, .tg-listbox__option, .tg-check, .tg-radio):not(.tg-switch, [role=switch]):is(:disabled, [disabled], [aria-disabled=true], [disabled] *, [aria-disabled=true] *):hover, input[type=file].tg-input:disabled:hover::file-selector-button { background-color: var(--control-idle-bg); filter: none; cursor: not-allowed; } } input[type=file].tg-input:disabled, input[type=file].tg-input:disabled::file-selector-button { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { :is(button[class*=tg-], .tg-btn, .tg-icon-btn, .tg-chip, .tg-tab, .tg-dot, .tg-tabbar__item, a.tg-badge[href], a.tg-list-item[href], a.tg-menu__item[href], a.tg-pager__link[href], a.tg-site-nav__link[href], .tg-disclosure__trigger, .tg-bottom-panel__header, .tg-bottom-panel__trigger, .tg-segmented__item, a.tg-sidebar__link[href], summary.tg-sidebar__link, a.tg-nav-menu__link[href], a.tg-nav-menu__top[href], .tg-command__item, .tg-listbox__option, .tg-check, .tg-radio):not(.tg-switch, [role=switch]), input[type=file].tg-input::file-selector-button { transition: none; } } } @layer tds.reset { *, *::before, *::after { box-sizing: border-box; } :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :where(body) { margin: 0; } } @layer tds.base { :where(body) { background: var(--bg-body); color: var(--text-color); font: var(--fs)/1.5 var(--font-family); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } :where(.tg-btn, .tg-icon-btn, .tg-input, .tg-select, .tg-textarea, .tg-tab, .tg-tabbar__item, .tg-switch, .tg-chip, .tg-avatar, .tg-dot, .tg-menu__item, .tg-pager__link, .tg-site-nav__link, .tg-table__sort, .tg-input-group__control, .tg-input-group__addon, .tg-segmented__item, .tg-listbox-trigger, .tg-nav-menu__trigger, .tg-menubar__item) { font: inherit; letter-spacing: inherit; color: inherit; } :where([tabindex="-1"]:not(:any-link, button, input, select, textarea, summary, iframe, audio, video, [role], [contenteditable])):focus { outline: none; } :where(.tg-btn, .tg-icon-btn, .tg-tab, .tg-tabbar__item, .tg-switch, .tg-chip, .tg-avatar, .tg-check, .tg-radio, .tg-link, .tg-dot, .tg-pager__link, .tg-site-nav__link, .tg-table__sort):focus-visible { outline: 2px solid var(--text-link); outline-offset: 3px; } :where(input, textarea) { caret-color: var(--text-link); } .tg-link { color: var(--text-link); text-underline-offset: 0.2em; } button:where([class*=tg-]) { -webkit-user-select: none; user-select: none; } button.tg-avatar img { -webkit-user-drag: none; pointer-events: none; } :is(.tg-link, .tg-error-summary a):hover { text-decoration-thickness: 2px; } @media (prefers-reduced-motion: reduce) { :where([class*=tg-], [class*=tg-]::before, [class*=tg-]::after) { --duration: 0s; --duration-fast: 0s; --progress-duration: 0s; --duration-fade-in: 120ms; --duration-fade-out: 120ms; animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } } @layer tds.visibility { [hidden] { display: none; } } @layer tds.components { :is(.tg-btn, .tg-icon-btn, .tg-chip, .tg-switch, .tg-tab, .tg-tabbar__item, .tg-avatar, .tg-dot, .tg-menu__item, .tg-pager__link, .tg-site-nav__link, .tg-table__sort):is(:disabled, [aria-disabled=true]) { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; } } @layer tds.components { .tg-icon { display: inline-block; inline-size: var(--icon-size); block-size: var(--icon-size); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .tg-icon--sm { --icon-size: 1rem; } .tg-icon--lg { --icon-size: 1.5rem; } } @layer tds.components { :is(.tg-btn, .tg-icon-btn, .tg-chip) { box-sizing: border-box; --control-idle-bg: var(--surface-muted); --control-hover-bg: var(--control-idle-bg); --control-color: var(--text-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 0 0 auto; max-inline-size: 100%; block-size: var(--control-h); min-block-size: var(--control-h); padding-block: 0; border: var(--border-action); background: var(--control-idle-bg); color: var(--control-color); font-size: var(--fs); font-weight: var(--fw-medium); line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; vertical-align: middle; overflow-wrap: anywhere; } :is(.tg-btn, .tg-icon-btn, .tg-chip) svg:not(.tg-icon) { inline-size: var(--icon-size); block-size: var(--icon-size); flex-shrink: 0; } :is(.tg-btn, .tg-icon-btn, .tg-chip):where(:not(:disabled, [aria-disabled=true])):is(:active, [data-pressed=true]) { transform: scale(0.98); } .tg-btn { min-inline-size: var(--control-h); block-size: auto; padding-block: var(--space-2); padding-inline: var(--space-4); border-radius: var(--radius-control); } .tg-btn--ghost { --control-color: var(--text-link); } .tg-btn--destructive { --control-idle-bg: var(--action-danger-bg); --control-color: var(--button-text-color); } .tg-btn--sm { padding-inline: var(--space-3); font-size: var(--fs-sm); } .tg-btn--lg { padding-inline: var(--space-6); } .tg-btn-box { inline-size: var(--control-h); padding-inline: var(--space-2); } .tg-btn-s1 { padding-inline: var(--space-1); } .tg-btn-s2 { padding-inline: var(--space-2); } .tg-btn-s3 { padding-inline: var(--space-3); } .tg-icon-btn { min-inline-size: var(--control-h); padding-inline: var(--space-2); border-radius: var(--radius-control); } .tg-btn--pill, .tg-icon-btn--pill { border-radius: var(--radius-pill); } .tg-btn--primary, .tg-icon-btn--primary { --control-idle-bg: var(--action-bg); --control-color: var(--button-text-color); } .tg-icon-btn--ghost { --control-color: var(--text-secondary); } .tg-btn--stacked { flex-direction: column; block-size: auto; min-block-size: calc(var(--control-h) * 2); padding: var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-regular); } :is(.tg-btn--stacked, .tg-toggle)[aria-pressed=true] { --control-idle-bg: var(--accent-soft); --control-color: var(--text-link); border-color: var(--accent-main); } .tg-btn__icon { flex: 0 0 auto; } .tg-btn__label { display: inline-flex; flex-direction: column; min-inline-size: 0; } .tg-btn:has(.tg-btn__subtext) { padding-block: var(--space-1); line-height: 1.15; } .tg-btn__subtext { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 1.2; } .tg-btn:has(.tg-btn__subtext) { justify-content: flex-start; text-align: start; } .tg-btn--icon-end { flex-direction: row-reverse; } .tg-chip { padding-inline: var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-sm); } .tg-chip:is([aria-pressed=true], [aria-checked=true]) { --control-idle-bg: var(--action-bg); --control-color: var(--button-text-color); border-color: transparent; } .tg-btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-inline-size: 100%; } :is(.tg-btn-group--attached, .tg-split-btn) { display: inline-flex; flex-wrap: nowrap; gap: 0; isolation: isolate; } :is(.tg-btn-group--attached, .tg-split-btn) > :is(.tg-btn, .tg-icon-btn, .tg-select, .tg-input) { position: relative; flex: 0 0 auto; } :is(.tg-btn-group--attached, .tg-split-btn) > :is(.tg-btn, .tg-icon-btn, .tg-select, .tg-input):focus-visible { z-index: 1; } :is(.tg-btn-group--attached, .tg-split-btn) > .tg-btn { white-space: nowrap; } :is(.tg-btn-group--attached, .tg-split-btn) > :is(.tg-select, .tg-input) { flex: 1 1 auto; inline-size: auto; min-inline-size: 0; } :is(.tg-btn-group--attached, .tg-split-btn) > :not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; } :is(.tg-btn-group--attached, .tg-split-btn) > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; } :is(.tg-btn-group--attached, .tg-split-btn) > :is(.tg-btn--secondary, .tg-icon-btn:not(.tg-icon-btn--primary, .tg-icon-btn--ghost), .tg-select, .tg-input) + :is(.tg-btn--secondary, .tg-icon-btn:not(.tg-icon-btn--primary, .tg-icon-btn--ghost), .tg-select, .tg-input) { margin-inline-start: -1px; } :is(.tg-btn-group--attached, .tg-split-btn) > :is(.tg-btn--secondary, .tg-icon-btn:not(.tg-icon-btn--primary, .tg-icon-btn--ghost)) { border-color: var(--group-border-color); } :is(.tg-btn-group--attached, .tg-split-btn) > :is(.tg-btn--primary, .tg-icon-btn--primary, .tg-btn--destructive) + :is(.tg-btn--primary, .tg-icon-btn--primary, .tg-btn--destructive)::before { content: ""; position: absolute; inset-block: 25%; inset-inline-start: 0; inline-size: 1px; background: currentColor; opacity: 0.32; } .tg-split-btn > .tg-split-btn__main { min-inline-size: 0; } .tg-split-btn > .tg-split-btn__menu { inline-size: auto; min-inline-size: var(--control-h); padding-inline: var(--space-3); } @media (max-width: 22.5rem) { .tg-btn-group--attached { flex-direction: column; align-items: stretch; inline-size: 100%; } .tg-btn-group--attached > :not(:first-child) { margin-inline-start: 0; margin-block-start: -1px; } .tg-btn-group--attached > :not(:first-child), .tg-btn-group--attached > :not(:last-child) { border-radius: 0; } .tg-btn-group--attached > :first-child { border-start-start-radius: var(--radius-control); border-start-end-radius: var(--radius-control); } .tg-btn-group--attached > :last-child { border-end-start-radius: var(--radius-control); border-end-end-radius: var(--radius-control); } .tg-btn-group--attached > *::before { inset-block: 0 auto; inset-inline: 25%; inline-size: auto; block-size: 1px; } } } @layer tds.components { .tg-menu { --menu-item-h: 2.75rem; display: grid; align-content: start; gap: var(--option-gap); min-inline-size: min(12rem, var(--tg-menu-available-inline, 100vw)); max-inline-size: min(22rem, 100vw - var(--space-8), var(--tg-menu-available-inline, 100vw)); max-block-size: min(28rem, 100dvh - var(--space-8), var(--tg-menu-available-block, 100dvh)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1); border: var(--floating-border); border-radius: var(--radius-control); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); font-size: var(--fs); line-height: 1.4; overflow-wrap: anywhere; } .tg-menu [role=group] { display: grid; align-content: start; gap: var(--option-gap); } .tg-menu[popover] { position: fixed; inset: auto; inset-block-start: var(--tg-anchor-block, auto); inset-inline-start: var(--tg-anchor-inline, auto); margin: 0; transform-origin: var(--tg-menu-origin, top left); opacity: 0; transform: scale(0.97); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), overlay var(--duration-fade-out) allow-discrete, display var(--duration-fade-out) allow-discrete; } .tg-menu[popover]:dir(rtl) { transform-origin: var(--tg-menu-origin, top right); } .tg-menu[popover]:popover-open { opacity: 1; transform: none; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), overlay var(--duration-fade-in) allow-discrete, display var(--duration-fade-in) allow-discrete; } @starting-style { .tg-menu[popover]:popover-open { opacity: 0; transform: scale(0.97); } } .tg-menu[popover]:not(:popover-open) { display: none; } .tg-menu[popover][data-instant] { transition: none; } @supports (position-area: block-end) { .tg-menu[popover]:not([data-positioned]) { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; margin-block: var(--space-1); } } .tg-menu__item { --control-hover-filter: none; --control-paint-duration: 0s; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--menu-item-h); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } .tg-menu__item > .tg-icon { color: var(--text-secondary); } .tg-menu__item[data-active] { background: var(--control-hover-bg); } .tg-menu__item:focus { outline: none; } .tg-menu__item:focus-visible { background: var(--control-hover-bg); outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-menu__item--destructive { --control-hover-bg: var(--danger-soft); color: var(--text-danger); } .tg-menu__item--destructive > .tg-icon { color: inherit; } .tg-menu__item:is([role=menuitemcheckbox], [role=menuitemradio]) { position: relative; padding-inline-start: calc(var(--space-3) + 1rem + var(--space-3)); } .tg-menu__item:is([role=menuitemcheckbox], [role=menuitemradio])::before { content: ""; inline-size: 1rem; block-size: 1rem; background: currentColor; mask: var(--icon-mask-check) center/contain no-repeat; position: absolute; inset-inline-start: var(--space-3); opacity: 0; } .tg-menu__item:is([role=menuitemcheckbox], [role=menuitemradio])[aria-checked=true] { --control-idle-bg: var(--surface-muted); --control-hover-bg: var(--control-idle-bg); color: var(--text-color); font-weight: var(--fw-medium); } .tg-menu__item:is([role=menuitemcheckbox], [role=menuitemradio])[aria-checked=true]::before { opacity: 1; } .tg-menu__item[role=menuitemradio]::before { inset-inline-start: calc(var(--space-3) + 0.3125rem); inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; mask: none; } .tg-menu__item[aria-haspopup=menu]::after { content: ""; flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; margin-inline-start: auto; background: var(--text-secondary); mask: var(--icon-mask-chevron-right) center/contain no-repeat; } .tg-menu__item[aria-haspopup=menu]:dir(rtl)::after { transform: scaleX(-1); } .tg-menu__text { display: grid; flex: 1 1 auto; min-inline-size: 0; } .tg-menu__item-meta { font-size: var(--fs-sm); color: var(--text-secondary); } .tg-menu__label { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: 0.02em; } .tg-menu__separator { block-size: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--border-color); } .tg-menu__shortcut { flex: 0 0 auto; margin-inline-start: auto; padding-inline-start: var(--space-4); font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); } .tg-menu__item--destructive .tg-menu__item-meta, .tg-menu__item--destructive .tg-menu__shortcut { color: inherit; } @media (max-width: 36rem) and (pointer: coarse) { .tg-menu[popover]:not([data-positioned]), .tg-menu[popover][data-positioned] { --tg-menu-origin: bottom center; position-area: none; inset: auto 0 0; inline-size: auto; max-inline-size: none; margin: var(--space-2); margin-block-end: calc(var(--space-2) + var(--safe-area-bottom)); border-radius: var(--radius-lg); } } @media (forced-colors: active) { .tg-menu__item:focus-visible { outline-color: Highlight; } .tg-menu__separator { background: CanvasText; } } } @layer tds.components { .tg-field { display: grid; align-content: start; gap: var(--space-2); min-inline-size: 0; } .tg-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .tg-label__required { margin-inline-start: 0.125em; color: var(--text-danger); font-weight: var(--fw-semibold); } .tg-help { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .tg-help--error { color: var(--text-danger); } :is(.tg-input, .tg-select, .tg-textarea) { inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-h); padding: var(--space-2) var(--space-3); border: var(--border-field); border-radius: var(--radius-control); background-color: var(--field-bg); color: var(--text-color); font-size: max(1rem, var(--fs)); line-height: 1.5; transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); } :is(.tg-input, .tg-select, .tg-textarea):where(:not(:disabled, [readonly])):hover { background-color: var(--field-bg-hover); } :is(.tg-input, .tg-select, .tg-textarea):focus { outline: none; background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } @media (forced-colors: active) { :is(.tg-input, .tg-select, .tg-textarea):focus { outline: 2px solid Highlight; outline-offset: 2px; } } :is(.tg-input, .tg-select, .tg-textarea)[aria-invalid=true] { border-color: var(--danger-main); } :is(.tg-input, .tg-select, .tg-textarea)[aria-invalid=true]:focus { box-shadow: 0 0 0 0.25rem var(--danger-soft); } :is(.tg-input, .tg-select, .tg-textarea):disabled { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-textarea { min-block-size: calc(var(--control-h) * 2.5); resize: vertical; } input[type=file].tg-input { padding: 0; border: 0; background: transparent; cursor: pointer; } input[type=file].tg-input::file-selector-button { box-sizing: border-box; --control-idle-bg: var(--surface-muted); --control-hover-bg: var(--control-idle-bg); --control-color: var(--text-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 0 0 auto; max-inline-size: 100%; block-size: var(--control-h); min-block-size: var(--control-h); padding-block: 0; border: var(--border-action); background: var(--control-idle-bg); color: var(--control-color); font-size: var(--fs); font-weight: var(--fw-medium); line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; vertical-align: middle; overflow-wrap: anywhere; min-inline-size: var(--control-h); block-size: auto; padding-block: var(--space-2); padding-inline: var(--space-4); border-radius: var(--radius-control); margin-inline: 0 var(--space-3); font-family: inherit; } .tg-input::placeholder, .tg-textarea::placeholder { color: var(--text-secondary); opacity: 1; } :is(.tg-input, .tg-textarea)[readonly] { background: var(--section-bg-color); --ring-bg: var(--section-bg-color); } .tg-select:not([multiple]):is(:not([size]), [size="1"]) { appearance: none; padding-inline-end: var(--space-10); background-image: var(--select-arrow); background-repeat: no-repeat; background-size: var(--icon-size) var(--icon-size); background-position: right var(--space-3) center; text-overflow: ellipsis; cursor: pointer; } @media (hover: hover) and (pointer: fine) and (forced-colors: none) { .tg-select:not([multiple]):is(:not([size]), [size="1"]):where(:not(:disabled, [readonly], [aria-disabled=true], [aria-disabled=true] *, [inert], [inert] *)):hover { background-image: var(--select-arrow-hover); } } .tg-select:not([multiple]):is(:not([size]), [size="1"]):dir(rtl) { background-position: left var(--space-3) center; } .tg-select:not([multiple]):is(:not([size]), [size="1"]):disabled { cursor: not-allowed; } @media (forced-colors: active) { .tg-select:not([multiple]):is(:not([size]), [size="1"]) { appearance: auto; background-image: none; padding-inline-end: var(--space-3); } } .tg-check, .tg-radio { appearance: none; display: inline-grid; place-content: center; flex: 0 0 var(--choice-size); inline-size: var(--choice-size); block-size: var(--choice-size); margin: 0; --control-idle-bg: var(--field-bg); --control-hover-bg: var(--control-idle-bg); border: var(--border-field); background-color: var(--control-idle-bg); accent-color: var(--accent-main); vertical-align: middle; cursor: pointer; } .tg-check:not(:checked), .tg-radio:not(:checked) { border-color: var(--choice-border-color); } .tg-check:checked, .tg-check.tg-check:indeterminate, .tg-radio:checked, .tg-radio.tg-check:indeterminate { --control-idle-bg: var(--accent-main); border-color: var(--accent-main); } .tg-check:disabled, .tg-radio:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-check { border-radius: calc(var(--choice-size) / 4); } .tg-check:checked::before { content: ""; inline-size: calc(var(--choice-size) * 0.25); block-size: calc(var(--choice-size) * 0.45); border: solid var(--button-text-color); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .tg-check:indeterminate::before { content: ""; inline-size: calc(var(--choice-size) * 0.5); block-size: 2px; background: var(--button-text-color); } .tg-radio { border-radius: 50%; } .tg-radio:checked::before { content: ""; inline-size: calc(var(--choice-size) * 0.42); block-size: calc(var(--choice-size) * 0.42); border-radius: inherit; background: var(--button-text-color); } @media (forced-colors: active) { .tg-check, .tg-radio { appearance: auto; } .tg-check, .tg-check:not(:checked), .tg-check:checked, .tg-check.tg-check:indeterminate, .tg-radio, .tg-radio:not(:checked), .tg-radio:checked, .tg-radio.tg-check:indeterminate { border: revert; background-color: revert; } .tg-check::before, .tg-check:checked::before, .tg-check:indeterminate::before, .tg-radio::before, .tg-radio:checked::before, .tg-radio:indeterminate::before { content: none; } } .tg-choice { display: inline-flex; gap: var(--space-3); align-items: center; min-block-size: var(--control-h); cursor: pointer; } .tg-switch { --w: calc(var(--h) * 1.75); --h: var(--switch-h); position: relative; display: inline-flex; align-items: center; justify-content: flex-start; inline-size: var(--w); block-size: var(--control-h); flex: 0 0 var(--w); padding: 0 0.125rem; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; isolation: isolate; } .tg-switch::before { content: ""; position: absolute; inset-inline: 0; block-size: var(--h); z-index: -1; border: 1px solid var(--switch-border-color); border-radius: inherit; background: var(--switch-track-color); transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); } .tg-switch:not([aria-checked=true], .tg-switch--on)::before { border-color: var(--switch-border-color); } .tg-switch__knob { --switch-shift: 0px; position: absolute; inset-inline-start: 0.125rem; inset-block-start: 50%; transform: translate(var(--switch-shift), -50%); inline-size: calc(var(--h) - 0.25rem); block-size: calc(var(--h) - 0.25rem); border-radius: 50%; background: var(--switch-knob-color); transition: transform var(--duration) var(--ease); } .tg-switch:is([aria-checked=true], .tg-switch--on)::before { background: var(--accent-main); border-color: var(--switch-border-color); } .tg-switch:is([aria-checked=true], .tg-switch--on) .tg-switch__knob { --switch-shift: calc(var(--w) - var(--h)); } .tg-switch:dir(rtl):is([aria-checked=true], .tg-switch--on) .tg-switch__knob { --switch-shift: calc(var(--h) - var(--w)); } .tg-component-size { inline-size: 3.25rem; min-block-size: var(--control-h); display: inline-flex; align-items: center; } .tg-choice:has(.tg-choice__description) { align-items: flex-start; padding-block: var(--space-2); } .tg-choice__description { display: block; margin-block-start: var(--space-1); font-size: var(--fs-sm); color: var(--text-secondary); } .tg-choice-group { display: grid; justify-items: start; min-inline-size: 0; } .tg-choice-group--nested { padding-inline-start: calc(var(--choice-size) + var(--space-3)); } .tg-input-group { display: flex; align-items: stretch; min-inline-size: 0; min-block-size: var(--control-h); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); } .tg-input-group:focus-within { background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } .tg-input-group:has(.tg-input-group__control[readonly]) { background: var(--section-bg-color); } .tg-input-group:has(.tg-input-group__control:disabled) { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .tg-input-group:has(.tg-input-group__control[aria-invalid=true]) { border-color: var(--danger-main); } .tg-input-group:has(.tg-input-group__control[aria-invalid=true]):focus-within { box-shadow: 0 0 0 0.25rem var(--danger-soft); } .tg-input-group { transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .tg-input-group:where(:not(:focus-within, :has(.tg-input-group__control:disabled), :has(.tg-input-group__control[readonly]))):hover { background-color: var(--field-bg-hover); } .tg-input-group__control { min-inline-size: 0; min-block-size: var(--control-h); border: 0; border-radius: 0; background: transparent; color: var(--text-color); font: inherit; font-size: max(1rem, var(--fs)); } .tg-input-group__control:focus { outline: none; box-shadow: none; background: transparent; } .tg-input-group__control::placeholder { color: var(--text-secondary); opacity: 1; } .tg-input-group__control { flex: 1 1 0%; inline-size: 100%; padding: var(--space-2) var(--space-3); line-height: 1.5; } .tg-input-group__control:disabled { cursor: not-allowed; } .tg-input-group__addon { display: flex; align-items: center; flex: 0 0 auto; gap: var(--space-2); padding-inline: var(--space-3); color: var(--text-secondary); white-space: nowrap; } .tg-input-group__addon:first-child { padding-inline-end: 0; } .tg-input-group__addon:last-child { padding-inline-start: 0; } .tg-input-group select.tg-input-group__addon { appearance: none; min-block-size: var(--control-h); margin: 0; padding-inline: var(--space-3) var(--space-8); border: 0; border-inline-end: var(--border-field); border-radius: 0; background: var(--select-arrow) no-repeat right var(--space-2) center/1rem 1rem; color: var(--text-color); font-size: max(1rem, var(--fs)); } .tg-input-group select.tg-input-group__addon:focus { outline: none; box-shadow: none; } .tg-input-group select.tg-input-group__addon { cursor: pointer; } .tg-input-group select.tg-input-group__addon:dir(rtl) { background-position: left var(--space-2) center; } .tg-input-group__action { align-self: stretch; block-size: auto; min-block-size: 0; border: 0; border-radius: 0 calc(var(--radius-control) - 1px) calc(var(--radius-control) - 1px) 0; } .tg-input-group__action:dir(rtl) { border-radius: calc(var(--radius-control) - 1px) 0 0 calc(var(--radius-control) - 1px); } .tg-input-group__action:focus-visible { outline-offset: -3px; } .tg-copy { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--control-h); padding: var(--space-1); padding-inline-start: var(--space-3); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); } .tg-copy:focus-within { background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } .tg-copy:has(.tg-copy__value[readonly]) { background: var(--section-bg-color); } .tg-copy:has(.tg-copy__value:disabled) { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .tg-copy:has(.tg-copy__value[aria-invalid=true]) { border-color: var(--danger-main); } .tg-copy:has(.tg-copy__value[aria-invalid=true]):focus-within { box-shadow: 0 0 0 0.25rem var(--danger-soft); } .tg-copy { transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .tg-copy[data-state=copied] { border-color: var(--accent-main); } .tg-copy[data-state=error] { border-color: var(--danger-main); } .tg-copy__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; color: var(--text-color); font-family: var(--font-family-mono); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; user-select: all; background: none; } .tg-copy:has(> .tg-copy__action) { padding-block: 0; padding-inline-end: 0; } .tg-copy__action { flex: 0 0 auto; border-color: inherit; border-inline-start-color: var(--group-border-color); } .tg-copy__action:focus-visible { outline: none; } .tg-copy__action { align-self: stretch; margin-block: -1px; margin-inline-end: -1px; border-start-start-radius: 0; border-end-start-radius: 0; } @media (max-width: 22.5rem) { .tg-copy:has(> .tg-btn.tg-copy__action) { flex-wrap: wrap; padding: var(--space-2); padding-inline-start: var(--space-3); } .tg-copy:has(> .tg-btn.tg-copy__action) > .tg-copy__value { flex-basis: 100%; } .tg-copy:has(> .tg-btn.tg-copy__action) > .tg-copy__action { inline-size: 100%; margin: 0; border-radius: var(--radius-inset); } } .tg-requirements { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-secondary); } .tg-requirements__item { display: flex; align-items: flex-start; gap: var(--space-2); transition: color var(--duration) var(--ease); } .tg-requirements__item::before { content: ""; flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; margin-block-start: calc((1lh - 1rem) / 2); border: 2px solid currentColor; border-radius: 50%; opacity: 0.6; } .tg-requirements__item[data-met=true] { color: var(--accent-readable); } .tg-requirements__item[data-met=true]::before { border: 0; border-radius: 0; background: currentColor; opacity: 1; mask: var(--icon-mask-check) center/contain no-repeat; } .tg-requirements--invalid .tg-requirements__item:not([data-met=true]) { color: var(--text-danger); } @media (forced-colors: active) { .tg-input-group:focus-within { outline: 2px solid Highlight; outline-offset: 2px; } } } @layer tds.components { .tg-upload { display: flex; align-items: center; justify-content: center; gap: var(--space-3); position: relative; min-inline-size: 0; min-block-size: 6rem; padding: var(--space-4); border: var(--border); border-radius: var(--radius); background: var(--secondary-bg-color); color: var(--text-color); text-align: center; overflow-wrap: anywhere; cursor: pointer; } .tg-upload--dashed { border: 0.2rem dashed var(--section-separator-color); border-radius: var(--radius-lg); } .tg-upload:focus-within { outline: 2px solid var(--text-link); outline-offset: 3px; } .tg-upload--disabled, .tg-upload[aria-disabled=true] { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-upload__icon { inline-size: 2rem; block-size: 2rem; flex-shrink: 0; } .tg-upload__preview { display: block; inline-size: 10rem; max-inline-size: 100%; block-size: 10rem; object-fit: cover; border-radius: var(--radius); } .tg-upload__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); } .tg-upload__status { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--fs-xs); text-align: end; overflow-wrap: anywhere; } .tg-upload__list { display: grid; gap: 0; margin: 0; padding: 0; border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); list-style: none; overflow: clip; } .tg-upload__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); min-block-size: var(--control-h); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); } .tg-upload__item + .tg-upload__item { border-block-start: var(--border); } .tg-upload__item > .tg-icon { color: var(--text-secondary); } .tg-upload__item > .tg-progress, .tg-upload__item > progress { grid-column: 2/-1; block-size: 0.375rem; } .tg-upload__item[data-state=error] > .tg-icon { color: var(--text-danger); } .tg-upload__item[data-state=done] > .tg-icon { color: var(--text-link); } .tg-upload__name { display: grid; min-inline-size: 0; } .tg-upload__name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); } .tg-upload__name > :not(:first-child) { color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .tg-upload__item[data-state=error] .tg-upload__name > :not(:first-child) { color: var(--text-danger); } @media (pointer: coarse) { .tg-upload__drag-hint { display: none; } } } @layer tds.components { .tg-card, .tg-list { min-inline-size: 0; border: var(--panel-border, var(--border)); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); color: var(--panel-color, inherit); box-shadow: var(--panel-shadow, none); overflow-wrap: anywhere; } .tg-card { --card-padding: var(--space-4); padding: var(--card-padding); } .tg-card:has(> :is(.tg-card__media, .tg-card__body, .tg-card__footer)) { display: flex; flex-direction: column; gap: var(--space-3); } .tg-card__media { margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); background: var(--background-muted); } .tg-card__media > :is(img, video, picture) { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--card-media-ratio, 16/9); object-fit: cover; } .tg-card__media--video > video { background: var(--background-muted); } .tg-card--featured { border-color: var(--accent-main); box-shadow: inset 0 0 0 1px var(--accent-main); } .tg-card--overlay { position: relative; isolation: isolate; justify-content: flex-end; min-block-size: 16rem; padding: var(--card-padding); border-color: transparent; background: var(--overlay-bg); color: var(--overlay-text); } .tg-card--overlay > .tg-card__media { position: absolute; inset: 0; z-index: -1; margin: 0; border-radius: inherit; } .tg-card--overlay > .tg-card__media > :is(img, video, picture) { block-size: 100%; aspect-ratio: auto; } .tg-card--overlay > .tg-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--overlay-bg) 0%, var(--overlay-bg) 18%, transparent 72%); } .tg-card--overlay > .tg-card__body, .tg-card--overlay > .tg-card__footer { position: relative; margin-block-start: 0; } .tg-card--overlay :is(.tg-header__subtitle, .tg-text-muted, p) { color: inherit; } .tg-card--overlay .tg-card__link { color: inherit; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .tg-card--overlay > .tg-card__media > :is(img, video, picture) { transition: transform var(--duration) var(--ease); } .tg-card--overlay:is(:hover, :focus-within) > .tg-card__media > :is(img, video, picture) { transform: scale(1.03); } } details.tg-card--disclosure { --disclosure-radius-start: var(--radius-lg); --disclosure-radius-end: var(--radius-lg); --disclosure-default-padding: var(--card-padding); padding: 0; } details.tg-card--disclosure > .tg-disclosure__trigger { font-size: var(--disclosure-trigger-font-size, var(--fs)); } details.tg-card--disclosure[open] > .tg-disclosure__trigger { border-end-start-radius: 0; border-end-end-radius: 0; } details.tg-card--disclosure > .tg-disclosure__content, details.tg-card--disclosure > .tg-card__body { padding: var(--space-3) var(--card-padding) var(--card-padding); } .tg-card__body { display: grid; gap: var(--space-2); min-inline-size: 0; } .tg-card__body > * { margin: 0; } .tg-card__body > .tg-badge { justify-self: start; } .tg-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-start: auto; } .tg-card--interactive, .tg-card--link { position: relative; transition: border-color var(--duration) var(--ease); } @media (hover: hover) and (pointer: fine) { .tg-card--interactive:hover, .tg-card--link:hover { border-color: var(--panel-hover-border-color); } } .tg-card--link:has(.tg-card__link:focus-visible) { outline: 2px solid var(--text-link); outline-offset: 3px; } .tg-card__link { color: inherit; text-decoration: none; } .tg-card__link:focus-visible { outline: none; } .tg-card--link .tg-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .tg-stat { display: grid; align-content: start; gap: var(--space-1); min-inline-size: 0; } .tg-stat__label { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .tg-stat__value { margin: 0; font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .tg-stat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); } .tg-stat__delta { flex: 0 0 auto; } .tg-list { overflow: clip; } .tg-list--plain { border: 0; border-radius: 0; } .tg-list--plain > .tg-list-item { padding-inline: 0; } .tg-list-item { padding: var(--space-3) var(--space-4); } .tg-list-item + .tg-list-item { border-block-start: var(--border); } .tg-list-item--wrap { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); } .tg-list-item--wrap > * { min-inline-size: 0; } .tg-list-item-break { flex: 0 0 100%; margin-block-start: var(--space-3); } .tg-list-item-border-dashed { border-block-start-style: dashed; } .tg-list-item__title { font-size: var(--fs); font-weight: var(--fw-semibold); } .tg-list-item__subtitle { font-size: var(--fs-sm); color: var(--text-secondary); } :where(a[href], button).tg-list-item { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--control-h); border: 0; background: var(--control-idle-bg, transparent); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } :where(a[href], button).tg-list-item:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } :where(a[href], button).tg-list-item > .tg-icon:last-child { margin-inline-start: auto; color: var(--text-secondary); } .tg-header, .tg-header-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--header-bg-color); } .tg-header-secondary { background: var(--background-muted); border: var(--border-transparent); } .tg-header__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.35; } .tg-header__subtitle { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .tg-section__title { padding: var(--space-2); color: var(--section-header-text-color); font-size: var(--fs-sm); font-weight: var(--fw-medium); } .tg-divider { inline-size: 100%; block-size: 0; border: 0; border-block-start: 1px dashed var(--section-separator-color); margin-block: var(--space-3); } .tg-divider-transparent { block-size: var(--space-4); } .tg-divider--label { display: flex; align-items: center; gap: var(--space-3); block-size: auto; border-block-start: 0; color: var(--text-secondary); font-size: var(--fs-sm); } .tg-divider--label::before, .tg-divider--label::after { content: ""; flex: 1 1 0; border-block-start: 1px dashed var(--section-separator-color); } } @layer tds.components { .tg-tabs { display: flex; align-items: center; gap: var(--space-2); max-inline-size: 100%; padding: var(--space-1); border: var(--border); border-radius: var(--radius-control); background: var(--secondary-bg-color); overflow-x: auto; scrollbar-width: thin; } .tg-tabs-s2 { gap: var(--space-2); } .tg-tabs-s2 > .tg-tab { padding-inline: var(--space-2); } .tg-tabs-s1 { gap: var(--space-1); } .tg-tabs-s1 > .tg-tab { padding-inline: var(--space-1); } .tg-tabs-s0 { gap: 0; } .tg-tabs-s0 > .tg-tab { padding-inline: 0; } .tg-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 1 0 auto; min-block-size: var(--control-h); padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; } .tg-tab[aria-selected=true] { --control-idle-bg: var(--section-bg-color); --control-hover-bg: var(--control-idle-bg); color: var(--text-color); } @media (hover: hover) and (pointer: fine) { .tg-tab:where(:not(:disabled, [aria-disabled=true], [aria-selected=true], [disabled] *, [aria-disabled=true] *, [inert], [inert] *)):hover { color: var(--text-color); } } .tg-tab:focus-visible { outline-offset: -3px; } .tg-segmented { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: var(--option-gap); min-inline-size: 0; max-inline-size: 100%; margin: 0; padding: var(--space-1); border: var(--border); border-radius: var(--radius-control); background: var(--secondary-bg-color); overflow-x: auto; scrollbar-width: thin; } .tg-segmented--vertical { flex-direction: column; inline-size: max-content; max-inline-size: 100%; overflow: visible; } .tg-segmented--vertical > .tg-segmented__item { justify-content: flex-start; } .tg-segmented__item { position: relative; display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--control-h); padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; padding-inline: var(--space-3); white-space: nowrap; } .tg-segmented__item > .tg-icon { flex: 0 0 auto; } .tg-segmented__item > input { position: absolute; inset: 0; margin: 0; border-radius: inherit; opacity: 0; cursor: inherit; appearance: none; } .tg-segmented__item:is([aria-pressed=true], :has(> input:checked)) { --control-idle-bg: var(--section-bg-color); --control-hover-bg: var(--control-idle-bg); color: var(--text-color); } @media (hover: hover) and (pointer: fine) { .tg-segmented__item:where(:not(:disabled, [aria-disabled=true], [aria-pressed=true], :has(> input:checked), [disabled] *, [aria-disabled=true] *, [inert], [inert] *)):hover { color: var(--text-color); } } .tg-segmented__item:focus-visible, .tg-segmented__item:has(> input:focus-visible) { outline: 2px solid var(--text-link); outline-offset: -3px; } .tg-segmented__item:has(> input:disabled) { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-tabs--segmented { padding: var(--space-1); border: var(--border); border-radius: var(--radius-control); background: var(--secondary-bg-color); } .tg-tabs--vertical { flex-direction: column; align-items: stretch; inline-size: max-content; max-inline-size: 100%; overflow: visible; } .tg-tabs--vertical > .tg-tab { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: var(--space-2); text-align: start; } .tg-tabs--vertical > .tg-tab > .tg-badge { margin-inline-start: auto; } @media (max-width: 36rem) { .tg-tabs--vertical { flex-direction: row; inline-size: auto; overflow-x: auto; } .tg-tabs--vertical > .tg-tab { flex: 1 0 auto; justify-content: center; } } .tg-tab__label { min-inline-size: 0; } .tg-tabs--collapsed-labels > .tg-tab { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--space-2); min-inline-size: var(--control-h); padding-inline: var(--space-3); } .tg-tabs--collapsed-labels > .tg-tab > .tg-icon { flex: 0 0 auto; } .tg-tabs--collapsed-labels > .tg-tab:not([aria-selected=true]) > .tg-tab__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tg-tabs--collapsed-labels > .tg-tab[aria-selected=true] > .tg-tab__label { animation: tg-label-in var(--duration) var(--ease); } @keyframes tg-label-in { from { opacity: 0; } } .tg-tabs--underline { gap: var(--space-5); padding: 0; border: 0; border-block-end: var(--border); border-radius: 0; background: transparent; } .tg-tabs--underline > .tg-tab { --control-hover-bg: transparent; --control-hover-filter: none; flex: 0 0 auto; padding-inline: 0; border-radius: 0; box-shadow: inset 0 -2px 0 transparent; } .tg-tabs--underline > .tg-tab[aria-selected=true] { --control-idle-bg: transparent; box-shadow: inset 0 -2px 0 var(--accent-main); } .tg-site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-inline-size: 0; } .tg-site-nav__link { display: inline-flex; align-items: center; min-block-size: var(--control-h); padding-inline: var(--space-3); border-radius: var(--radius-control); background: var(--control-idle-bg, transparent); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; --control-hover-filter: none; } .tg-site-nav__link[aria-current=page] { --control-idle-bg: var(--surface-muted); color: var(--text-color); } @media (hover: hover) and (pointer: fine) { .tg-site-nav__link:hover { color: var(--text-color); } } .tg-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-inline-size: 0; } .tg-pager__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-inline-size: var(--control-h); min-block-size: var(--control-h); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-control); background: var(--control-idle-bg, transparent); color: var(--text-color); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; --control-hover-filter: none; } .tg-pager__link[aria-current=page] { --control-idle-bg: var(--accent-soft); --control-hover-bg: var(--accent-soft); color: var(--text-link); font-weight: var(--fw-semibold); } .tg-pager__link:is(a:not([href]), [aria-disabled=true]) { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-pager__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--space-6); color: var(--text-secondary); } .tg-pager__info { margin-inline: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .tg-tabbar { position: sticky; inset-block-end: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--safe-area-bottom)); border-block-start: var(--border); background: var(--bottom-bar-bg-color); } .tg-tabbar__item { flex: 1; display: grid; place-items: center; gap: var(--space-1); min-inline-size: 0; min-block-size: var(--control-h); padding: var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--control-idle-bg); color: var(--text-secondary); font-size: var(--fs-xs); text-decoration: none; text-align: center; overflow-wrap: anywhere; cursor: pointer; } .tg-tabbar__item[aria-current=page] { color: var(--text-link); --control-idle-bg: var(--secondary-bg-color); --control-hover-bg: var(--control-idle-bg); } .tg-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); } .tg-dot { display: grid; place-items: center; min-inline-size: var(--control-h); min-block-size: var(--control-h); padding: var(--space-2); border: 0; border-radius: 50%; background: transparent; color: var(--text-link); cursor: pointer; } .tg-dot::after { content: ""; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--section-separator-color); } .tg-dot:is([aria-current=true], [aria-current=page])::after { background: var(--text-link); } } @layer tds.components { .tg-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var(--icon-avatar); block-size: var(--icon-avatar); padding: var(--space-1); border: 2px solid transparent; border-radius: 50%; background: transparent; vertical-align: middle; -webkit-user-select: none; user-select: none; cursor: default; transition: border-color var(--duration), transform var(--duration-fast); } .tg-avatar:where(:not(:disabled, [aria-disabled=true])):is(:active, [data-pressed=true]) { transform: scale(0.96); } .tg-avatar[aria-checked=true] { border-color: var(--accent-main); } .tg-avatar-size { min-block-size: var(--icon-avatar); display: inline-flex; align-items: center; justify-content: center; } .tg-avatar__clip { display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); } .tg-avatar__clip img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .tg-avatar__initials { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; border-radius: inherit; background: var(--surface-muted); color: var(--avatar-initials-color); font-size: calc(var(--icon-avatar) / 3.5); font-weight: var(--fw-semibold); text-transform: uppercase; } .tg-avatar--outlined { border-color: var(--border-color); } .tg-avatar--outlined > .tg-avatar__initials { font-weight: 400; } .tg-avatar--outlined[aria-checked=true] { border-color: var(--avatar-selection-ring-color, var(--control-border-color)); } .tg-avatar-initials > .tg-avatar__clip { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-color); font-weight: var(--fw-semibold); } .tg-avatar-undefined[aria-checked=true], .tg-avatar-initials[aria-checked=true] { border-color: var(--border-color); border-style: dashed; } .tg-avatar > .tg-badge { position: absolute; inset-block-start: -0.5rem; inset-inline-end: -0.55rem; border: 1px solid var(--section-bg-color-transparent); pointer-events: none; } .tg-avatar-group { --icon-avatar: var(--icon-btn); display: inline-flex; align-items: center; flex-wrap: nowrap; vertical-align: middle; } .tg-avatar-group--on-main { --avatar-group-ring: var(--background-main); } .tg-avatar-group--on-panel { --avatar-group-ring: var(--background-panel); } .tg-avatar-group--on-muted { --avatar-group-ring: var(--background-muted); } .tg-avatar-group > .tg-avatar { padding: 0; border-width: 0; } .tg-avatar-group > .tg-avatar > :is(.tg-avatar__initials, .tg-avatar__clip) { box-shadow: 0 0 0 2px var(--avatar-group-ring, var(--ring-bg)); } .tg-avatar-group > .tg-avatar + .tg-avatar { margin-inline-start: calc(var(--icon-avatar) * -0.25); } .tg-avatar-group > .tg-avatar.tg-avatar-group__more { inline-size: max-content; min-inline-size: var(--icon-avatar); padding-inline: var(--space-2); border-radius: var(--icon-avatar); } .tg-avatar-group__more { background: var(--background-muted); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--avatar-group-ring, var(--ring-bg)); } :where(button, a[href]).tg-avatar { border-color: var(--action-border-color); cursor: pointer; } .tg-badge { --control-idle-bg: var(--surface-muted); --control-hover-bg: var(--control-idle-bg); display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.5rem; min-block-size: var(--switch-h); padding: 0.125rem 0.5rem; border: 0; border-radius: var(--radius-pill); background: var(--control-idle-bg); color: var(--text-color); font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 1.25; font-variant-numeric: tabular-nums; vertical-align: middle; } .tg-badge--primary { --control-idle-bg: var(--badge-primary-bg); color: var(--badge-primary-text); } .tg-badge--secondary { background: var(--secondary-bg-color-transparent); color: var(--text-main); } .tg-badge--destructive { --control-idle-bg: var(--badge-danger-bg); color: var(--badge-danger-text); } .tg-badge .tg-icon { --icon-size: var(--space-4); } .tg-badge:has(> .tg-badge__dot) { gap: var(--space-1); } .tg-badge__dot { flex: 0 0 auto; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: currentColor; } } @layer tds.components { :where(a[href], button, summary) .tg-badge { border: var(--border-action); } :is(button, a[href]).tg-badge { position: relative; } :is(button, a[href]).tg-badge::before { content: ""; position: absolute; top: 50%; left: 50%; inline-size: max(100%, var(--control-h)); block-size: max(100%, var(--control-h)); transform: translate(-50%, -50%); } :is(button, a[href]).tg-badge { border: var(--border-action); min-inline-size: var(--control-h); font-size: var(--fs-sm); text-decoration: none; cursor: pointer; } :is(button, a[href]).tg-badge:focus-visible { outline: 2px solid var(--text-link); outline-offset: 3px; } } @layer tds.components { .tg-notice { padding: var(--space-3) var(--space-4); border: var(--border); color: var(--text-color); border-radius: var(--radius); background: var(--section-bg-color); --ring-bg: var(--section-bg-color); overflow-wrap: anywhere; } .tg-notice--accent { background: var(--action-bg); color: var(--button-text-color); border-color: transparent; border-radius: var(--radius-lg); } .tg-notice--destructive { background: var(--notice-danger-bg); color: var(--text-color); border-color: transparent; } .tg-notice--destructive .tg-notice__icon { color: var(--text-danger); } .tg-notice--with-icon { display: flex; align-items: flex-start; gap: var(--space-3); } .tg-notice__icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; margin-block-start: 0.125rem; } .tg-notice__content { min-inline-size: 0; } .tg-notice__title { display: block; font-weight: var(--fw-semibold); } .tg-notice__content > :not(:first-child) { margin-block-start: var(--space-1); } .tg-notice:has(> .tg-notice__actions) { flex-wrap: wrap; } .tg-notice:has(> .tg-notice__actions) > .tg-notice__content { flex: 1 1 16rem; } .tg-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; } .tg-notice__dismiss { flex: 0 0 auto; margin-block: calc(var(--space-2) * -1); margin-inline-end: calc(var(--space-2) * -1); } .tg-progress { display: block; inline-size: 100%; block-size: var(--progress-height); appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--progress-track-color); overflow: hidden; color: var(--progress-color); } .tg-progress::-webkit-progress-bar { background: var(--progress-track-color); border-radius: var(--radius-pill); } .tg-progress::-webkit-progress-value { background: var(--progress-color); border-radius: var(--radius-pill); } .tg-progress::-moz-progress-bar { background: var(--progress-color); border-radius: var(--radius-pill); } .tg-progress__bar { display: block; inline-size: 100%; block-size: 100%; background: var(--progress-color); border-radius: 0; clip-path: inset(0 calc(100% - clamp(0%, var(--progress, 0%), 100%)) 0 0 round var(--radius-pill)); transition: clip-path var(--progress-duration); } .tg-progress:dir(rtl) .tg-progress__bar { clip-path: inset(0 0 0 calc(100% - clamp(0%, var(--progress, 0%), 100%)) round var(--radius-pill)); } .tg-progress--destructive { --progress-color: var(--danger-main); } .tg-progress--striped .tg-progress__bar { position: relative; overflow: hidden; } .tg-progress--striped .tg-progress__bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(45deg, var(--progress-stripe-color) 25%, transparent 25%, transparent 50%, var(--progress-stripe-color) 50%, var(--progress-stripe-color) 75%, transparent 75%); background-size: var(--progress-stripe-size) var(--progress-stripe-size); filter: blur(var(--progress-stripe-blur)); animation: tg-stripes var(--progress-stripe-speed) linear infinite; } @keyframes tg-stripes { to { background-position: calc(var(--progress-stripe-size) * -1) 0; } } .tg-spinner { display: inline-block; inline-size: 1.25em; block-size: 1.25em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: tg-spin 0.8s linear infinite; vertical-align: middle; } .tg-spinner--lg { inline-size: 4rem; block-size: 4rem; border: 6px solid var(--spinner-track-color); border-block-start-color: var(--spinner-color); } @keyframes tg-spin { to { transform: rotate(1turn); } } .tg-toast { position: fixed; inset-inline: var(--space-4); margin-inline: auto; inset-block-end: calc(var(--space-5) + var(--safe-area-bottom)); z-index: var(--z-toast); inline-size: fit-content; overflow-wrap: anywhere; max-inline-size: calc(100% - var(--space-8)); padding: var(--space-3) var(--space-5); border: var(--floating-border); border-radius: var(--radius); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); opacity: 0; visibility: hidden; transform: translateY(0.5rem); pointer-events: none; transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fade-out); } .tg-toast--show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), visibility 0s; } .tg-snackbar { position: fixed; inset-block-start: env(safe-area-inset-top, 0px); inset-inline: 0; z-index: var(--z-toast); padding: var(--space-3); visibility: hidden; opacity: 0; transform: translateY(-100%); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fade-out); pointer-events: none; } .tg-snackbar--show { visibility: visible; opacity: 1; transform: none; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), visibility 0s; } .tg-snackbar__content { max-inline-size: 40rem; margin-inline: auto; overflow-wrap: anywhere; } dialog.tg-modal { inline-size: min(40rem, 100% - var(--space-8)); max-block-size: calc(100dvh - var(--space-8)); padding: 0; border: var(--floating-border); border-radius: var(--radius-lg); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); overflow: auto; overscroll-behavior: contain; } dialog.tg-modal::backdrop { background: var(--overlay-bg); backdrop-filter: blur(4px); } dialog.tg-modal[open] { animation: tg-pop var(--duration) var(--ease); } .tg-modal__sheet { padding: var(--space-5); } .tg-modal__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); } .tg-modal__footer { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2); margin-block-start: var(--space-5); } .tg-modal__sheet:has(> .tg-modal__body) { display: flex; flex-direction: column; max-block-size: inherit; padding-block: var(--space-5) 0; } .tg-modal__sheet:has(> .tg-modal__body) > .tg-modal__header, .tg-modal__sheet:has(> .tg-modal__body) > .tg-modal__footer { flex: 0 0 auto; } .tg-modal__sheet:has(> .tg-modal__body) > .tg-modal__footer { margin-block-start: 0; padding-block: var(--space-4) var(--space-5); border-block-start: var(--border); } dialog.tg-modal:has(> .tg-modal__sheet > .tg-modal__body) { overflow: hidden; } .tg-modal__body { flex: 1 1 auto; min-block-size: 0; margin-inline: calc(var(--space-5) * -1); padding: 0 var(--space-5) var(--space-5); overflow-y: auto; overscroll-behavior: contain; } .tg-modal__body:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } dialog.tg-modal--side { inline-size: min(28rem, 100%); block-size: 100dvh; max-block-size: 100dvh; margin: 0; margin-inline-start: auto; border-block: 0; border-inline-end: 0; border-radius: 0; border-start-start-radius: var(--radius-lg); border-end-start-radius: var(--radius-lg); } dialog.tg-modal--side[open] { animation: tg-slide-in var(--duration) var(--ease); } dialog.tg-modal--side:dir(rtl)[open] { --tg-slide-from: -1rem; } dialog.tg-modal--side > .tg-modal__sheet { block-size: 100%; } @keyframes tg-slide-in { from { opacity: 0; transform: translateX(var(--tg-slide-from, 1rem)); } to { opacity: 1; transform: none; } } @keyframes tg-pop { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } } @media (max-width: 36rem) { dialog.tg-modal--sheet { inline-size: 100%; max-inline-size: 100%; max-block-size: 90dvh; margin: auto 0 0; border-end-start-radius: 0; border-end-end-radius: 0; } .tg-modal--sheet .tg-modal__sheet { padding-block-end: calc(var(--space-5) + var(--safe-area-bottom)); } } @media (prefers-reduced-motion: reduce) { .tg-progress--striped .tg-progress__bar::after, .tg-spinner { animation: none; } dialog.tg-modal[open], dialog.tg-modal--side[open] { animation: tg-fade-in var(--duration-fade-in) var(--ease); } } @keyframes tg-fade-in { from { opacity: 0; } } } @property --effect-angle { syntax: ""; inherits: false; initial-value: 0deg; } @layer tds.components { .tg-ripple { --ripple-duration: 300ms; --ring-duration: 300ms; --wash-duration: 300ms; --ring-width: 1px; --ripple-color: var(--ripple-on-dark); position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent; } .tg-ripple--dark { --ripple-color: var(--ripple-on-dark); } .tg-ripple--light { --ripple-color: var(--ripple-on-light); } .tg-ripple--inline { display: inline-flex; border-radius: var(--radius-pill); } .tg-ripple__wave, .tg-ripple__ring, .tg-ripple__wash { position: absolute; pointer-events: none; z-index: -1; } .tg-ripple__wave { border-radius: 50%; background: var(--ripple-color); transform: translate(-50%, -50%) scale(0); inline-size: var(--ripple-size, 0px); block-size: var(--ripple-size, 0px); animation: tg-ripple-wave var(--ripple-duration) ease-out forwards; } .tg-ripple__ring, .tg-ripple__wash { inset: 0; border-radius: inherit; opacity: 0; } .tg-ripple__ring { box-shadow: inset 0 0 0 var(--ring-width) var(--ripple-border-color, var(--ripple-color)); animation: tg-ripple-ring var(--ring-duration) ease-out forwards; } .tg-ripple__wash { background: var(--ripple-hover-color, var(--ripple-color)); animation: tg-ripple-wash var(--wash-duration) ease-out forwards; } @keyframes tg-ripple-wave { from { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } @keyframes tg-ripple-ring { 0% { opacity: 0; filter: blur(4px); } 10%, 60% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(4px); } } @keyframes tg-ripple-wash { 0% { opacity: 0; transform: scale(0.96); } 40% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.02); } } .tg-glass { --blur: 15px; background: var(--background-panel); --ring-bg: var(--background-panel); border-radius: var(--radius-lg); -webkit-tap-highlight-color: transparent; } .tg-glass > * { isolation: isolate; } .tg-glass--backdrop { --blur: 25px; background: var(--background-main); } .tg-glass .tg-header { background-color: transparent; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .tg-glass { backdrop-filter: blur(var(--blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--blur)) saturate(120%); } } .tg-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; background: var(--overlay-bg); color: var(--overlay-text); } .tg-overlay--absolute { position: absolute; } .tg-fade-in { animation: tg-effect-in var(--duration) var(--ease) both; } .tg-fade-out { animation: tg-effect-out var(--duration) var(--ease) both; } @keyframes tg-effect-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes tg-effect-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); visibility: hidden; } } .tg-transition { opacity: 1; transform: scale(1); transform-origin: center; visibility: visible; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility 0s; } .tg-transition:is(.is-hidden, [aria-hidden=true]) { opacity: 0; transform: scale(0.96); pointer-events: none; visibility: hidden; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility 0s linear var(--duration); } @media (prefers-reduced-motion: no-preference) { .tg-glass { animation: tg-glass-in 160ms ease-out both; } @keyframes tg-glass-in { from { opacity: 0; } to { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { .tg-ripple__wave, .tg-ripple__ring, .tg-ripple__wash { display: none; animation: none; } .tg-glass, .tg-fade-in, .tg-fade-out { animation: none; } .tg-fade-out { opacity: 0; visibility: hidden; } .tg-transition, .tg-transition:is(.is-hidden, [aria-hidden=true]) { transition: none; } } :is(.tg-effect-sheen, .tg-effect-border-beam, .tg-effect-tilt, .tg-effect-spotlight) { --effect-intensity: 1; position: relative; isolation: isolate; } :is(.tg-effect-sheen, .tg-effect-spotlight) { overflow: clip; } :is(.tg-effect-sheen, .tg-effect-border-beam, .tg-effect-spotlight)::before, .tg-effect-sheen::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; } :is(.tg-effect-sheen, .tg-effect-border-beam, .tg-effect-spotlight):is(:disabled, [aria-disabled=true], [aria-busy=true], :has(:disabled))::before, .tg-effect-sheen:is(:disabled, [aria-disabled=true], [aria-busy=true])::after, :is(:disabled, [aria-disabled=true], [aria-busy=true]) > .tg-effect-layer { display: none; } .tg-effect-sheen::after { background: linear-gradient(105deg, transparent 35%, var(--overlay-text) 50%, transparent 65%); opacity: calc(0.32 * var(--effect-intensity)); transform: translateX(-100%); } .tg-effect-sheen::before { display: none; } .tg-effect-sheen:dir(rtl)::after { transform: translateX(100%); } .tg-effect-border-beam::before { z-index: 0; padding: 2px; background: conic-gradient(from var(--effect-angle), transparent 0 52%, var(--accent-main) 82%, var(--accent-readable) 90%, transparent 97%); mask: linear-gradient(var(--mask-opaque) 0 0) content-box exclude, linear-gradient(var(--mask-opaque) 0 0); opacity: var(--effect-intensity); } .tg-effect-magnetic { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: translate var(--duration) var(--ease); } .tg-effect-tilt { transform: perspective(60rem) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform var(--duration) var(--ease); } .tg-effect-tilt[data-effect-active] { transition-duration: var(--duration-fast); } .tg-effect-spotlight::before { inset: 0 auto auto 0; inline-size: 22rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-main), transparent); opacity: 0; translate: calc(var(--pointer-x, 0px) - 50%) calc(var(--pointer-y, 0px) - 50%); transition: opacity var(--duration-fade-out) var(--ease); } .tg-effect-layer { position: absolute; inset: 0; z-index: -1; display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; background: var(--effect-layer-bg, var(--background-main)); color: var(--accent-main); pointer-events: none; } :where(:has(> .tg-effect-layer)) { position: relative; isolation: isolate; } .tg-carousel[data-tg-effect=ripple] > .tg-carousel__viewport { grid-area: 1/1; border-radius: var(--radius-lg); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); } .tg-carousel[data-tg-effect=ripple] > .tg-effect-layer { position: relative; inset: auto; grid-area: 1/1; z-index: 1; border-radius: var(--radius-lg); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); background: none; opacity: 0; } .tg-carousel[data-tg-effect=ripple] > .tg-effect-layer[data-state=transitioning] { opacity: 1; } @media (hover: hover) and (pointer: fine) { :is(.tg-effect-spotlight):hover::before { transition-duration: var(--duration-fade-in); } .tg-effect-spotlight:hover::before { opacity: calc(0.16 * var(--effect-intensity)); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .tg-effect-sheen:where(:not(:disabled, [aria-disabled=true], [aria-busy=true])):is(:hover, :focus-visible)::after { transform: translateX(100%); transition: transform 700ms var(--ease); } .tg-effect-sheen:dir(rtl):is(:hover, :focus-visible)::after { transform: translateX(-100%); } } @media (prefers-reduced-motion: no-preference) { .tg-effect-border-beam::before { animation: tg-effect-turn 3.2s linear infinite; } } @keyframes tg-effect-turn { to { --effect-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .tg-effect-magnetic, .tg-effect-tilt { translate: none; transform: none; transition: none; } } @media (forced-colors: active) { :is(.tg-effect-sheen, .tg-effect-border-beam, .tg-effect-spotlight)::before, .tg-effect-sheen::after { display: none; } } } @layer tds.base { :where(.tg-row > *, .tg-col > *) { min-inline-size: 0; } } @layer tds.utilities { .tg-container { inline-size: 100%; max-inline-size: 72rem; margin-inline: auto; padding-inline: var(--space-4); padding-block: var(--tg-container-padding-start, var(--space-4)) var(--tg-container-padding-end, var(--space-4)); } .tg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .tg-col { display: flex; flex-direction: column; gap: var(--space-3); } .tg-action-slot { display: inline-grid; place-items: center; min-inline-size: var(--control-h); min-block-size: var(--control-h); } .tg-scroll-region:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-row-valign-top { align-items: flex-start; } .tg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-4); } .tg-grid--bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(10rem, auto); } .tg-grid--bento > * { min-inline-size: 0; } @media (min-width: 36rem) { .tg-grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tg-grid--bento > * { grid-column: span min(var(--span, 1), 2); grid-row: span var(--row-span, 1); } } @media (min-width: 64rem) { .tg-grid--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tg-grid--bento > * { grid-column: span var(--span, 1); } } .tg-section { margin-block: var(--space-5); } .tg-ios-spacer { inline-size: 100%; block-size: var(--ios-h); flex-shrink: 0; } .tg-no-select { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .tg-no-select :is(img, svg) { -webkit-user-drag: none; } .tg-no-events { pointer-events: none; } .tg-grow { flex: 1 1 0%; } .tg-w-full { inline-size: 100%; } .tg-h-full { min-block-size: 100vh; min-block-size: 100dvh; display: flex; flex-direction: column; } .tg-text-muted { color: var(--text-secondary); } .tg-text { color: var(--text-color); } .tg-text-accent { color: var(--text-link); } .tg-text-destructive { color: var(--text-danger); } .tg-text-sm { font-size: var(--fs-sm); } .tg-fw-regular { font-weight: var(--fw-regular); } .tg-text-center { text-align: center; } .tg-card-shadow { box-shadow: var(--shadow-soft); } .tg-card-shadow-none { box-shadow: none; } .tg-card-border-radius { border: var(--border); border-radius: var(--radius-lg); } .tg-no-radius-top { border-start-start-radius: 0; border-start-end-radius: 0; border-block-start-color: transparent; } .tg-no-radius-bottom { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end-color: transparent; } .tg-no-border { border: 0; } .tg-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .tg-gap-0 { gap: 0; } .tg-p-0 { padding: 0; } .tg-mt-0 { margin-block-start: 0; } .tg-mb-0 { margin-block-end: 0; } .tg-gap-1, .tg-gap-space-1 { gap: var(--space-1); } .tg-p-1 { padding: var(--space-1); } .tg-mt-1 { margin-block-start: var(--space-1); } .tg-mb-1 { margin-block-end: var(--space-1); } .tg-gap-2, .tg-gap-space-2 { gap: var(--space-2); } .tg-p-2 { padding: var(--space-2); } .tg-mt-2 { margin-block-start: var(--space-2); } .tg-mb-2 { margin-block-end: var(--space-2); } .tg-gap-3, .tg-gap-space-3 { gap: var(--space-3); } .tg-p-3 { padding: var(--space-3); } .tg-mt-3 { margin-block-start: var(--space-3); } .tg-mb-3 { margin-block-end: var(--space-3); } .tg-gap-4 { gap: var(--space-4); } .tg-p-4 { padding: var(--space-4); } .tg-mt-4 { margin-block-start: var(--space-4); } .tg-mb-4 { margin-block-end: var(--space-4); } .tg-gap-5 { gap: var(--space-5); } .tg-p-5 { padding: var(--space-5); } .tg-mt-5 { margin-block-start: var(--space-5); } .tg-mb-5 { margin-block-end: var(--space-5); } .tg-gap-6 { gap: var(--space-6); } .tg-p-6 { padding: var(--space-6); } .tg-mt-6 { margin-block-start: var(--space-6); } .tg-mb-6 { margin-block-end: var(--space-6); } } @layer tds.components { .tg-page-shell { display: block; } .tg-page-header { padding-block-start: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)); border-block-end: var(--border); } .tg-page-header--sticky { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--background-main); } .tg-page-content { --tg-container-padding-end: calc(var(--tg-composer-height, var(--composer-reserved-size)) + var(--space-6)); } .tg-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; white-space: nowrap; } .tg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .tg-toolbar--compact { gap: var(--space-1); } .tg-toolbar--floating { display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; max-inline-size: 100%; padding: var(--space-1); border: var(--floating-border); border-radius: var(--radius-control); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); overflow-x: auto; scrollbar-width: none; } .tg-toolbar--floating > :is(.tg-btn, .tg-icon-btn) { flex: 0 0 auto; } .tg-toolbar__separator { flex: 0 0 auto; align-self: stretch; inline-size: 1px; margin: var(--space-2) var(--space-1); background: var(--border-subtle-color); } .tg-source-link { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); color: var(--text-color); text-decoration: none; } .tg-composer { position: fixed; z-index: var(--z-sticky); inset-inline: 0; inset-block-end: var(--tg-keyboard-inset, 0px); background: var(--section-bg-color); --ring-bg: var(--section-bg-color); border-block-start: var(--border); padding-block-end: var(--safe-area-bottom); } .tg-composer__form, .tg-composer__input { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: var(--space-3); } .tg-composer__input { flex: 1 1 0%; min-inline-size: 0; } .tg-composer__form > .tg-avatar-size { --icon-avatar: var(--control-h); } .tg-composer__form > .tg-avatar-size > .tg-avatar { padding: 0; border-width: 0; } .tg-composer__textarea { flex: 1 1 0%; min-block-size: var(--control-h); resize: none; max-block-size: var(--composer-input-max-size); padding-block: max(0px, (var(--control-h) - 1lh - 2px) / 2); } .tg-composer__textarea:placeholder-shown { white-space: pre; } .tg-composer__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .tg-composer__inner:has(> .tg-composer__form > .tg-avatar-size) > :is(.tg-reply-preview, .tg-composer__caption) { margin-inline-start: calc(var(--control-h) + var(--space-3)); } .tg-composer__attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .tg-composer__attachments:empty { display: none; } .tg-composer__toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); min-inline-size: 0; } .tg-composer__form:has(> .tg-composer__toolbar) { flex-wrap: wrap; } .tg-composer__form:has(> .tg-composer__toolbar) > :is(.tg-composer__input, .tg-composer__toolbar, .tg-composer__attachments) { flex: 1 0 100%; } .tg-chat { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; } .tg-chat__log { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; overflow-wrap: anywhere; } .tg-message { display: grid; gap: var(--space-2); min-inline-size: 0; max-inline-size: 100%; scroll-margin-block-end: calc(var(--tg-composer-height, var(--composer-reserved-size)) + var(--space-6)); } .tg-message__body { min-inline-size: 0; line-height: 1.6; } .tg-message__body > :first-child { margin-block-start: 0; } .tg-message__body > :last-child { margin-block-end: 0; } .tg-message__body :is(p, ul, ol, pre, blockquote, table) { margin-block: 0 var(--space-3); } .tg-message__body :is(ul, ol) { padding-inline-start: var(--space-6); } .tg-message__body code { padding: 0.1em 0.35em; border-radius: var(--radius-xs); background: var(--background-muted); font-family: var(--font-family-mono); font-size: 0.875em; } .tg-message__body pre { overflow-x: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--background-muted); font-family: var(--font-family-mono); font-size: var(--fs-sm); line-height: 1.5; } .tg-message__body pre > code { padding: 0; background: none; font-size: inherit; } .tg-message--user { align-self: flex-end; justify-self: end; max-inline-size: min(85%, 36rem); } .tg-message--user > .tg-message__body { padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); border-end-end-radius: var(--radius-xs); background: var(--background-muted); } .tg-message__meta { font-size: var(--fs-xs); color: var(--text-secondary); } .tg-message__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-inline-start: calc(var(--space-2) * -1); } .tg-message[data-state=streaming] > .tg-message__body > :last-child::after { content: ""; display: inline-block; inline-size: 0.5em; block-size: 1.1em; margin-inline-start: 0.125em; vertical-align: text-bottom; border-radius: 1px; background: currentColor; animation: tg-caret 1s steps(2, jump-none) infinite; } .tg-message[data-state=error] > .tg-message__body { color: var(--text-secondary); } @keyframes tg-caret { 50% { opacity: 0; } } @media (hover: hover) and (pointer: fine) { .tg-message--assistant:not(:last-child) > .tg-message__actions { opacity: 0; transition: opacity var(--duration) var(--ease); } .tg-message--assistant:is(:hover, :focus-within) > .tg-message__actions { opacity: 1; } } .tg-reply-preview { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; border-inline-start: var(--border-active); padding-inline-start: var(--space-3); } .tg-reply-preview > * { min-inline-size: 0; } .tg-comment { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-3); scroll-margin-block: var(--space-6) calc(var(--tg-composer-height, var(--composer-reserved-size)) + var(--space-6)); } .tg-comment__body { flex: 1 1 0%; min-inline-size: 0; } .tg-comment__text { white-space: pre-wrap; overflow-wrap: anywhere; } .tg-comment__actions > .tg-btn--ghost:first-child { margin-inline-start: calc(-1 * (var(--space-4) + 1px)); } .tg-comment__actions > .tg-btn--ghost.tg-btn--sm:first-child { margin-inline-start: calc(-1 * (var(--space-3) + 1px)); } body:has(.tg-comment--focus-menu .tg-menu:popover-open)::before { content: ""; position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay-bg); backdrop-filter: blur(4px); } .tg-comment--focus-menu:has(.tg-menu:popover-open) { position: relative; z-index: calc(var(--z-overlay) + 1); pointer-events: none; } .tg-comment--focus-menu:has(.tg-menu:popover-open)::before { content: ""; position: absolute; inset: calc(-1 * var(--space-2)); z-index: -1; background: var(--background-panel); border-radius: var(--radius); } .tg-comment--focus-menu:has(.tg-menu:popover-open) .tg-menu:popover-open { pointer-events: auto; } .tg-thread { margin-inline-start: calc(var(--icon-avatar) + var(--space-3)); padding-inline-start: var(--space-4); border-inline-start: var(--border); } .tg-media { margin-inline: 0; } .tg-media > img { display: block; inline-size: 100%; block-size: auto; max-block-size: var(--media-max-size); object-fit: contain; } @media (min-width: 48rem) { .tg-page-content { --tg-container-padding-start: var(--space-8); } } @media (max-width: 36rem) { .tg-composer__inner { --tg-container-padding-start: var(--space-3); --tg-container-padding-end: var(--space-3); } .tg-composer__caption, .tg-composer__form > .tg-avatar-size { display: none; } .tg-composer__inner:has(> .tg-composer__form > .tg-avatar-size) > .tg-reply-preview { margin-inline-start: 0; } .tg-toolbar--responsive { align-items: stretch; } .tg-tabs--responsive { inline-size: 100%; } .tg-tabs--responsive .tg-tab { justify-content: center; } .tg-comment { display: grid; grid-template-columns: var(--icon-avatar) minmax(0, 1fr); gap: var(--space-1) var(--space-3); } .tg-comment__body { display: contents; } .tg-comment__meta { grid-column: 2; grid-row: 1; align-self: center; } .tg-comment__text, .tg-comment__actions, .tg-comment__recipient, .tg-comment__section { grid-column: 1/-1; } .tg-thread { margin-inline-start: var(--space-3); padding-inline-start: var(--space-2); } } } @layer tds.base { :where(html:has(.tg-composer)) { scroll-padding-bottom: calc(var(--tg-composer-height, var(--composer-reserved-size)) + var(--space-6)); } :where(body:has(dialog.tg-modal[open])) { overflow: hidden; } } @layer tds.utilities { .tg-container.tg-container--reading { max-inline-size: var(--layout-reading-width); } .tg-block { display: block; } .tg-contents { display: contents; } .tg-nowrap { flex-wrap: nowrap; } .tg-text-nowrap { white-space: nowrap; } .tg-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tg-ms-auto { margin-inline-start: auto; } .tg-justify-center { justify-content: center; } .tg-align-center { align-items: center; } .tg-justify-between { justify-content: space-between; } @media (max-width: 36rem) { .tg-hide-mobile { display: none; } } .tg-agent-steps { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .tg-agent-step { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); min-block-size: 2rem; color: var(--text-secondary); font-size: var(--fs-sm); } .tg-agent-step > details { grid-column: 2/-1; } .tg-agent-step[data-state=done] .tg-agent-step__icon { color: var(--text-link); } .tg-agent-step[data-state=error] { color: var(--text-danger); } .tg-agent-step[data-state=error] .tg-agent-step__icon { color: var(--text-danger); } .tg-agent-step[data-state=running] .tg-agent-step__label { color: var(--text-color); } .tg-agent-step__icon { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; } .tg-agent-step__icon > .tg-icon { inline-size: 1rem; block-size: 1rem; } .tg-agent-step__icon > .tg-spinner { inline-size: 0.875rem; block-size: 0.875rem; } .tg-agent-step__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-agent-step__label code { font-family: var(--font-family-mono); font-size: 0.9em; } .tg-agent-step__time { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); } .tg-agent-step__detail { margin-block: var(--space-1) var(--space-2); } .tg-agent-step__detail > summary { display: inline-flex; align-items: center; gap: var(--space-3); list-style: none; } .tg-agent-step__detail > summary::marker { content: ""; } .tg-agent-step__detail > summary::-webkit-details-marker { display: none; } .tg-agent-step__detail > summary::after { content: ""; flex: 0 0 auto; inline-size: var(--icon-size); block-size: var(--icon-size); margin-inline-start: auto; background: currentColor; mask: var(--icon-mask-chevron-down) center/contain no-repeat; transition: transform var(--duration) var(--ease); } .tg-agent-step__detail > summary:is(details[open] > summary)::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .tg-agent-step__detail > summary::after { transition: none; } } .tg-agent-step__detail > summary { min-block-size: 2rem; color: var(--text-link); cursor: pointer; } .tg-agent-step__detail > summary:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; border-radius: var(--radius-xs); } .tg-agent-step__detail > ul, .tg-agent-step__detail > ol { display: grid; gap: var(--space-1); margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3); border-inline-start: 2px solid var(--border-subtle-color); list-style: none; color: var(--text-color); } .tg-agent-step__detail a { color: var(--text-link); text-underline-offset: 0.2em; } .tg-approval { display: grid; gap: var(--space-3); max-inline-size: var(--layout-reading-width); padding: var(--space-4); border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-approval[data-state=danger] { border-color: var(--danger-main); } .tg-approval[data-state=decided] { padding-block: var(--space-3); color: var(--text-secondary); font-size: var(--fs-sm); } .tg-approval__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs); font-weight: var(--fw-semibold); } .tg-approval__title > .tg-icon { flex: 0 0 auto; color: var(--text-link); } .tg-approval[data-state=danger] .tg-approval__title > .tg-icon { color: var(--text-danger); } .tg-approval__description { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); } .tg-approval__options { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; } .tg-approval__options > legend { padding: 0; margin-block-end: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); } .tg-approval__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } @media (max-width: 36rem) { .tg-approval__actions > .tg-btn { flex: 1 1 100%; } } } @layer tds.components { .tg-bottom-panel { position: fixed; inset-inline: 0; inset-block-end: var(--bottom-panel-offset, 0px); z-index: var(--z-sticky); inline-size: min(100%, var(--bottom-panel-width, 100%)); max-block-size: min(var(--bottom-panel-max-height, 85dvh), 100dvh - var(--bottom-panel-offset, 0px)); margin-inline: auto; padding-block-end: var(--safe-area-bottom); overflow: auto; overscroll-behavior: contain; border: var(--floating-border); border-radius: 0; background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); border-block-end: 0; border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); border-end-start-radius: 0; border-end-end-radius: 0; } .tg-bottom-panel--list { --surface-bg: var(--floating-bg); --panel-border: var(--floating-border); --panel-color: var(--floating-color); --panel-shadow: var(--floating-shadow); inline-size: min(100%, var(--bottom-panel-width, var(--layout-reading-width))); padding: var(--space-4); padding-block-end: max(var(--space-4), var(--safe-area-bottom)); border: 0; border-radius: 0; background: transparent; box-shadow: none; } .tg-bottom-panel__trigger, .tg-bottom-panel__header { --control-idle-bg: var(--floating-bg); --control-hover-bg: var(--control-idle-bg); background: var(--control-idle-bg); } .tg-bottom-panel__trigger { position: sticky; inset-block-start: 0; z-index: 1; min-block-size: var(--control-h); cursor: pointer; list-style: none; } .tg-bottom-panel__trigger::-webkit-details-marker { display: none; } .tg-bottom-panel__trigger:focus-visible { outline: 2px solid var(--text-link); outline-offset: -4px; } .tg-list[open] > .tg-bottom-panel__trigger { border-block-end: var(--border); } .tg-bottom-panel__header { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--control-h); padding: var(--space-4); border: 0; color: inherit; font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; list-style: none; } .tg-bottom-panel__header::-webkit-details-marker { display: none; } .tg-bottom-panel__header:focus-visible { outline-offset: -4px; } .tg-bottom-panel__content { padding: var(--space-4); border-block-start: var(--border); overflow-wrap: anywhere; } .tg-bottom-panel__content[hidden] { display: none; } .tg-bottom-panel__chevron { flex: none; margin-inline-start: auto; transition: transform var(--duration) var(--ease); } .tg-bottom-panel .tg-list[open] > .tg-bottom-panel__trigger .tg-bottom-panel__chevron, .tg-bottom-panel[open] > .tg-bottom-panel__header .tg-bottom-panel__chevron, .tg-bottom-panel__header[aria-expanded=true] .tg-bottom-panel__chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .tg-bottom-panel__chevron { transition: none; } } } @layer tds.components { .tg-search { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; padding-inline: var(--space-3) 0; border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); } .tg-search:focus-within { background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } .tg-search:has(.tg-search__input[readonly]) { background: var(--section-bg-color); } .tg-search:has(.tg-search__input:disabled) { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .tg-search:has(.tg-search__input[aria-invalid=true]) { border-color: var(--danger-main); } .tg-search:has(.tg-search__input[aria-invalid=true]):focus-within { box-shadow: 0 0 0 0.25rem var(--danger-soft); } .tg-search .tg-search__input, .tg-search .tg-search__input:hover, .tg-search .tg-search__input:focus, .tg-search .tg-search__input[readonly], .tg-search .tg-search__input[aria-invalid=true]:focus { border: 0; background: transparent; box-shadow: none; } .tg-search .tg-search__input:disabled { opacity: 1; cursor: not-allowed; } .tg-search__icon { flex: 0 0 auto; color: var(--text-secondary); } .tg-search__input { min-inline-size: 0; min-block-size: var(--control-h); border: 0; border-radius: 0; background: transparent; color: var(--text-color); font: inherit; font-size: max(1rem, var(--fs)); } .tg-search__input:focus { outline: none; box-shadow: none; background: transparent; } .tg-search__input::placeholder { color: var(--text-secondary); opacity: 1; } .tg-search__input { flex: 1 1 0%; inline-size: 100%; padding: var(--space-2) 0; } .tg-search__input::-webkit-search-cancel-button { appearance: none; } .tg-search__clear { flex: 0 0 auto; min-inline-size: var(--control-h); min-block-size: var(--control-h); border: 0; background: transparent; color: var(--text-secondary); } .tg-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; overflow-wrap: anywhere; } .tg-empty__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); } .tg-empty__description { max-inline-size: var(--layout-reading-width); margin: 0; color: var(--text-secondary); } .tg-empty__icon { color: var(--text-secondary); } .tg-empty__action { margin-block-start: var(--space-2); } .tg-disclosure { --disclosure-radius-start: var(--radius); --disclosure-radius-end: var(--radius); min-inline-size: 0; border: var(--border); border-radius: var(--disclosure-radius-start) var(--disclosure-radius-start) var(--disclosure-radius-end) var(--disclosure-radius-end); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-disclosure__trigger { display: flex; align-items: center; gap: var(--space-3); list-style: none; } .tg-disclosure__trigger::marker { content: ""; } .tg-disclosure__trigger::-webkit-details-marker { display: none; } .tg-disclosure__trigger::after { content: ""; flex: 0 0 auto; inline-size: var(--icon-size); block-size: var(--icon-size); margin-inline-start: auto; background: var(--text-secondary); mask: var(--icon-mask-chevron-down) center/contain no-repeat; transition: transform var(--duration) var(--ease); } .tg-disclosure__trigger:is(details[open] > summary)::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .tg-disclosure__trigger::after { transition: none; } } .tg-disclosure__trigger { --disclosure-inner-start: max(0px, calc(var(--disclosure-radius-start, var(--radius)) - 1px)); --disclosure-inner-end: max(0px, calc(var(--disclosure-radius-end, var(--radius)) - 1px)); min-block-size: var(--control-h); padding: var(--disclosure-trigger-padding, var(--disclosure-default-padding, var(--space-3) var(--space-4))); font-size: var(--disclosure-trigger-font-size, inherit); border-radius: var(--disclosure-inner-start) var(--disclosure-inner-start) var(--disclosure-inner-end) var(--disclosure-inner-end); font-weight: var(--fw-medium); cursor: pointer; overflow-wrap: anywhere; } .tg-disclosure__trigger--regular { font-weight: var(--fw-regular); } .tg-disclosure--compact { --disclosure-trigger-padding: var(--space-2) var(--space-3); --disclosure-trigger-font-size: var(--fs-sm); } .tg-disclosure--embedded { --disclosure-radius-start: 0px; --disclosure-radius-end: 0px; border-inline: 0; border-block-end: 0; } .tg-disclosure__trigger--no-hover { --control-hover-lightness-step: 0; --control-hover-bg: var(--control-idle-bg); --control-hover-filter: none; } .tg-disclosure[open] > .tg-disclosure__trigger { border-end-start-radius: 0; border-end-end-radius: 0; } .tg-disclosure__content { padding: var(--space-3) var(--space-4) var(--space-4); overflow-wrap: anywhere; } .tg-skeleton { display: block; inline-size: 100%; block-size: var(--control-h); border-radius: var(--radius-sm); background: var(--background-muted); } .tg-skeleton--text { block-size: 1em; border-radius: var(--radius-xs); } .tg-skeleton--circle { inline-size: var(--control-h); aspect-ratio: 1; border-radius: 50%; } .tg-table-wrap { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; border: var(--border); border-radius: var(--radius); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-table { inline-size: 100%; min-inline-size: var(--table-min-width, 32rem); border-collapse: collapse; background: var(--surface-bg); --ring-bg: var(--surface-bg); color: var(--text-color); text-align: start; } .tg-table caption { padding: var(--space-3) var(--space-4); text-align: start; color: var(--text-secondary); } .tg-table :is(th, td) { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: var(--border); vertical-align: top; } .tg-table th { font-weight: var(--fw-semibold); } .tg-table thead th { background: var(--background-main); } .tg-table :is(thead, tbody, tfoot):last-child > tr:last-child > :is(th, td) { border-block-end: 0; } .tg-table tfoot :is(th, td) { border-block-start: var(--border); font-weight: var(--fw-semibold); } .tg-table--compact :is(th, td) { padding: var(--space-2) var(--space-3); } .tg-table--caption-bottom caption { caption-side: bottom; font-size: var(--fs-sm); } .tg-table thead th[aria-sort] { padding-block: var(--space-1); } .tg-table:has(.tg-table__cell-main, .tg-table__select, .tg-table__sort) :is(th, td) { vertical-align: middle; } .tg-table__cell-main { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; } .tg-table__cell-main > .tg-avatar { --icon-avatar: var(--icon-btn-prep); padding: 0; border-width: 0; } .tg-table__cell-main > :last-child { display: grid; min-inline-size: 0; } .tg-table__cell-meta { font-size: var(--fs-sm); color: var(--text-secondary); } .tg-table .tg-table__select { inline-size: calc(var(--choice-size) + var(--space-8)); padding-inline-end: 0; vertical-align: middle; } .tg-table tr:is([aria-selected=true], :has(> .tg-table__select :checked)) > :is(th, td) { background: var(--accent-soft); } .tg-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--control-h); margin-inline: calc(var(--space-2) * -1); padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); font-weight: inherit; text-align: start; cursor: pointer; --control-hover-filter: none; } .tg-table__sort > .tg-icon { --icon-size: 1rem; color: var(--text-secondary); opacity: 0; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); } .tg-table__sort:is(:hover, :focus-visible) > .tg-icon { opacity: 1; } th:is([aria-sort=ascending], [aria-sort=descending]) .tg-table__sort > .tg-icon { opacity: 1; color: var(--text-color); } th[aria-sort=ascending] .tg-table__sort > .tg-icon { transform: rotate(180deg); } .tg-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--background-muted); } .tg-bulk-bar > [role=status] { margin-inline-end: auto; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; } .tg-bulk-bar[data-empty] > [role=status] { color: var(--text-secondary); font-weight: var(--fw-regular); } @media (max-width: 36rem) { .tg-table--stack { display: flex; flex-direction: column; min-inline-size: 0; } .tg-table--stack caption { display: block; } .tg-table--stack.tg-table--caption-bottom caption { order: 1; } .tg-table--stack tbody, .tg-table--stack tr, .tg-table--stack :is(th, td) { display: block; } .tg-table--stack tbody tr { position: relative; } .tg-table--stack tbody td:not([data-label]) { display: flex; align-items: center; } .tg-table--stack tbody td:last-child:not([data-label]):not(:first-child) { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); padding: 0; } .tg-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .tg-table--stack tbody tr { padding-block: var(--space-2); border-block-end: var(--border); } .tg-table--stack tbody tr:last-child { border-block-end: 0; } .tg-table--stack tbody :is(th, td) { display: grid; grid-template-columns: minmax(5rem, 30%) minmax(0, 1fr); gap: var(--space-3); justify-items: start; padding-block: var(--space-1); border: 0; text-align: start; } .tg-table--stack tbody :is(th, td)[data-label]::before { content: attr(data-label); color: var(--text-secondary); font-weight: var(--fw-regular); } .tg-table--stack tfoot { display: block; } .tg-table--stack tfoot tr { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); border-block-start: var(--border); } .tg-table--stack tfoot :is(th, td) { padding: 0; border: 0; } .tg-table--stack.tg-table .tg-table__num { text-align: start; } .tg-table-wrap:has(> .tg-table--stack) { overflow-x: visible; } .tg-bulk-bar:not([data-empty]) { position: sticky; inset-block-end: calc(var(--space-2) + var(--safe-area-bottom)); z-index: var(--z-sticky); box-shadow: var(--shadow-overlay); } } .tg-accordion { display: grid; min-inline-size: 0; } .tg-accordion > .tg-disclosure { --disclosure-radius-start: 0px; --disclosure-radius-end: 0px; } .tg-accordion > .tg-disclosure + .tg-disclosure { border-block-start: 0; } .tg-accordion > .tg-disclosure:first-child { --disclosure-radius-start: var(--radius); } .tg-accordion > .tg-disclosure:last-child { --disclosure-radius-end: var(--radius); } .tg-accordion--separate { gap: var(--space-2); } .tg-accordion--separate > .tg-disclosure { --disclosure-radius-start: var(--radius); --disclosure-radius-end: var(--radius); } .tg-accordion--separate > .tg-disclosure + .tg-disclosure { border-block-start: var(--border); } .tg-accordion__controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } .tg-disclosure__meta { margin-inline-start: auto; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-secondary); white-space: nowrap; } .tg-disclosure__trigger:has(.tg-disclosure__meta)::after { margin-inline-start: 0; } .tg-num, .tg-table .tg-table__num { font-variant-numeric: tabular-nums; text-align: end; } .tg-breadcrumbs { min-inline-size: 0; } .tg-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .tg-breadcrumbs li { display: flex; align-items: center; min-inline-size: 0; gap: var(--space-2); overflow-wrap: anywhere; } .tg-breadcrumbs li + li::before { content: "/"; color: var(--text-secondary); } .tg-breadcrumbs a { display: inline-flex; align-items: center; min-block-size: var(--control-h); color: var(--text-link); text-underline-offset: 0.2em; } .tg-breadcrumbs [aria-current=page] { color: var(--text-secondary); } .tg-summary { margin: 0; min-inline-size: 0; } .tg-summary__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--border); } .tg-summary dt { color: var(--text-secondary); } .tg-summary dd { margin: 0; } .tg-summary :is(dt, dd) { min-inline-size: 0; overflow-wrap: anywhere; } .tg-fieldset { min-inline-size: 0; margin: 0; padding: var(--space-4); border: var(--border); border-radius: var(--radius); } .tg-fieldset legend { padding-inline: var(--space-2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; max-inline-size: 100%; } .tg-error-summary { padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius); background: var(--notice-danger-bg); color: var(--text-color); overflow-wrap: anywhere; } .tg-error-summary:has(> .tg-error-summary__icon) { display: flex; align-items: flex-start; gap: var(--space-3); } .tg-error-summary__icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; margin-block-start: 0.125rem; color: var(--text-danger); } .tg-error-summary__content { min-inline-size: 0; } .tg-error-summary__content > :not(:first-child) { margin-block-start: var(--space-1); font-size: var(--fs-sm); color: var(--text-secondary); } .tg-error-summary__title { display: block; margin: 0; font-size: inherit; font-weight: var(--fw-semibold); line-height: inherit; color: inherit; } .tg-error-summary ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-secondary); } .tg-error-summary > ul { margin-block-start: var(--space-1); } .tg-error-summary a { color: inherit; text-underline-offset: 0.2em; } input[type=range].tg-range { display: block; border: 0; appearance: none; background: transparent; inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-h); margin: 0; accent-color: var(--accent-main); cursor: pointer; } input[type=range].tg-range::-webkit-slider-runnable-track { block-size: 6px; border: 0; border-radius: var(--radius-pill); background: var(--range-track-bg, linear-gradient(to right, var(--accent-main) var(--range-progress, 50%), var(--background-muted) var(--range-progress, 50%))); } input[type=range].tg-range::-webkit-slider-thumb { appearance: none; inline-size: 16px; block-size: 16px; margin-block-start: -5px; border: 0; border-radius: 50%; background: var(--range-thumb-bg, var(--accent-main)); box-shadow: 0 0 0 3px var(--range-thumb-ring, var(--ring-bg)); } input[type=range].tg-range::-moz-range-track { block-size: 6px; border: 0; border-radius: var(--radius-pill); background: var(--range-track-bg, var(--background-muted)); } input[type=range].tg-range::-moz-range-thumb { inline-size: 16px; block-size: 16px; border: 0; border-radius: 50%; background: var(--range-thumb-bg, var(--accent-main)); box-shadow: 0 0 0 3px var(--range-thumb-ring, var(--ring-bg)); } input[type=range].tg-range::-moz-range-progress { block-size: 6px; border: 0; border-radius: var(--radius-pill); background: var(--range-progress-bg, var(--accent-main)); } input[type=range].tg-range:disabled { cursor: not-allowed; opacity: var(--disabled-opacity, 0.5); } :is(.tg-disclosure__trigger, .tg-table-wrap, .tg-breadcrumbs a, .tg-error-summary, .tg-error-summary a, .tg-range):focus-visible { outline: 2px solid var(--text-link); outline-offset: 3px; } @media (forced-colors: active) { .tg-search:focus-within { outline: 2px solid Highlight; outline-offset: 2px; } .tg-skeleton { border: 1px solid CanvasText; } } @media (max-width: 36rem) { .tg-summary__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } } .tg-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-inline-size: 0; } .tg-table-toolbar > .tg-search { flex: 1 1 14rem; max-inline-size: 22rem; } .tg-table-toolbar > .tg-table-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .tg-table-toolbar > .tg-table-toolbar__end { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; } .tg-table-toolbar__count { color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .tg-sortable { display: grid; gap: 0; margin: 0; padding: 0; border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); list-style: none; } .tg-sortable__item { position: relative; display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-h); padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); background: var(--surface-bg); --ring-bg: var(--surface-bg); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .tg-sortable__item + .tg-sortable__item { border-block-start: var(--border); } .tg-sortable__item:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; } .tg-sortable__item:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; } .tg-sortable__item > .tg-num, .tg-sortable__item > .tg-badge { margin-inline-start: auto; } .tg-sortable__item[data-grabbed] { z-index: 2; border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); transform: scale(1.01); } .tg-sortable__item[data-drop=before]::before, .tg-sortable__item[data-drop=after]::after { content: ""; position: absolute; inset-inline: var(--space-2); block-size: 2px; border-radius: 1px; background: var(--accent-main); } .tg-sortable__item[data-drop=before]::before { inset-block-start: -1px; } .tg-sortable__item[data-drop=after]::after { inset-block-end: -1px; } .tg-sortable__handle { --control-hover-filter: none; display: grid; flex: 0 0 auto; place-items: center; inline-size: var(--control-h); block-size: var(--control-h); padding: 0; border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: var(--text-secondary); cursor: grab; touch-action: none; } .tg-sortable__handle:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-sortable__handle[aria-pressed=true] { cursor: grabbing; color: var(--text-link); } @media (prefers-reduced-motion: reduce) { .tg-sortable__item[data-grabbed] { transform: none; } } } @layer tds.components { :where(.tg-feedback-host) { position: relative; } .tg-feedback-host { isolation: isolate; } .tg-feedback-layer { position: absolute; inset: 0; z-index: -1; overflow: clip; border-radius: inherit; pointer-events: none; opacity: 0.25; } .tg-feedback-layer > .tg-ripple__wave { background: var(--ripple-color, currentColor); animation: tg-ripple-wave var(--ripple-duration, 300ms) ease-out forwards; } .tg-feedback-layer > .tg-ripple__ring { box-shadow: inset 0 0 0 var(--ring-width, 1px) var(--ripple-border-color, var(--ripple-color, currentColor)); animation: tg-ripple-ring var(--ring-duration, 300ms) ease-out forwards; } .tg-feedback-layer > .tg-ripple__wash { background: var(--ripple-hover-color, var(--ripple-color, currentColor)); animation: tg-ripple-wash var(--wash-duration, 300ms) ease-out forwards; } :is(.tg-btn, .tg-icon-btn)[aria-busy=true] { cursor: progress; } .tg-btn__states { display: inline-grid; } .tg-btn__states > * { grid-area: 1/1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); visibility: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--duration-fade-out) var(--ease), filter var(--duration-fade-out) var(--ease), visibility 0s linear var(--duration-fade-out); } .tg-btn:not([data-state]) .tg-btn__states > [data-state=idle], .tg-btn[data-state=idle] .tg-btn__states > [data-state=idle], .tg-btn[data-state=busy] .tg-btn__states > [data-state=busy], .tg-btn[data-state=success] .tg-btn__states > [data-state=success], .tg-btn[data-state=error] .tg-btn__states > [data-state=error] { visibility: visible; opacity: 1; filter: none; transition: opacity var(--duration-fade-in) var(--ease), filter var(--duration-fade-in) var(--ease), visibility 0s; } .tg-btn:has(> .tg-btn__progress) { position: relative; overflow: clip; } .tg-btn__progress { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--accent-main); transform: scaleX(clamp(0, var(--progress, 0), 1)); transform-origin: left center; transition: transform var(--progress-duration) var(--ease); pointer-events: none; } .tg-btn__progress:dir(rtl) { transform-origin: right center; } } @layer tds.components { .tg-tooltip { --tg-float-origin: bottom center; max-inline-size: min(16rem, 100vw - var(--space-4)); padding: var(--space-1) var(--space-2); border: var(--floating-border); border-radius: var(--radius-sm); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; pointer-events: none; } .tg-tooltip[data-side=bottom] { --tg-float-origin: top center; } .tg-tooltip[data-side=inline-start] { --tg-float-origin: right center; } .tg-tooltip[data-side=inline-end] { --tg-float-origin: left center; } .tg-tooltip:dir(rtl)[data-side=inline-start] { --tg-float-origin: left center; } .tg-tooltip:dir(rtl)[data-side=inline-end] { --tg-float-origin: right center; } .tg-tooltip > kbd, .tg-tooltip > .tg-kbd { min-inline-size: 0; margin-inline-start: var(--space-2); padding: 0; border: 0; background: none; color: inherit; opacity: 0.72; font: inherit; font-variant-numeric: tabular-nums; } .tg-tooltip[popover] { position: fixed; inset: auto; inset-block-start: var(--tg-anchor-block, auto); inset-inline-start: var(--tg-anchor-inline, auto); margin: 0; transform-origin: var(--tg-float-origin, bottom center); opacity: 0; transform: scale(0.96); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), overlay var(--duration-fade-out) allow-discrete, display var(--duration-fade-out) allow-discrete; } .tg-tooltip[popover]:dir(rtl) { transform-origin: var(--tg-float-origin, bottom center); } .tg-tooltip[popover]:popover-open { opacity: 1; transform: none; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), overlay var(--duration-fade-in) allow-discrete, display var(--duration-fade-in) allow-discrete; } @starting-style { .tg-tooltip[popover]:popover-open { opacity: 0; transform: scale(0.96); } } .tg-tooltip[popover]:not(:popover-open) { display: none; } .tg-tooltip[popover][data-instant] { transition: none; } .tg-tooltip[popover]:popover-open { transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; } @supports (position-area: block-end) { .tg-tooltip[popover]:not([data-positioned]) { position-area: block-start; position-try-fallbacks: flip-block, flip-inline; margin: var(--space-2); } .tg-tooltip[popover][data-side=bottom]:not([data-positioned]) { position-area: block-end; } .tg-tooltip[popover][data-side=inline-start]:not([data-positioned]) { position-area: inline-start; } .tg-tooltip[popover][data-side=inline-end]:not([data-positioned]) { position-area: inline-end; } } @media (forced-colors: active) { .tg-tooltip { border: 1px solid CanvasText; } } .tg-toast:has(> :is(.tg-toast__title, .tg-toast__action, .tg-toast__close, .tg-toast__body)) { display: flex; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); padding-inline: var(--space-4) var(--space-2); } .tg-toast:has(> :is(.tg-toast__title, .tg-toast__action, .tg-toast__close, .tg-toast__body)) > .tg-icon { flex: 0 0 auto; color: var(--text-secondary); } .tg-toast__body { display: grid; flex: 1 1 auto; gap: 0.125rem; min-inline-size: 0; } .tg-toast__body > * { margin: 0; } .tg-toast__body > :not(.tg-toast__title) { color: var(--text-secondary); font-size: var(--fs-sm); } .tg-toast__title { font-weight: var(--fw-semibold); } .tg-toast__action { flex: 0 0 auto; } .tg-toast__close { flex: 0 0 auto; margin-block: calc(var(--space-2) * -1); } .tg-toast-region { position: fixed; inset-inline: var(--space-4); inset-block-end: calc(var(--space-5) + var(--safe-area-bottom) + var(--tg-composer-height, 0px)); z-index: var(--z-toast); inline-size: min(26rem, 100% - var(--space-8)); margin-inline: auto; pointer-events: none; } .tg-toast-region[data-placement=top] { inset-block: calc(var(--space-4) + env(safe-area-inset-top, 0px)) auto; } .tg-toast-region > [role=status], .tg-toast-region > [role=log] { display: flex; flex-direction: column; gap: var(--space-2); } .tg-toast-region .tg-toast { position: relative; inset: auto; inline-size: 100%; max-inline-size: none; margin: 0; } .tg-toast-region .tg-toast--show { pointer-events: auto; } .tg-toast-region[data-stacked] > [role=status], .tg-toast-region[data-stacked] > [role=log] { position: relative; display: block; block-size: var(--toast-stack-height, auto); transition: block-size var(--duration) var(--ease); } .tg-toast-region[data-stacked] .tg-toast { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: calc(10 - var(--toast-index, 0)); transform-origin: bottom center; transform: translateY(calc(var(--toast-index, 0) * -0.625rem)) scale(calc(1 - var(--toast-index, 0) * 0.05)); transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), visibility 0s; } .tg-toast-region[data-stacked] .tg-toast > * { transition: opacity var(--duration-fast) var(--ease); } .tg-toast-region[data-stacked] .tg-toast:not([data-front]) > * { opacity: var(--toast-content-opacity, 0); } .tg-toast-region[data-stacked] .tg-toast[data-overflow] { opacity: 0; visibility: hidden; } .tg-toast-region[data-stacked] .tg-toast:not(.tg-toast--show) { opacity: 0; transform: translateY(100%); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fade-out); } .tg-toast-region[data-stacked][data-placement=top] .tg-toast { inset-block: 0 auto; transform-origin: top center; transform: translateY(calc(var(--toast-index, 0) * 0.625rem)) scale(calc(1 - var(--toast-index, 0) * 0.05)); } .tg-toast-region[data-stacked]:is(:hover, :focus-within, [data-expanded]) { pointer-events: auto; } .tg-toast-region[data-stacked]:is(:hover, :focus-within, [data-expanded]) > [role=status], .tg-toast-region[data-stacked]:is(:hover, :focus-within, [data-expanded]) > [role=log] { block-size: var(--toast-stack-expanded, auto); } .tg-toast-region[data-stacked]:is(:hover, :focus-within, [data-expanded]) .tg-toast { --toast-content-opacity: 1; transform: translateY(calc(var(--toast-offset, 0px) * -1)); } .tg-toast-region[data-stacked]:is(:hover, :focus-within, [data-expanded]) .tg-toast[data-overflow] { opacity: 1; visibility: visible; } .tg-toast-region[data-stacked]:is(:hover, :focus-within, [data-expanded])[data-placement=top] .tg-toast { transform: translateY(var(--toast-offset, 0px)); } @media (max-width: 36rem) { .tg-toast-region { inset-inline: var(--space-3); inline-size: auto; } } .tg-banner { position: relative; padding-inline-end: calc(var(--control-h) + var(--space-2)); background: var(--background-muted); color: var(--text-color); font-size: var(--fs-sm); } .tg-banner--accent { background: var(--accent-soft); } .tg-banner--sticky { position: sticky; inset-block-start: 0; z-index: calc(var(--z-sticky) + 1); } .tg-banner__content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-block-size: var(--control-h); padding-block: var(--space-2); } .tg-banner__content > .tg-icon { flex: 0 0 auto; color: var(--text-secondary); } .tg-banner__content > p { flex: 1 1 10rem; margin: 0; min-inline-size: 0; } .tg-banner--accent .tg-banner__content > .tg-icon { color: var(--text-link); } .tg-banner__action { flex: 0 0 auto; font-weight: var(--fw-medium); } .tg-banner__dismiss { position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-2); translate: 0 -50%; } .tg-hover-card { --tg-float-origin: top center; inline-size: min(20rem, 100vw - var(--space-4)); padding: var(--space-4); border: var(--floating-border); border-radius: var(--radius-lg); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; } .tg-hover-card > * { margin: 0; } .tg-hover-card > * + * { margin-block-start: var(--space-2); } .tg-hover-card[popover] { position: fixed; inset: auto; inset-block-start: var(--tg-anchor-block, auto); inset-inline-start: var(--tg-anchor-inline, auto); margin: 0; transform-origin: var(--tg-float-origin, top center); opacity: 0; transform: scale(0.97); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), overlay var(--duration-fade-out) allow-discrete, display var(--duration-fade-out) allow-discrete; } .tg-hover-card[popover]:dir(rtl) { transform-origin: var(--tg-float-origin, top center); } .tg-hover-card[popover]:popover-open { opacity: 1; transform: none; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), overlay var(--duration-fade-in) allow-discrete, display var(--duration-fade-in) allow-discrete; } @starting-style { .tg-hover-card[popover]:popover-open { opacity: 0; transform: scale(0.97); } } .tg-hover-card[popover]:not(:popover-open) { display: none; } .tg-hover-card[popover][data-instant] { transition: none; } @supports (position-area: block-end) { .tg-hover-card[popover]:not([data-positioned]) { position-area: block-end; position-try-fallbacks: flip-block, flip-inline; margin: var(--space-2); } } .tg-hover-card__trigger { text-decoration-style: dotted; text-underline-offset: 0.25em; } @media (hover: none) { .tg-hover-card[popover] { display: none; } } dialog.tg-command { inline-size: min(40rem, 100% - var(--space-8)); max-block-size: min(32rem, 100dvh - 20vh - var(--space-4)); margin-block: 20vh auto; padding: 0; overflow: hidden; } dialog.tg-command[open] { display: flex; flex-direction: column; } dialog.tg-command[data-instant][open] { animation: none; } .tg-command__search { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-3); padding-inline: var(--space-4); border-block-end: var(--border); } .tg-command__search > .tg-icon { flex: 0 0 auto; color: var(--text-secondary); } .tg-command__input { flex: 1 1 auto; min-inline-size: 0; min-block-size: calc(var(--control-h) + var(--space-2)); border: 0; background: transparent; color: var(--text-color); font: inherit; font-size: max(1rem, var(--fs)); } .tg-command__input:focus { outline: none; } .tg-command__input::placeholder { color: var(--text-secondary); opacity: 1; } .tg-command__input::-webkit-search-cancel-button { display: none; } .tg-command__list { display: grid; align-content: start; gap: var(--option-gap); flex: 1 1 auto; min-block-size: 0; padding: var(--space-2); overflow-y: auto; overscroll-behavior: contain; } .tg-command__list > .tg-empty { padding-block: var(--space-6); } .tg-command__group { display: grid; align-content: start; gap: var(--option-gap); } .tg-command__group + .tg-command__group { margin-block-start: var(--space-2); } .tg-command__group-label { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: 0.02em; } .tg-command__item { --control-hover-filter: none; --control-paint-duration: 0s; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--control-h); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } .tg-command__item > .tg-icon { color: var(--text-secondary); } .tg-command__item[data-active] { background: var(--control-hover-bg); } .tg-command__item { -webkit-user-select: none; user-select: none; } .tg-command__item[aria-selected=true] { background: var(--control-hover-bg); } .tg-command__item > .tg-command__text { display: grid; flex: 1 1 auto; min-inline-size: 0; } .tg-command__meta { font-size: var(--fs-sm); color: var(--text-secondary); } .tg-command__shortcut { flex: 0 0 auto; margin-inline-start: auto; font: inherit; color: var(--text-secondary); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .tg-command__footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); border-block-start: var(--border-transparent); color: var(--text-secondary); font-size: var(--fs-xs); } .tg-command__footer > span { display: inline-flex; align-items: center; gap: var(--space-1); } @media (max-width: 36rem) { dialog.tg-command { inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; border-radius: 0; } } } @layer tds.components { .tg-code-block { contain: inline-size; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; overflow: auto; margin: 0; padding: var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--background-muted); color: var(--text-color); font: var(--fs-xs)/1.5 var(--font-family-mono); tab-size: 2; } .tg-kbd { display: inline-flex; align-items: center; justify-content: center; gap: 0.25em; min-inline-size: 1.5em; padding: 0.125em 0.4em; border: 1px solid var(--border-subtle-color); border-radius: var(--radius-xs); background: var(--background-muted); color: var(--text-color); font-family: var(--font-family-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; white-space: nowrap; vertical-align: 0.1em; } .tg-kbd:has(> kbd) { gap: 0.25em; padding: 0; border: 0; background: none; color: var(--text-secondary); } .tg-kbd > kbd { display: inline-flex; align-items: center; justify-content: center; gap: 0.25em; min-inline-size: 1.5em; padding: 0.125em 0.4em; border: 1px solid var(--border-subtle-color); border-radius: var(--radius-xs); background: var(--background-muted); color: var(--text-color); font-family: var(--font-family-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; white-space: nowrap; vertical-align: 0.1em; } .tg-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); margin: 0; color: var(--text-color); } .tg-price__value { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -0.02em; } .tg-price__period { color: var(--text-secondary); font-size: var(--fs-sm); } .tg-price__old { color: var(--text-secondary); font-size: var(--fs-sm); text-decoration: line-through; } .tg-feature-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; font-size: var(--fs-sm); list-style: none; } .tg-feature-list__item { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-2); align-items: start; } .tg-feature-list__item::before { content: ""; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.125rem; background: var(--text-link); mask: var(--icon-mask-check) center/contain no-repeat; } .tg-feature-list__item--off { color: var(--text-secondary); } .tg-feature-list__item--off::before { block-size: 2px; margin-block-start: 0.5625rem; border-radius: 1px; background: var(--text-secondary); mask: none; } .tg-testimonial { display: grid; align-content: start; gap: var(--space-4); min-inline-size: 0; margin: 0; padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-testimonial:has(> .tg-testimonial__media) { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); padding: 0; clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); } .tg-testimonial:has(> .tg-testimonial__media) > :not(.tg-testimonial__media) { grid-column: 2; margin-inline-end: var(--space-5); } .tg-testimonial:has(> .tg-testimonial__media) > :nth-child(2) { margin-block-start: var(--space-5); } .tg-testimonial:has(> .tg-testimonial__media) > :last-child { margin-block-end: var(--space-5); } .tg-testimonial__media { grid-row: 1/span 4; margin: 0; background: var(--background-muted); } .tg-testimonial__media > img { display: block; inline-size: 100%; block-size: 100%; min-block-size: 12rem; object-fit: cover; } .tg-testimonial__quote { position: relative; margin: 0; color: var(--text-color); font-size: var(--fs-lg); line-height: 1.5; } .tg-testimonial__quote > p { margin: 0; } .tg-testimonial__quote > p + p { margin-block-start: var(--space-2); } .tg-testimonial__author { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); font-style: normal; } .tg-testimonial__author > .tg-avatar { --icon-avatar: 2.5rem; padding: 0; border-width: 0; } .tg-testimonial__author > span:not(.tg-avatar) { display: grid; min-inline-size: 0; } .tg-testimonial__author cite { color: var(--text-color); font-style: normal; font-weight: var(--fw-semibold); } .tg-testimonial__author span > span { color: var(--text-secondary); } .tg-testimonial__rating { display: inline-flex; align-items: center; gap: 2px; margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); } .tg-testimonial__rating > span:not(.tg-testimonial__stars, .tg-sr-only) { margin-inline-start: var(--space-2); } .tg-testimonial__stars { display: inline-block; inline-size: 5.5rem; block-size: 1rem; background: linear-gradient(to right, var(--accent-main) calc(var(--rating, 5) / 5 * 100%), var(--border-color) 0); mask: var(--icon-mask-star) left center/1.1rem 1rem repeat-x; } .tg-testimonial__stars:dir(rtl) { background: linear-gradient(to left, var(--accent-main) calc(var(--rating, 5) / 5 * 100%), var(--border-color) 0); } @media (forced-colors: active) { .tg-testimonial__stars { background: CanvasText; } } @media (max-width: 36rem) { .tg-testimonial:has(> .tg-testimonial__media) { grid-template-columns: minmax(0, 1fr); } .tg-testimonial:has(> .tg-testimonial__media) > :not(.tg-testimonial__media) { grid-column: 1; margin-inline: var(--space-5); } .tg-testimonial:has(> .tg-testimonial__media) > .tg-testimonial__media { grid-row: auto; } .tg-testimonial:has(> .tg-testimonial__media) > .tg-testimonial__media > img { min-block-size: 0; aspect-ratio: 16/9; } } } @layer tds.components { .tg-progress-ring { --ring-size: 2.5rem; --ring-stroke: 3; position: relative; display: inline-grid; flex: 0 0 auto; place-items: center; inline-size: var(--ring-size); block-size: var(--ring-size); color: var(--progress-color); } .tg-progress-ring > svg { grid-area: 1/1; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); overflow: visible; } .tg-progress-ring:dir(rtl) > svg { transform: rotate(-90deg) scaleY(-1); } .tg-progress-ring--sm { --ring-size: 1.5rem; --ring-stroke: 4; } .tg-progress-ring--lg { --ring-size: 4rem; --ring-stroke: 2.5; } .tg-progress-ring--destructive { --progress-color: var(--danger-main); } .tg-progress-ring__track, .tg-progress-ring__value { fill: none; stroke-width: var(--ring-stroke); } .tg-progress-ring__track { stroke: var(--progress-track-color); } .tg-progress-ring__value { stroke: currentColor; stroke-linecap: round; stroke-dasharray: clamp(0, var(--value, 25), 100) 100; transition: stroke-dasharray var(--progress-duration) var(--ease); } .tg-progress-ring__label { grid-area: 1/1; color: var(--text-color); font-size: calc(var(--ring-size) * 0.28); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; } .tg-progress-ring:not([aria-valuenow]) > svg { animation: tg-ring-spin 1s linear infinite; } @keyframes tg-ring-spin { to { transform: rotate(270deg); } } @media (prefers-reduced-motion: reduce) { .tg-progress-ring:not([aria-valuenow]) > svg { animation: tg-ring-pulse 1.6s ease-in-out infinite; animation-duration: 1.6s; animation-iteration-count: infinite; } @keyframes tg-ring-pulse { 50% { opacity: 0.4; } } } .tg-timeline { --timeline-marker: 1.25rem; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .tg-timeline__item { position: relative; display: grid; grid-template-columns: var(--timeline-marker) minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-content: start; padding-block-end: var(--space-6); } .tg-timeline__item > :not(.tg-timeline__marker) { grid-column: 2; margin: 0; min-inline-size: 0; } .tg-timeline__item > :is(h3, h4, strong) { font-size: var(--fs); font-weight: var(--fw-semibold); line-height: 1.35; } .tg-timeline__item > p { color: var(--text-secondary); } .tg-timeline__item > .tg-badge { justify-self: start; margin-block-start: var(--space-1); } .tg-timeline__item:not(:last-child)::before { content: ""; position: absolute; z-index: 0; background: var(--step-line-color, var(--border-color)); inset-block: calc(var(--timeline-marker) / 2) calc(var(--timeline-marker) / -2); inset-inline: calc(var(--timeline-marker) / 2 - 1px) auto; inline-size: 2px; block-size: auto; } .tg-timeline__item[data-state=done] { --step-line-color: var(--accent-main); } .tg-timeline__item:last-child { padding-block-end: 0; } .tg-timeline__marker { position: relative; z-index: 1; display: grid; flex: 0 0 auto; place-items: center; inline-size: var(--timeline-marker); block-size: var(--timeline-marker); border: 2px solid var(--border-color); border-radius: 50%; background: var(--surface-bg); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; } .tg-timeline__marker > .tg-icon { inline-size: calc(var(--timeline-marker) * 0.5); block-size: calc(var(--timeline-marker) * 0.5); } .tg-timeline__marker { grid-row: 1; grid-column: 1; } .tg-timeline__marker > .tg-icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 3; } .tg-timeline__item[data-state=done] .tg-timeline__marker { border-color: transparent; background: var(--action-bg); color: var(--button-text-color); } .tg-timeline__item:is([data-state=current], [aria-current=step]) .tg-timeline__marker { border-color: var(--accent-main); color: var(--text-link); box-shadow: 0 0 0 0.25rem var(--accent-soft); } .tg-timeline__item[data-state=error] .tg-timeline__marker { border-color: transparent; background: var(--action-danger-bg); color: var(--button-text-color); } .tg-timeline__time { order: -1; color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .tg-timeline__item > .tg-timeline__time { grid-row: 1; align-self: center; line-height: 1.35; text-box: trim-both cap alphabetic; } @media (min-width: 48rem) { .tg-timeline--horizontal { grid-auto-columns: minmax(12rem, 1fr); grid-auto-flow: column; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: thin; padding-block: var(--space-1) var(--space-2); } .tg-timeline--horizontal > .tg-timeline__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); padding-block-end: 0; padding-inline: var(--space-3); justify-items: center; text-align: center; scroll-snap-align: start; } .tg-timeline--horizontal > .tg-timeline__item > * { grid-column: 1; } .tg-timeline--horizontal > .tg-timeline__item > .tg-timeline__marker { grid-row: 1; margin-block-end: var(--space-2); } .tg-timeline--horizontal > .tg-timeline__item > .tg-timeline__time { grid-row: 2; } .tg-timeline--horizontal > .tg-timeline__item > .tg-badge { justify-self: center; } .tg-timeline--horizontal > .tg-timeline__item:not(:last-child)::before { content: ""; position: absolute; z-index: 0; background: var(--step-line-color, var(--border-color)); inset-inline: 50% calc(50% * -1); inset-block: calc(var(--timeline-marker) / 2 - 1px) auto; inline-size: auto; block-size: 2px; } } .tg-stepper { --stepper-marker: 2rem; display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: tg-step; } .tg-stepper__step { position: relative; display: flex; flex: 1 1 0; align-items: center; gap: var(--space-2); min-inline-size: 0; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); } .tg-stepper__step:not(:last-child)::after { content: ""; flex: 1 1 var(--space-4); min-inline-size: var(--space-4); block-size: 2px; border-radius: 1px; background: var(--border-color); } .tg-stepper__step[data-state=done]:not(:last-child)::after { background: var(--accent-main); } .tg-stepper__step:is([aria-current=step], [data-state=current], [data-state=done]) { color: var(--text-color); } .tg-stepper__step[data-state=error] { color: var(--text-danger); } .tg-stepper__marker { position: relative; z-index: 1; display: grid; flex: 0 0 auto; place-items: center; inline-size: var(--stepper-marker); block-size: var(--stepper-marker); border: 2px solid var(--border-color); border-radius: 50%; background: var(--surface-bg); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; } .tg-stepper__marker > .tg-icon { inline-size: calc(var(--stepper-marker) * 0.5); block-size: calc(var(--stepper-marker) * 0.5); } .tg-stepper__step[data-state=done] .tg-stepper__marker { border-color: transparent; background: var(--action-bg); color: var(--button-text-color); } .tg-stepper__step:is([data-state=current], [aria-current=step]) .tg-stepper__marker { border-color: var(--accent-main); color: var(--text-link); box-shadow: 0 0 0 0.25rem var(--accent-soft); } .tg-stepper__step[data-state=error] .tg-stepper__marker { border-color: transparent; background: var(--action-danger-bg); color: var(--button-text-color); } .tg-stepper__label { display: grid; min-inline-size: 0; overflow-wrap: anywhere; } .tg-stepper__description { color: var(--text-secondary); font-weight: var(--fw-regular); } @media (max-width: 36rem) { .tg-stepper:not(.tg-stepper--vertical) .tg-stepper__step:not([aria-current=step], [data-state=current]) .tg-stepper__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tg-stepper:not(.tg-stepper--vertical) .tg-stepper__step:not([aria-current=step], [data-state=current]) { flex: 0 1 auto; } } .tg-stepper--vertical { flex-direction: column; gap: 0; } .tg-stepper--vertical > .tg-stepper__step { display: grid; grid-template-columns: var(--stepper-marker) minmax(0, 1fr); align-items: start; column-gap: var(--space-3); padding-block-end: var(--space-5); } .tg-stepper--vertical > .tg-stepper__step > .tg-stepper__label { font-size: var(--fs); line-height: 1.35; text-box: trim-start cap alphabetic; } .tg-stepper--vertical > .tg-stepper__step[data-state=done] { --step-line-color: var(--accent-main); } .tg-stepper--vertical > .tg-stepper__step:last-child { padding-block-end: 0; } .tg-stepper--vertical > .tg-stepper__step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; background: var(--step-line-color, var(--border-color)); inset-block: calc(var(--stepper-marker) / 2) calc(var(--stepper-marker) / -2); inset-inline: calc(var(--stepper-marker) / 2 - 1px) auto; inline-size: 2px; block-size: auto; flex: none; min-inline-size: 0; border-radius: 1px; } .tg-stepper--vertical .tg-stepper__description { font-size: var(--fs-sm); } .tg-schedule { --schedule-row: 1.25rem; --schedule-rows: 40; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); min-inline-size: 0; border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); overflow: clip; } .tg-schedule__axis { display: grid; grid-template-rows: repeat(var(--schedule-rows), var(--schedule-row)); margin: 0; padding: 0; border-inline-end: 1px solid var(--border-subtle-color); color: var(--text-secondary); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; list-style: none; } .tg-schedule__axis > li { grid-row: span 4; padding: 0 var(--space-2); text-align: end; translate: 0 -0.5em; } .tg-schedule__axis > li:first-child { translate: none; } .tg-schedule__row { position: relative; display: grid; grid-template-rows: repeat(var(--schedule-rows), var(--schedule-row)); grid-auto-columns: minmax(0, 1fr); gap: 0 var(--space-1); margin: 0; padding: 0 var(--space-1); background-image: linear-gradient(to bottom, var(--border-subtle-color) 1px, transparent 1px); background-size: 100% calc(var(--schedule-row) * 4); list-style: none; } .tg-schedule__event { grid-row: var(--start, 1)/var(--end, 5); grid-column: var(--lane, 1); display: grid; align-content: start; gap: 0; min-block-size: 0; margin-block: 1px; padding: var(--space-1) var(--space-2); border-inline-start: 3px solid var(--accent-main); border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--text-color); font-size: var(--fs-xs); line-height: 1.35; overflow: hidden; } .tg-schedule__event > strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-schedule__event > time { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .tg-schedule__event[data-conflict] { border-inline-start-color: var(--danger-main); background: var(--danger-soft); } .tg-schedule__event:is(a, button) { cursor: pointer; text-decoration: none; } .tg-schedule__event:focus-visible { outline: 2px solid var(--text-link); outline-offset: 1px; } .tg-schedule__now { position: absolute; inset-inline: 0; inset-block-start: calc(var(--now, 0) * var(--schedule-row)); z-index: 1; block-size: 2px; background: var(--danger-main); pointer-events: none; } .tg-schedule__now::before { content: ""; position: absolute; inset-inline-start: -4px; inset-block-start: -3px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: inherit; } @media (max-width: 36rem) { .tg-schedule { grid-template-columns: 1fr; } .tg-schedule__axis, .tg-schedule__now { display: none; } .tg-schedule__row { display: grid; grid-template-rows: none; gap: var(--space-2); padding: var(--space-2); background: none; } .tg-schedule__event { grid-row: auto; grid-column: auto; padding-block: var(--space-2); } } } @layer tds.components { .tg-listbox-trigger { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-h); padding: var(--space-2) var(--space-3); padding-inline-end: var(--space-10); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); background-image: var(--select-arrow); background-repeat: no-repeat; background-size: var(--icon-size) var(--icon-size); background-position: right var(--space-3) center; color: var(--text-color); font-size: max(1rem, var(--fs)); line-height: 1.5; text-align: start; cursor: pointer; transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); --control-idle-bg: var(--field-bg); --control-hover-bg: var(--field-bg-hover); --control-hover-filter: none; } .tg-listbox-trigger:dir(rtl) { background-position: left var(--space-3) center; } .tg-listbox-trigger > .tg-icon, .tg-listbox-trigger > .tg-avatar { flex: 0 0 auto; } .tg-listbox-trigger > .tg-avatar { --icon-avatar: 1.75rem; margin-block: calc(var(--space-1) * -1); padding: 0; border-width: 0; font-size: var(--fs-xs); } .tg-listbox-trigger > :not(.tg-icon, .tg-avatar) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-listbox-trigger:focus-visible, .tg-listbox-trigger[aria-expanded=true] { outline: none; border-color: var(--accent-main); background-color: var(--control-hover-bg); box-shadow: var(--focus); } .tg-listbox-trigger[aria-invalid=true] { border-color: var(--danger-main); } .tg-listbox { --listbox-option-h: var(--control-h); display: grid; align-content: start; gap: var(--option-gap); min-inline-size: max(12rem, var(--tg-anchor-width, 0px)); max-inline-size: min(26rem, 100vw - var(--space-8)); max-block-size: min(20rem, 100dvh - var(--space-8)); margin: 0; padding: var(--space-1); list-style: none; overflow-y: auto; overscroll-behavior: contain; border: var(--floating-border); border-radius: var(--radius-control); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); font-size: var(--fs); line-height: 1.4; } .tg-listbox:empty::after, .tg-listbox > .tg-listbox__empty { padding: var(--space-3); color: var(--text-secondary); font-size: var(--fs-sm); text-align: center; } .tg-listbox:empty::after { content: attr(data-empty); } .tg-listbox[aria-busy=true] { opacity: 0.6; } .tg-listbox[popover] { position: fixed; inset: auto; inset-block-start: var(--tg-anchor-block, auto); inset-inline-start: var(--tg-anchor-inline, auto); margin: 0; transform-origin: var(--tg-listbox-origin, top left); opacity: 0; transform: scale(0.97); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), overlay var(--duration-fade-out) allow-discrete, display var(--duration-fade-out) allow-discrete; } .tg-listbox[popover]:dir(rtl) { transform-origin: var(--tg-listbox-origin, top right); } .tg-listbox[popover]:popover-open { opacity: 1; transform: none; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), overlay var(--duration-fade-in) allow-discrete, display var(--duration-fade-in) allow-discrete; } @starting-style { .tg-listbox[popover]:popover-open { opacity: 0; transform: scale(0.97); } } .tg-listbox[popover]:not(:popover-open) { display: none; } .tg-listbox[popover][data-instant] { transition: none; } @supports (position-area: block-end) { .tg-listbox[popover]:not([data-positioned]) { position-area: block-end span-inline-end; position-try-fallbacks: flip-block; min-inline-size: max(12rem, anchor-size(width)); margin-block: var(--space-1); } } @media (max-width: 36rem) and (pointer: coarse) { .tg-listbox[popover]:not([data-positioned]), .tg-listbox[popover][data-positioned] { --tg-listbox-origin: bottom center; position-area: none; inset: auto 0 0; inline-size: auto; max-inline-size: none; margin: var(--space-2); margin-block-end: calc(var(--space-2) + var(--safe-area-bottom)); border-radius: var(--radius-lg); } } .tg-listbox__option { --control-hover-filter: none; --control-paint-duration: 0s; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--listbox-option-h); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } .tg-listbox__option > .tg-icon { color: var(--text-secondary); } .tg-listbox__option[data-active] { background: var(--control-hover-bg); } .tg-listbox__option { padding-inline-end: calc(var(--space-3) + var(--icon-size) + var(--space-3)); position: relative; -webkit-user-select: none; user-select: none; } .tg-listbox__option > .tg-avatar { --icon-avatar: var(--icon-btn-prep); flex: 0 0 auto; padding: 0; border-width: 0; } .tg-listbox:not([data-pointer]) .tg-listbox__option[data-active] { background: var(--control-hover-bg); outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-listbox__option[aria-selected=true] { --control-idle-bg: var(--surface-muted); --control-hover-bg: var(--control-idle-bg); color: var(--text-color); font-weight: var(--fw-medium); } .tg-listbox__option[aria-selected=true]::after { content: ""; inline-size: var(--icon-size); block-size: var(--icon-size); background: currentColor; mask: var(--icon-mask-check) center/contain no-repeat; color: var(--text-link); position: absolute; inset-inline-end: var(--space-3); } .tg-listbox__option[aria-disabled=true] { opacity: var(--disabled-opacity); cursor: not-allowed; background: none; } .tg-listbox__text { display: grid; flex: 1 1 auto; min-inline-size: 0; } .tg-listbox__option-meta { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-regular); } .tg-listbox__group { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: 0.02em; } .tg-combobox { position: relative; min-inline-size: 0; } .tg-combobox > .tg-combobox__list:not([popover]) { position: absolute; inset-inline: 0; max-inline-size: none; inset-block-start: calc(100% + var(--space-1)); z-index: var(--z-overlay); } .tg-combobox__input { padding-inline-end: var(--space-10); } .tg-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-inline-size: 0; min-block-size: var(--control-h); padding: var(--space-1) var(--space-2); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); } .tg-tag-input:focus-within { background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } .tg-tag-input:has(.tg-tag-input__field[readonly]) { background: var(--section-bg-color); } .tg-tag-input:has(.tg-tag-input__field:disabled) { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .tg-tag-input:has(.tg-tag-input__field[aria-invalid=true]) { border-color: var(--danger-main); } .tg-tag-input:has(.tg-tag-input__field[aria-invalid=true]):focus-within { box-shadow: 0 0 0 0.25rem var(--danger-soft); } .tg-tag-input { cursor: text; transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); } .tg-tag-input[data-limit] .tg-tag-input__field::placeholder { color: var(--text-danger); } .tg-tag-input__tag { display: inline-flex; align-items: center; gap: var(--space-1); min-inline-size: 0; max-inline-size: 100%; min-block-size: calc(var(--chip-h) - var(--space-2)); padding-inline: var(--space-3) max(var(--space-1), (var(--control-h) - var(--space-6)) / 2 - 1px); border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--surface-bg); --ring-bg: var(--surface-bg); color: var(--text-color); font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; } .tg-tag-input__tag[data-invalid] { background: var(--danger-soft); color: var(--text-danger); } .tg-tag-input__tag:focus-within { outline: 2px solid var(--text-link); outline-offset: 1px; } .tg-tag-input__remove { position: relative; } .tg-tag-input__remove::before { content: ""; position: absolute; top: 50%; left: 50%; inline-size: max(100%, var(--control-h)); block-size: max(100%, var(--control-h)); transform: translate(-50%, -50%); } .tg-tag-input__remove { display: grid; place-items: center; flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; padding: 0; border: var(--space-2) solid transparent; box-sizing: content-box; border-radius: 50%; background: transparent; background-clip: padding-box; color: var(--text-secondary); cursor: pointer; } .tg-tag-input__remove > .tg-icon { inline-size: 1rem; block-size: 1rem; } .tg-tag-input__remove:focus-visible { outline: none; } .tg-tag-input__field { min-inline-size: 0; min-block-size: var(--control-h); border: 0; border-radius: 0; background: transparent; color: var(--text-color); font: inherit; font-size: max(1rem, var(--fs)); } .tg-tag-input__field:focus { outline: none; box-shadow: none; background: transparent; } .tg-tag-input__field::placeholder { color: var(--text-secondary); opacity: 1; } .tg-tag-input__field { flex: 1 1 8ch; min-inline-size: 8ch; min-block-size: calc(var(--control-h) - var(--space-2) - 2px); padding: 0 var(--space-1); } .tg-number { display: inline-flex; align-items: stretch; inline-size: auto; max-inline-size: 100%; min-block-size: var(--control-h); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); } .tg-number:focus-within { background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } .tg-number:has(.tg-number__input[readonly]) { background: var(--section-bg-color); } .tg-number:has(.tg-number__input:disabled) { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .tg-number:has(.tg-number__input[aria-invalid=true]) { border-color: var(--danger-main); } .tg-number:has(.tg-number__input[aria-invalid=true]):focus-within { box-shadow: 0 0 0 0.25rem var(--danger-soft); } .tg-number { transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); } .tg-number--pill { border-radius: var(--radius-pill); } .tg-number--pill > .tg-number__step { border-radius: var(--radius-pill); } .tg-number__input { min-inline-size: 0; min-block-size: var(--control-h); border: 0; border-radius: 0; background: transparent; color: var(--text-color); font: inherit; font-size: max(1rem, var(--fs)); } .tg-number__input:focus { outline: none; box-shadow: none; background: transparent; } .tg-number__input::placeholder { color: var(--text-secondary); opacity: 1; } .tg-number__input { inline-size: calc(3ch + var(--space-6)); min-inline-size: calc(3ch + var(--space-6)); field-sizing: content; padding-inline: var(--space-2); text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; } .tg-number__input::-webkit-inner-spin-button, .tg-number__input::-webkit-outer-spin-button { appearance: none; margin: 0; } .tg-number__step { flex: 0 0 auto; inline-size: var(--control-h); block-size: auto; min-block-size: 0; border-radius: calc(var(--radius-control) - 1px); } .tg-otp { --otp-cell: 2.75rem; position: relative; display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; max-inline-size: 100%; } .tg-otp__input { position: absolute; inset: 0; z-index: 1; inline-size: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: max(1rem, var(--fs)); letter-spacing: 2em; outline: none; opacity: 0; cursor: text; } .tg-otp__input::selection { background: transparent; } .tg-otp__group { display: inline-flex; flex: 0 1 auto; gap: var(--space-2); min-inline-size: 0; } .tg-otp__slot { position: relative; display: grid; flex: 0 1 var(--otp-cell); place-items: center; min-inline-size: 2rem; block-size: calc(var(--otp-cell) + var(--space-2)); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); color: var(--text-color); font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .tg-otp__slot::before, .tg-otp__slot::after { grid-area: 1/1; } .tg-otp__slot:empty::before { content: attr(data-placeholder); color: var(--text-secondary); font-weight: var(--fw-regular); } .tg-otp:focus-within .tg-otp__slot[data-active] { border-color: var(--accent-main); box-shadow: var(--focus); } .tg-otp:focus-within .tg-otp__slot[data-active]:empty::before { visibility: hidden; } .tg-otp:focus-within .tg-otp__slot[data-active]:empty::after { content: ""; inline-size: 2px; block-size: 1.25em; background: var(--text-link); animation: tg-caret 1s steps(1) infinite; } @keyframes tg-caret { 50% { opacity: 0; } } .tg-otp__separator { flex: 0 0 auto; inline-size: var(--space-2); block-size: 2px; border-radius: 1px; background: var(--border-color); } .tg-otp[data-state=error] .tg-otp__slot { border-color: var(--danger-main); } .tg-otp[data-state=success] .tg-otp__slot { border-color: var(--accent-main); background: var(--accent-soft); } .tg-otp[aria-busy=true] .tg-otp__slot { opacity: 0.6; } .tg-otp:has(.tg-otp__input:disabled) { opacity: var(--disabled-opacity); } @media (max-width: 22.5rem) { .tg-otp, .tg-otp__group { gap: var(--space-1); } } .tg-choice-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: var(--space-1) var(--space-3); min-inline-size: 0; padding: var(--space-4); border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); color: var(--text-color); cursor: pointer; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } @media (hover: hover) and (pointer: fine) { .tg-choice-card:where(:not(:has(input:disabled))):hover { border-color: var(--panel-hover-border-color); } } .tg-choice-card:has(input:checked) { border-color: var(--accent-main); box-shadow: 0 0 0 1px var(--accent-main); } .tg-choice-card:has(input:focus-visible) { outline: 2px solid var(--text-link); outline-offset: 3px; } .tg-choice-card:has(input:disabled) { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-choice-card > :not(.tg-choice-card__indicator) { grid-column: 1; } .tg-choice-card__media { grid-column: 1/-1; margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-2); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); } .tg-choice-card__media:has(> .tg-icon) { display: flex; margin: 0 0 var(--space-1); color: var(--text-link); } .tg-choice-card__media > .tg-icon { inline-size: 1.5rem; block-size: 1.5rem; } .tg-choice-card__media > img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16/9; object-fit: cover; } .tg-choice-card__title { font-weight: var(--fw-semibold); } .tg-choice-card__description { color: var(--text-secondary); font-size: var(--fs-sm); } .tg-choice-card__indicator { grid-row: 1; grid-column: 2; align-self: start; margin: 0; } .tg-choice-card:has(> .tg-choice-card__media:not(:has(> .tg-icon))) > .tg-choice-card__indicator { grid-row: 2; } @media (forced-colors: active) { .tg-choice-card:has(input:checked) { outline: 3px solid Highlight; } } .tg-range-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-3); min-inline-size: 0; } .tg-range-field > :is(.tg-range, .tg-range-dual, .tg-range-field__marks) { grid-column: 1/-1; } .tg-range-field__output { color: var(--text-color); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; } .tg-range-field__marks { display: flex; justify-content: space-between; margin-block-start: calc(var(--space-2) * -1); color: var(--text-secondary); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .tg-range-dual { position: relative; display: grid; min-block-size: var(--control-h); } .tg-range-dual::before { content: ""; grid-area: 1/1; align-self: center; block-size: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--background-muted) var(--range-start, 0%), var(--accent-main) var(--range-start, 0%), var(--accent-main) var(--range-end, 100%), var(--background-muted) var(--range-end, 100%)); } .tg-range-dual:dir(rtl)::before { background: linear-gradient(to left, var(--background-muted) var(--range-start, 0%), var(--accent-main) var(--range-start, 0%), var(--accent-main) var(--range-end, 100%), var(--background-muted) var(--range-end, 100%)); } .tg-range-dual > input[type=range].tg-range { grid-area: 1/1; pointer-events: none; } .tg-range-dual > input[type=range].tg-range::-webkit-slider-runnable-track { background: transparent; } .tg-range-dual > input[type=range].tg-range::-moz-range-track, .tg-range-dual > input[type=range].tg-range::-moz-range-progress { background: transparent; } .tg-range-dual > input[type=range].tg-range::-webkit-slider-thumb { pointer-events: auto; } .tg-range-dual > input[type=range].tg-range::-moz-range-thumb { pointer-events: auto; } .tg-wheel { --wheel-item: 2.75rem; --wheel-rows: 5; position: relative; display: inline-flex; gap: var(--space-1); padding: 0 var(--space-2); border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-wheel::before { content: ""; position: absolute; inset-inline: var(--space-2); inset-block-start: 50%; block-size: var(--wheel-item); translate: 0 -50%; border-radius: var(--radius-inset); background: var(--background-muted); pointer-events: none; } .tg-wheel__column { position: relative; block-size: calc(var(--wheel-item) * var(--wheel-rows)); min-inline-size: 3.5rem; margin: 0; padding: calc(var(--wheel-item) * (var(--wheel-rows) - 1) / 2) 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent, var(--mask-opaque) 35%, var(--mask-opaque) 65%, transparent); } .tg-wheel__column::-webkit-scrollbar { display: none; } .tg-wheel__column:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; border-radius: var(--radius-inset); } @media (prefers-reduced-motion: no-preference) { .tg-wheel__column { scroll-behavior: smooth; } } .tg-wheel__option { display: grid; place-items: center; block-size: var(--wheel-item); padding-inline: var(--space-2); color: var(--text-secondary); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; scroll-snap-align: center; cursor: pointer; } .tg-wheel__option[aria-selected=true] { color: var(--text-color); font-weight: var(--fw-semibold); } .tg-wheel__option[aria-disabled=true] { opacity: var(--disabled-opacity); } .tg-color-field { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; min-block-size: var(--control-h); padding: var(--space-1); padding-inline-end: var(--space-3); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); } .tg-color-field:focus-within { background-color: var(--field-bg-hover); border-color: var(--accent-main); box-shadow: var(--focus); } .tg-color-field:has(.tg-color-field__input[readonly]) { background: var(--section-bg-color); } .tg-color-field:has(.tg-color-field__input:disabled) { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .tg-color-field:has(.tg-color-field__input[aria-invalid=true]) { border-color: var(--danger-main); } .tg-color-field:has(.tg-color-field__input[aria-invalid=true]):focus-within { box-shadow: 0 0 0 0.25rem var(--danger-soft); } .tg-color-field { transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); } .tg-color-field__swatch { flex: 0 0 auto; inline-size: calc(var(--control-h) - var(--space-2) - 2px); block-size: calc(var(--control-h) - var(--space-2) - 2px); padding: 0; border: 0; border-radius: var(--radius-inset); background: none; cursor: pointer; } .tg-color-field__swatch::-webkit-color-swatch-wrapper { padding: 0; } .tg-color-field__swatch::-webkit-color-swatch { border: 1px solid var(--border-color); border-radius: var(--radius-inset); } .tg-color-field__swatch::-moz-color-swatch { border: 1px solid var(--border-color); border-radius: var(--radius-inset); } .tg-color-field__swatch:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; } .tg-color-field__input { min-inline-size: 0; min-block-size: var(--control-h); border: 0; border-radius: 0; background: transparent; color: var(--text-color); font: inherit; font-size: max(1rem, var(--fs)); } .tg-color-field__input:focus { outline: none; box-shadow: none; background: transparent; } .tg-color-field__input::placeholder { color: var(--text-secondary); opacity: 1; } .tg-color-field__input { flex: 1 1 auto; inline-size: 100%; font-family: var(--font-family-mono); text-transform: uppercase; } button.tg-color-field__swatch { position: relative; } button.tg-color-field__swatch::before { content: ""; position: absolute; top: 50%; left: 50%; inline-size: max(100%, var(--control-h)); block-size: max(100%, var(--control-h)); transform: translate(-50%, -50%); } button.tg-color-field__swatch { --control-idle-bg: var(--swatch, transparent); --control-hover-bg: var(--control-idle-bg); --control-hover-lightness-step: 0; --control-hover-filter: none; background: var(--control-idle-bg); border: 1px solid var(--border-color); } button.tg-color-field__swatch:disabled { opacity: var(--disabled-opacity); } .tg-color-picker { display: grid; gap: var(--space-3); inline-size: min(100%, 18rem); padding: var(--space-3); } .tg-color-picker:not([popover]) { border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-color-picker[popover] { border: var(--floating-border); border-radius: var(--radius-lg); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); position: fixed; inset: auto; inset-block-start: var(--tg-anchor-block, auto); inset-inline-start: var(--tg-anchor-inline, auto); margin: 0; transform-origin: var(--tg-float-origin, top left); opacity: 0; transform: scale(0.97); transition: opacity var(--duration-fade-out) var(--ease), transform var(--duration-fast) var(--ease), overlay var(--duration-fade-out) allow-discrete, display var(--duration-fade-out) allow-discrete; } .tg-color-picker[popover]:dir(rtl) { transform-origin: var(--tg-float-origin, top right); } .tg-color-picker[popover]:popover-open { opacity: 1; transform: none; transition: opacity var(--duration-fade-in) var(--ease), transform var(--duration) var(--ease), overlay var(--duration-fade-in) allow-discrete, display var(--duration-fade-in) allow-discrete; } @starting-style { .tg-color-picker[popover]:popover-open { opacity: 0; transform: scale(0.97); } } .tg-color-picker[popover]:not(:popover-open) { display: none; } .tg-color-picker[popover][data-instant] { transition: none; } .tg-color-picker[popover] { inline-size: min(18rem, 100vw - var(--space-8)); max-block-size: calc(100dvh - var(--space-8)); overflow: auto; } @supports (position-area: block-end) { .tg-color-picker[popover]:not([data-positioned]) { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; margin-block: var(--space-1); } } @media (max-width: 36rem) and (pointer: coarse) { .tg-color-picker[popover]:not([data-positioned]), .tg-color-picker[popover][data-positioned] { --tg-float-origin: bottom center; position-area: none; inset: auto 0 0; inline-size: auto; max-inline-size: none; margin: var(--space-2); margin-block-end: calc(var(--space-2) + var(--safe-area-bottom)); border-radius: var(--radius-lg); } } .tg-color-picker__area { position: relative; aspect-ratio: 3/2; border-radius: var(--radius-inset); background: linear-gradient(to top, var(--color-black), transparent), linear-gradient(to right, var(--color-white), hsl(var(--picker-hue, 210) 100% 50%)); touch-action: none; cursor: crosshair; } .tg-color-picker__area:focus-within { outline: 2px solid var(--text-link); outline-offset: 2px; } .tg-color-picker__handle { position: absolute; inset-inline-start: calc(var(--picker-s, 0.5) * 100%); inset-block-start: calc((1 - var(--picker-v, 0.5)) * 100%); inline-size: 1.125rem; block-size: 1.125rem; border: 2px solid var(--color-white); border-radius: 50%; box-shadow: 0 0 0 1px var(--color-black); translate: -50% -50%; pointer-events: none; } .tg-color-picker__area > input[type=range] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; pointer-events: none; } .tg-color-picker__hue { --range-track-bg: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); --range-progress-bg: transparent; } .tg-color-picker__swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; } .tg-color-picker__swatches > label { position: relative; display: block; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--swatch, transparent); box-shadow: inset 0 0 0 1px var(--border-color); cursor: pointer; } .tg-color-picker__swatches > label > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; } .tg-color-picker__swatches > label:has(:checked) { box-shadow: 0 0 0 2px var(--surface-bg), 0 0 0 4px var(--accent-main); } .tg-color-picker__swatches > label:has(:focus-visible) { outline: 2px solid var(--text-link); outline-offset: 4px; } .tg-emoji-picker { display: grid; gap: var(--space-2); inline-size: min(100%, 20rem); padding: var(--space-2); border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-emoji-picker__search { position: sticky; inset-block-start: 0; } .tg-emoji-picker__group { margin: var(--space-1) var(--space-1) 0; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .tg-emoji-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); max-block-size: 14rem; overflow-y: auto; overscroll-behavior: contain; } .tg-emoji-picker__option { --control-hover-filter: none; display: grid; place-items: center; block-size: 2.75rem; padding: 0; border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); font-size: 1.375rem; line-height: 1; cursor: pointer; } .tg-emoji-picker__option:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-emoji-picker__option[aria-selected=true] { --control-idle-bg: var(--accent-soft); --control-color: var(--text-link); border-color: var(--accent-main); } } @property --fade-start { syntax: ""; inherits: false; initial-value: 0px; } @property --fade-end { syntax: ""; inherits: false; initial-value: 0px; } @layer tds.components { .tg-carousel { --carousel-ratio: 16 / 9; --carousel-gap: var(--space-3); position: relative; display: grid; gap: var(--space-3); min-inline-size: 0; } .tg-carousel__viewport { display: flex; gap: var(--carousel-gap); min-inline-size: 0; overscroll-behavior-inline: contain; scrollbar-width: none; } .tg-carousel__viewport::-webkit-scrollbar { display: none; } .tg-carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; } @media (prefers-reduced-motion: no-preference) { .tg-carousel__viewport { scroll-behavior: smooth; } } .tg-carousel__viewport:focus-visible { outline: 2px solid var(--text-link); outline-offset: 3px; } .tg-carousel__slide { position: relative; display: grid; flex: 0 0 100%; min-inline-size: 0; margin: 0; border-radius: var(--radius-lg); background: var(--background-muted); clip-path: var(--carousel-slide-clip, border-box); mask-image: var(--carousel-slide-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); scroll-snap-align: start; scroll-snap-stop: always; } .tg-carousel__slide > img, .tg-carousel__slide > picture > img, .tg-carousel__slide > video, .tg-carousel__slide > figure > img { display: block; grid-area: 1/1; inline-size: 100%; block-size: 100%; aspect-ratio: var(--carousel-ratio); object-fit: cover; } .tg-carousel__slide > figcaption, .tg-carousel__slide > figure > figcaption { grid-area: 1/1; align-self: end; justify-self: start; max-inline-size: calc(100% - var(--space-6)); margin: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--overlay-bg); color: var(--overlay-text); font-size: var(--fs-sm); } .tg-carousel__figure { display: contents; } .tg-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .tg-carousel__controls > .tg-pagination { margin: 0; } .tg-carousel { container: tg-carousel/inline-size; } @container tg-carousel (max-width: 24rem) { .tg-carousel__controls { flex-wrap: wrap; } .tg-carousel__controls > .tg-pagination { order: -1; flex: 1 0 100%; flex-wrap: nowrap; } } .tg-carousel__count { min-inline-size: 4ch; color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: center; } .tg-carousel--peek > .tg-carousel__viewport { padding-inline: var(--space-8); scroll-padding-inline: var(--space-8); } .tg-carousel--peek > .tg-carousel__viewport > .tg-carousel__slide { flex-basis: calc(100% - var(--space-4)); scroll-snap-align: center; } .tg-carousel__thumbs { display: flex; gap: var(--space-2); min-inline-size: 0; padding: 3px; overscroll-behavior-inline: contain; scrollbar-width: none; } .tg-carousel__thumbs::-webkit-scrollbar { display: none; } .tg-carousel__thumbs { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; } @media (prefers-reduced-motion: no-preference) { .tg-carousel__thumbs { scroll-behavior: smooth; } } .tg-carousel__thumbs > button { flex: 0 0 auto; inline-size: 3.5rem; block-size: 3.5rem; padding: 0; border: 2px solid transparent; border-radius: var(--radius-inset); background: var(--background-muted); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); opacity: 0.72; cursor: pointer; transition: opacity var(--duration) var(--ease), border-color var(--duration) var(--ease); } .tg-carousel__thumbs > button > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .tg-carousel__thumbs > button[aria-current=true] { border-color: var(--accent-main); opacity: 1; } .tg-carousel__thumbs > button:focus-visible { outline: 2px solid var(--text-link); outline-offset: -4px; } @media (hover: hover) and (pointer: fine) { .tg-carousel__thumbs > button:hover { opacity: 1; } } .tg-carousel--vertical > .tg-carousel__viewport { flex-direction: column; block-size: var(--carousel-height, 20rem); overscroll-behavior-block: contain; scrollbar-width: none; } .tg-carousel--vertical > .tg-carousel__viewport::-webkit-scrollbar { display: none; } .tg-carousel--vertical > .tg-carousel__viewport { overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; } @media (prefers-reduced-motion: no-preference) { .tg-carousel--vertical > .tg-carousel__viewport { scroll-behavior: smooth; } } .tg-carousel--vertical > .tg-carousel__viewport > .tg-carousel__slide { flex-basis: 100%; } .tg-carousel--vertical > .tg-carousel__viewport > .tg-carousel__slide > img, .tg-carousel--vertical > .tg-carousel__viewport > .tg-carousel__slide > figure > img { aspect-ratio: auto; } @media (min-width: 36rem) { .tg-carousel--vertical { grid-template-columns: minmax(0, 1fr) auto; } .tg-carousel--vertical > .tg-carousel__thumbs { flex-direction: column; max-block-size: var(--carousel-height, 20rem); overscroll-behavior-block: contain; scrollbar-width: none; } .tg-carousel--vertical > .tg-carousel__thumbs::-webkit-scrollbar { display: none; } .tg-carousel--vertical > .tg-carousel__thumbs { overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; } } @media (min-width: 36rem) and (prefers-reduced-motion: no-preference) { .tg-carousel--vertical > .tg-carousel__thumbs { scroll-behavior: smooth; } } } @layer tds.components { .tg-card-stack { display: grid; gap: var(--space-4); justify-items: center; min-inline-size: 0; } .tg-card-stack__deck { display: grid; inline-size: min(100%, 22rem); padding-block-start: var(--space-4); } .tg-card-stack__item { grid-area: 1/1; inline-size: 100%; transform-origin: top center; transform: translateY(calc(var(--depth, 0) * -0.625rem)) scale(calc(1 - var(--depth, 0) * 0.05)); z-index: calc(10 - var(--depth, 0)); transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); } .tg-card-stack__item[data-depth="3"], .tg-card-stack__item[data-depth="4"] { opacity: 0; } .tg-card-stack__item:not([data-depth="0"]) { box-shadow: var(--shadow-control); } .tg-card-stack__item[data-leaving] { opacity: 0; transform: translateX(var(--leave-x, 110%)) rotate(var(--leave-r, 6deg)); } .tg-card-stack__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .tg-image-accordion { display: flex; gap: var(--space-2); block-size: var(--image-accordion-height, 20rem); margin: 0; padding: 0; list-style: none; } .tg-image-accordion__item { position: relative; flex: 1 1 0; min-inline-size: var(--control-h); border-radius: var(--radius-lg); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); background: var(--background-muted); } .tg-image-accordion__item:has(> [aria-expanded=true]) { flex-grow: 4; } .tg-image-accordion__item > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--duration) var(--ease); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .tg-image-accordion__item:has(> .tg-image-accordion__trigger:hover) > img { transform: scale(1.04); } } .tg-image-accordion__trigger { --control-hover-filter: none; --control-hover-bg: transparent; position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-3); border: 0; border-radius: 0; background: linear-gradient(to top, var(--overlay-bg), transparent 55%); color: var(--overlay-text); font: inherit; font-weight: var(--fw-semibold); text-align: start; cursor: pointer; } .tg-image-accordion__trigger:focus-visible { outline: 2px solid var(--text-link); outline-offset: -3px; } .tg-image-accordion__trigger > span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--overlay-bg); color: var(--overlay-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-image-accordion__trigger[aria-expanded=false] > span { writing-mode: vertical-rl; rotate: 180deg; } .tg-image-accordion__panel { position: absolute; inset-inline-start: var(--space-3); inset-block-end: calc(var(--space-3) + 2.25rem); max-inline-size: calc(100% - var(--space-6)); margin: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--overlay-bg); color: var(--overlay-text); font-size: var(--fs-sm); pointer-events: none; animation: tg-caption-in var(--duration) var(--ease); } @keyframes tg-caption-in { from { opacity: 0; } } @media (max-width: 36rem) { .tg-image-accordion { flex-direction: column; block-size: auto; } .tg-image-accordion__item { flex: none; block-size: 4rem; } .tg-image-accordion__item:has(> [aria-expanded=true]) { block-size: 14rem; } .tg-image-accordion__trigger[aria-expanded=false] > span { writing-mode: horizontal-tb; rotate: none; } } .tg-marquee { --marquee-duration: 40s; --marquee-gap: var(--space-4); position: relative; display: grid; gap: var(--space-3); min-inline-size: 0; } .tg-marquee__viewport { display: flex; gap: var(--marquee-gap); overflow: hidden; mask-image: linear-gradient(to right, transparent, var(--mask-opaque) var(--space-8), var(--mask-opaque) calc(100% - var(--space-8)), transparent); } .tg-marquee__track { display: flex; flex: 0 0 auto; gap: var(--marquee-gap); min-inline-size: 100%; margin: 0; padding: 0; list-style: none; animation: tg-marquee var(--marquee-duration) linear infinite; } .tg-marquee__track > * { flex: 0 0 auto; inline-size: min(20rem, 80vw); } @keyframes tg-marquee { to { transform: translateX(calc(-100% - var(--marquee-gap))); } } .tg-marquee:dir(rtl) .tg-marquee__track { animation-direction: reverse; } .tg-marquee:is(:hover, :focus-within, [data-paused]) .tg-marquee__track { animation-play-state: paused; } .tg-marquee__pause { justify-self: end; } .tg-marquee--vertical > .tg-marquee__viewport { flex-direction: column; block-size: var(--marquee-height, 22rem); mask-image: linear-gradient(to bottom, transparent, var(--mask-opaque) var(--space-8), var(--mask-opaque) calc(100% - var(--space-8)), transparent); } .tg-marquee--vertical .tg-marquee__track { flex-direction: column; min-inline-size: 0; min-block-size: 100%; animation-name: tg-marquee-y; } .tg-marquee--vertical .tg-marquee__track > * { inline-size: auto; } @keyframes tg-marquee-y { to { transform: translateY(calc(-100% - var(--marquee-gap))); } } @media (prefers-reduced-motion: reduce), (max-width: 36rem) { .tg-marquee__viewport { overflow-x: auto; scroll-snap-type: x proximity; mask-image: none; scrollbar-width: thin; } .tg-marquee__track { animation: none; } .tg-marquee__track > * { scroll-snap-align: start; } .tg-marquee__track[aria-hidden=true] { display: none; } .tg-marquee__pause { display: none; } .tg-marquee--vertical > .tg-marquee__viewport { overflow-y: auto; overflow-x: hidden; } } } @layer tds.utilities { .tg-scroll-fade { --fade-size: var(--space-8); --fade-start: var(--fade-size); --fade-end: var(--fade-size); mask-image: linear-gradient(to right, transparent, var(--mask-opaque) var(--fade-start, var(--fade-size)), var(--mask-opaque) calc(100% - var(--fade-end, var(--fade-size))), transparent); overflow-x: auto; } .tg-scroll-fade:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; } .tg-scroll-fade--block { mask-image: linear-gradient(to bottom, transparent, var(--mask-opaque) var(--fade-start, var(--fade-size)), var(--mask-opaque) calc(100% - var(--fade-end, var(--fade-size))), transparent); overflow-x: visible; overflow-y: auto; } @supports (animation-timeline: scroll()) { .tg-scroll-fade { animation: tg-scroll-fade-x linear both; animation-timeline: scroll(self inline); } .tg-scroll-fade--block { animation-name: tg-scroll-fade-y; animation-timeline: scroll(self block); } @keyframes tg-scroll-fade-x { 0% { --fade-start: 0px; --fade-end: var(--fade-size); } 8% { --fade-start: var(--fade-size); } 92% { --fade-end: var(--fade-size); } 100% { --fade-start: var(--fade-size); --fade-end: 0px; } } @keyframes tg-scroll-fade-y { 0% { --fade-start: 0px; --fade-end: var(--fade-size); } 8% { --fade-start: var(--fade-size); } 92% { --fade-end: var(--fade-size); } 100% { --fade-start: var(--fade-size); --fade-end: 0px; } } } .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) { --carousel-flow: 1; } .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring):dir(rtl) { --carousel-flow: -1; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 36rem) { .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport { padding: var(--space-4) var(--carousel-side-space, 30%); } .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide { flex-basis: 100%; scroll-snap-align: center; view-timeline: --tg-carousel-slide inline; background: none; --carousel-slide-clip: none; --carousel-slide-mask: none; } .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide > img, .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide > picture, .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide > video, .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide > figure > img { border-radius: var(--radius-lg); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); animation: tg-carousel-coverflow linear both; animation-timeline: --tg-carousel-slide; } .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide > figcaption, .tg-carousel:is(.tg-carousel--coverflow, .tg-carousel--fan, .tg-carousel--ring) > .tg-carousel__viewport > .tg-carousel__slide > figure > figcaption { animation: tg-carousel-caption linear both; animation-timeline: --tg-carousel-slide; } .tg-carousel.tg-carousel--fan > .tg-carousel__viewport > .tg-carousel__slide > :is(img, picture, video), .tg-carousel.tg-carousel--fan > .tg-carousel__viewport > .tg-carousel__slide > figure > :is(img, picture, video) { transform-origin: 50% 160%; animation-name: tg-carousel-fan; } .tg-carousel.tg-carousel--ring > .tg-carousel__viewport > .tg-carousel__slide > :is(img, picture, video), .tg-carousel.tg-carousel--ring > .tg-carousel__viewport > .tg-carousel__slide > figure > :is(img, picture, video) { animation-name: tg-carousel-ring; } } } @keyframes tg-carousel-caption { 0%, 38% { opacity: 0; } 50% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes tg-carousel-coverflow { from { transform: perspective(60rem) translateZ(-6rem) rotateY(calc(40deg * var(--carousel-flow))); opacity: 0.6; } 50% { transform: perspective(60rem) translateZ(0) rotateY(0deg); opacity: 1; } to { transform: perspective(60rem) translateZ(-6rem) rotateY(calc(-40deg * var(--carousel-flow))); opacity: 0.6; } } @keyframes tg-carousel-fan { from { transform: rotate(calc(9deg * var(--carousel-flow))) scale(0.9); opacity: 0.6; } 50% { transform: none; opacity: 1; } to { transform: rotate(calc(-9deg * var(--carousel-flow))) scale(0.9); opacity: 0.6; } } @keyframes tg-carousel-ring { from { transform: perspective(60rem) translateZ(-14rem) rotateY(calc(55deg * var(--carousel-flow))); opacity: 0.45; } 50% { transform: perspective(60rem) translateZ(0) rotateY(0deg); opacity: 1; } to { transform: perspective(60rem) translateZ(-14rem) rotateY(calc(-55deg * var(--carousel-flow))); opacity: 0.45; } } } @layer tds.components { .tg-carousel--fullwidth { --carousel-side-space: 0px; } .tg-carousel.tg-carousel--fullwidth > .tg-carousel__viewport { padding-inline: 0; } .tg-carousel.tg-carousel--fullwidth > .tg-carousel__viewport > .tg-carousel__slide { flex-basis: 100%; } .tg-carousel.tg-carousel--fullwidth > .tg-carousel__viewport > .tg-carousel__slide > img, .tg-carousel.tg-carousel--fullwidth > .tg-carousel__viewport > .tg-carousel__slide > picture > img, .tg-carousel.tg-carousel--fullwidth > .tg-carousel__viewport > .tg-carousel__slide > video, .tg-carousel.tg-carousel--fullwidth > .tg-carousel__viewport > .tg-carousel__slide > figure > img { block-size: auto; aspect-ratio: auto; max-block-size: var(--media-max-size); object-fit: contain; } } @layer tds.components { .tg-sidebar { --sidebar-width: 17rem; position: relative; display: flex; flex-direction: column; gap: var(--space-4); inline-size: var(--sidebar-width); max-inline-size: 100%; min-block-size: 0; padding: var(--space-3); border-inline-end: 1px solid var(--border-subtle-color); background: var(--background-panel); --ring-bg: var(--background-panel); overflow-y: auto; overscroll-behavior: contain; font-size: var(--fs-sm); } .tg-sidebar__header { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-h); padding-inline: var(--space-2); } .tg-sidebar__header > .tg-brand { min-inline-size: 0; color: var(--text-color); font-size: var(--fs); font-weight: var(--fw-semibold); } .tg-sidebar__section { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .tg-sidebar__section ul { display: grid; gap: 2px; margin: 2px 0 0; padding: 0 0 0 calc(var(--space-3) + var(--icon-size) + var(--space-3) - var(--space-2)); list-style: none; } .tg-sidebar__section .tg-disclosure { border: 0; border-radius: 0; background: transparent; } .tg-sidebar__section .tg-disclosure__content { padding: 0; } .tg-sidebar__label { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: 0.02em; } .tg-sidebar__link { --control-hover-filter: none; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: 2.5rem; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } .tg-sidebar__link > .tg-icon { color: var(--text-secondary); } .tg-sidebar__link { padding-inline: var(--space-2); color: var(--text-secondary); font-weight: var(--fw-medium); } .tg-sidebar__link > .tg-icon { flex: 0 0 auto; color: inherit; } .tg-sidebar__link > .tg-badge { margin-inline-start: auto; } .tg-sidebar__link[aria-current=page] { --control-idle-bg: var(--background-muted); --control-hover-bg: var(--background-muted); color: var(--text-color); } .tg-sidebar__link:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } summary.tg-sidebar__link { list-style: none; } summary.tg-sidebar__link::-webkit-details-marker { display: none; } summary.tg-sidebar__link::after { content: ""; flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; margin-inline-start: auto; background: currentColor; mask: var(--icon-mask-chevron-down) center/contain no-repeat; transform: rotate(-90deg); transition: transform var(--duration) var(--ease); } summary.tg-sidebar__link:dir(rtl)::after { transform: rotate(90deg); } details[open] > summary.tg-sidebar__link::after { transform: none; } .tg-sidebar__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-sidebar__footer { display: flex; align-items: center; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--border-subtle-color); } .tg-sidebar__footer > .tg-avatar { --icon-avatar: 2rem; padding: 0; border-width: 0; font-size: var(--fs-xs); } .tg-sidebar--collapsed { --sidebar-width: calc(2.5rem + var(--space-3) * 2); } .tg-sidebar--collapsed .tg-sidebar__text, .tg-sidebar--collapsed .tg-sidebar__label, .tg-sidebar--collapsed .tg-sidebar__link > .tg-badge, .tg-sidebar--collapsed summary.tg-sidebar__link::after, .tg-sidebar--collapsed .tg-sidebar__section ul { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tg-sidebar--collapsed .tg-sidebar__link { justify-content: center; padding-inline: 0; } .tg-sidebar--collapsed .tg-sidebar__header, .tg-sidebar--collapsed .tg-sidebar__footer { justify-content: center; padding-inline: 0; } .tg-nav-menu { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .tg-nav-menu__trigger, a.tg-nav-menu__top { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--control-h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: var(--text-color); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; } .tg-nav-menu__trigger:focus-visible, a.tg-nav-menu__top:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-nav-menu__trigger::after { content: ""; inline-size: 1rem; block-size: 1rem; background: var(--text-secondary); mask: var(--icon-mask-chevron-down) center/contain no-repeat; transition: transform var(--duration) var(--ease); } .tg-nav-menu__trigger[aria-expanded=true] { --control-idle-bg: var(--control-hover-bg); } .tg-nav-menu__trigger[aria-expanded=true]::after { transform: rotate(180deg); } .tg-nav-menu__panel { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + var(--space-2)); z-index: var(--z-overlay); display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3) var(--space-4); inline-size: min(44rem, 100vw - var(--space-8)); padding: var(--space-3); border: var(--floating-border); border-radius: var(--radius-lg); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); transform-origin: top left; animation: tg-nav-panel-in var(--duration) var(--ease); } .tg-nav-menu__panel:dir(rtl) { transform-origin: top right; } .tg-nav-menu__panel[data-instant] { animation: none; } @keyframes tg-nav-panel-in { from { opacity: 0; transform: translateY(-0.25rem); } } .tg-nav-menu__group { display: grid; align-content: start; gap: var(--option-gap); margin: 0; padding: 0; list-style: none; } .tg-nav-menu__title { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: 0.02em; } .tg-nav-menu__link { --control-hover-filter: none; --control-paint-duration: 0s; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--control-h); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } .tg-nav-menu__link > .tg-icon { color: var(--text-secondary); } .tg-nav-menu__link[data-active] { background: var(--control-hover-bg); } .tg-nav-menu__link { align-items: flex-start; } .tg-nav-menu__link > .tg-icon { margin-block-start: 0.125rem; color: var(--text-link); } .tg-nav-menu__link:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-nav-menu__link[aria-current=page] { --control-idle-bg: var(--surface-muted); --control-hover-bg: var(--control-idle-bg); color: var(--text-color); font-weight: var(--fw-medium); } .tg-nav-menu__text { display: grid; gap: 0.125rem; min-inline-size: 0; font-weight: var(--fw-medium); } .tg-nav-menu__description { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-regular); } @media (max-width: 48rem) { .tg-nav-menu { flex-direction: column; align-items: stretch; } .tg-nav-menu__trigger, a.tg-nav-menu__top { justify-content: space-between; inline-size: 100%; } .tg-nav-menu__panel { position: static; inline-size: auto; margin-block: var(--space-1) var(--space-2); box-shadow: none; } } .tg-menubar { display: flex; align-items: center; gap: 2px; inline-size: max-content; max-inline-size: 100%; padding: var(--space-1); border: var(--border); border-radius: var(--radius-control); background: var(--surface-bg); --ring-bg: var(--surface-bg); overflow-x: auto; scrollbar-width: none; } .tg-menubar__item { --control-hover-filter: none; position: relative; flex: 0 0 auto; min-block-size: 2.25rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: var(--text-color); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; } .tg-menubar__item::before { content: ""; position: absolute; inset: calc((2.25rem - var(--control-h)) / 2) 0; } .tg-menubar__item[aria-expanded=true] { --control-idle-bg: var(--background-muted); --control-hover-bg: var(--background-muted); } .tg-menubar__item:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-toc { display: grid; margin: 0; padding: 0; border-inline-start: 1px solid var(--border-subtle-color); list-style: none; } .tg-toc ul { display: grid; margin: 0; padding: 0; list-style: none; } .tg-toc__title { margin: 0 0 var(--space-2); color: var(--text-color); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .tg-toc__link { display: block; margin-inline-start: -1px; padding: var(--space-1) var(--space-3); border-inline-start: 2px solid transparent; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.45; text-decoration: none; transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { .tg-toc__link:hover { color: var(--text-color); } } .tg-toc__link:is([aria-current=location], [aria-current=true]) { border-inline-start-color: var(--accent-main); color: var(--text-color); font-weight: var(--fw-medium); } .tg-toc__link--nested { padding-inline-start: calc(var(--space-3) + var(--space-4)); } .tg-toc__link:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; border-radius: var(--radius-xs); } @media (pointer: coarse) { .tg-toc__link { padding-block: var(--space-2); } } } @layer tds.components { .tg-input:is([type=date], [type=time], [type=datetime-local], [type=month]) { font-variant-numeric: tabular-nums; } .tg-input:is([type=date], [type=time], [type=datetime-local], [type=month])::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; } .tg-input:is([type=date], [type=time], [type=datetime-local], [type=month])::-webkit-datetime-edit-fields-wrapper { padding: 0; } .tg-date-field { display: inline-flex; align-items: center; gap: 0; max-inline-size: 100%; min-block-size: var(--control-h); padding: var(--space-1) var(--space-3); border: var(--border-field); border-radius: var(--radius-control); background: var(--field-bg); color: var(--text-color); font-size: max(1rem, var(--fs)); font-variant-numeric: tabular-nums; transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); } .tg-date-field:focus-within { border-color: var(--accent-main); box-shadow: var(--focus); } .tg-date-field[aria-invalid=true] { border-color: var(--danger-main); } .tg-date-field > .tg-icon { margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--text-secondary); box-sizing: content-box; } .tg-date-field__segment { min-inline-size: 2ch; padding: 0.125rem 0.1875rem; border-radius: var(--radius-xs); text-align: center; caret-color: transparent; cursor: text; outline: none; } .tg-date-field__segment[data-placeholder] { color: var(--text-secondary); } .tg-date-field__segment:focus { background: var(--accent-soft); color: var(--text-color); } .tg-date-field__separator { color: var(--text-secondary); padding-inline: 1px; } .tg-calendar { --calendar-day: 2.75rem; display: grid; gap: var(--space-3); inline-size: max-content; max-inline-size: 100%; min-inline-size: 0; color: var(--text-color); } .tg-calendar__months { display: flex; flex-wrap: wrap; gap: var(--space-6); } .tg-calendar__month { display: grid; gap: var(--space-2); align-content: start; } .tg-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .tg-calendar__header > .tg-header__title, .tg-calendar__header > h2, .tg-calendar__header > h3 { flex: 1 1 auto; margin: 0; font-size: var(--fs); font-weight: var(--fw-semibold); text-align: center; text-transform: capitalize; } .tg-calendar__header > .tg-icon-btn:dir(rtl) > .tg-icon { transform: scaleX(-1); } .tg-calendar__grid { border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .tg-calendar__grid > thead th { inline-size: var(--calendar-day); padding: 0 0 var(--space-1); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-align: center; } .tg-calendar__grid td { padding: 1px 0; text-align: center; } .tg-calendar__day { --control-hover-filter: none; position: relative; display: inline-grid; place-items: center; inline-size: var(--calendar-day); block-size: var(--calendar-day); padding: 0; border: 0; border-radius: var(--radius-inset); background: var(--control-idle-bg, transparent); color: inherit; font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; } .tg-calendar__day:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; z-index: 1; } .tg-calendar__day--outside { color: var(--text-secondary); } .tg-calendar__day--today { box-shadow: inset 0 0 0 1.5px var(--accent-main); font-weight: var(--fw-semibold); } .tg-calendar__day:is([aria-pressed=true], [aria-selected=true]) { --control-idle-bg: var(--action-bg); --control-hover-bg: var(--action-bg); color: var(--button-text-color); font-weight: var(--fw-semibold); } .tg-calendar__day[aria-disabled=true] { opacity: var(--disabled-opacity); cursor: not-allowed; } .tg-calendar__events { position: absolute; inset-block-end: 0.3125rem; inset-inline: 0; display: flex; justify-content: center; gap: 2px; pointer-events: none; } .tg-calendar__event-dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--accent-main); } .tg-calendar__event-dot--danger { background: var(--danger-main); } .tg-calendar__event-dot--neutral { background: var(--text-secondary); } .tg-calendar__day:is([aria-pressed=true], [aria-selected=true]) .tg-calendar__event-dot { background: currentColor; } .tg-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; color: var(--text-secondary); font-size: var(--fs-xs); list-style: none; } .tg-calendar__legend > li { display: inline-flex; align-items: center; gap: var(--space-1); } .tg-calendar__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } .tg-calendar--range td:has(> .tg-calendar__day--in-range) { background: var(--accent-soft); } .tg-calendar--range td:has(> .tg-calendar__day--range-start) { background: linear-gradient(to right, transparent 50%, var(--accent-soft) 50%); } .tg-calendar--range td:has(> .tg-calendar__day--range-end) { background: linear-gradient(to left, transparent 50%, var(--accent-soft) 50%); } .tg-calendar--range td:has(> .tg-calendar__day--range-start.tg-calendar__day--range-end) { background: none; } .tg-calendar--range:dir(rtl) td:has(> .tg-calendar__day--range-start) { background: linear-gradient(to left, transparent 50%, var(--accent-soft) 50%); } .tg-calendar--range:dir(rtl) td:has(> .tg-calendar__day--range-end) { background: linear-gradient(to right, transparent 50%, var(--accent-soft) 50%); } .tg-calendar--range td:first-child:has(> .tg-calendar__day--in-range) { border-start-start-radius: var(--radius-inset); border-end-start-radius: var(--radius-inset); } .tg-calendar--range td:last-child:has(> .tg-calendar__day--in-range) { border-start-end-radius: var(--radius-inset); border-end-end-radius: var(--radius-inset); } .tg-calendar--range .tg-calendar__day--in-range { --control-hover-bg: var(--accent-soft); --control-hover-filter: initial; color: var(--accent-readable); } .tg-calendar--range .tg-calendar__day--in-range.tg-calendar__day--outside { color: var(--text-secondary); } .tg-calendar--range .tg-calendar__day:is(.tg-calendar__day--range-start, .tg-calendar__day--range-end) { --control-idle-bg: var(--action-bg); --control-hover-bg: var(--action-bg); --control-hover-filter: initial; color: var(--button-text-color); font-weight: var(--fw-semibold); } .tg-calendar--range td:has(> .tg-calendar__day[data-preview]) { background: var(--accent-soft); } .tg-calendar__layout { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: start; } .tg-calendar__presets { display: grid; align-content: start; gap: 2px; min-inline-size: 10rem; margin: 0; padding: 0 var(--space-4) 0 0; border-inline-end: 1px solid var(--border-subtle-color); list-style: none; } .tg-calendar__presets .tg-btn { justify-content: flex-start; inline-size: 100%; } .tg-calendar__presets .tg-btn[aria-pressed=true] { --control-idle-bg: var(--background-muted); } @media (max-width: 36rem) { .tg-calendar { --calendar-day: 2.5rem; inline-size: auto; } .tg-calendar__layout { flex-direction: column; } .tg-calendar__presets { display: flex; flex-wrap: nowrap; gap: var(--space-2); inline-size: 100%; padding: 0 0 var(--space-2); border-inline-end: 0; overflow-x: auto; scrollbar-width: none; } .tg-calendar__presets .tg-btn { inline-size: auto; white-space: nowrap; } } } @layer tds.components { .tg-chart { --series: var(--accent-main); --chart-grid: var(--border-subtle-color); --chart-surface: var(--surface-bg); display: grid; gap: var(--space-3); min-inline-size: 0; margin: 0; color: var(--text-color); } .tg-chart__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); } .tg-chart__header > * { margin: 0; } .tg-chart__title { font-size: var(--fs); font-weight: var(--fw-semibold); } .tg-chart__value { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -0.02em; } .tg-chart__subtitle { color: var(--text-secondary); font-size: var(--fs-sm); } .tg-chart__plot { position: relative; min-inline-size: 0; } .tg-chart__plot > svg { display: block; max-inline-size: 100%; block-size: auto; overflow: visible; } .tg-chart__plot { touch-action: pan-y; } .tg-chart [data-series="2"] { --series-strength: .6; } .tg-chart [data-series="3"] { --series-strength: .35; } .tg-chart__grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; } .tg-chart__baseline { stroke: var(--border-color); stroke-width: 1; shape-rendering: crispEdges; } .tg-chart__tick { fill: var(--text-secondary); font-size: 0.6875rem; font-variant-numeric: tabular-nums; } .tg-chart__line { fill: none; stroke: var(--series); stroke-opacity: var(--series-strength, 1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .tg-chart__line[data-series="2"] { stroke-dasharray: 6 4; } .tg-chart__line[data-series="3"] { stroke-dasharray: 2 4; } .tg-chart__area { fill: var(--series); fill-opacity: calc(var(--series-strength, 1) * 0.12); stroke: none; } .tg-chart__point { fill: var(--series); fill-opacity: var(--series-strength, 1); stroke: var(--chart-surface); stroke-width: 2; paint-order: stroke; } .tg-chart__label { fill: var(--text-color); font-size: 0.75rem; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; } .tg-chart__label--muted { fill: var(--text-secondary); } .tg-chart__crosshair { stroke: var(--text-secondary); stroke-width: 1; opacity: 0; pointer-events: none; } .tg-chart__plot[data-hover] .tg-chart__crosshair { opacity: 0.5; } .tg-chart__hover-point { opacity: 0; pointer-events: none; } .tg-chart__plot[data-hover] .tg-chart__hover-point { opacity: 1; } .tg-chart__hit { fill: transparent; cursor: crosshair; } .tg-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; color: var(--text-secondary); font-size: var(--fs-sm); list-style: none; } .tg-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); } .tg-chart__legend-item::before { content: ""; flex: 0 0 auto; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--series); opacity: var(--series-strength, 1); } .tg-chart__legend-item[data-shape=square]::before { border-radius: 2px; } .tg-chart__legend-item[data-shape=diamond]::before { border-radius: 1px; transform: rotate(45deg) scale(0.85); } .tg-chart__legend-item[data-shape=line]::before { inline-size: 14px; block-size: 2px; border-radius: 1px; } .tg-chart__legend-item[data-shape=dash]::before { inline-size: 14px; block-size: 2px; background: repeating-linear-gradient(to right, var(--series) 0 5px, transparent 5px 8px); } .tg-chart__legend-item > .tg-num, .tg-chart__legend-item > strong { color: var(--text-color); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; } .tg-chart__tooltip { position: absolute; inset-block-start: var(--tooltip-y, 0); inset-inline-start: var(--tooltip-x, 0); z-index: 2; display: grid; gap: var(--space-1); min-inline-size: 8rem; padding: var(--space-2) var(--space-3); border: var(--floating-border); border-radius: var(--radius-sm); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); font-size: var(--fs-sm); pointer-events: none; translate: -50% calc(-100% - var(--space-3)); opacity: 0; transition: opacity var(--duration-fast) var(--ease); } .tg-chart__tooltip:dir(rtl) { translate: 50% calc(-100% - var(--space-3)); } .tg-chart__plot[data-hover] > .tg-chart__tooltip { opacity: 1; } .tg-chart__tooltip > strong { font-weight: var(--fw-semibold); } .tg-chart__tooltip > span { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .tg-chart__tooltip > span > b { color: var(--text-color); font-weight: var(--fw-medium); } .tg-chart__data > summary { display: inline-flex; align-items: center; gap: var(--space-3); list-style: none; } .tg-chart__data > summary::marker { content: ""; } .tg-chart__data > summary::-webkit-details-marker { display: none; } .tg-chart__data > summary::after { content: ""; flex: 0 0 auto; inline-size: var(--icon-size); block-size: var(--icon-size); margin-inline-start: auto; background: currentColor; mask: var(--icon-mask-chevron-down) center/contain no-repeat; transition: transform var(--duration) var(--ease); } .tg-chart__data > summary:is(details[open] > summary)::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .tg-chart__data > summary::after { transition: none; } } .tg-chart__data > summary { min-block-size: var(--control-h); color: var(--text-link); font-size: var(--fs-sm); cursor: pointer; } .tg-chart__data > summary:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; border-radius: var(--radius-xs); } .tg-chart__data > .tg-table-wrap { margin-block-start: var(--space-2); } .tg-chart__bar { fill: var(--series); fill-opacity: var(--series-strength, 1); transition: fill-opacity var(--duration-fast) var(--ease); } .tg-chart--bar .tg-chart__plot:has(.tg-chart__bar[data-active]) .tg-chart__bar:not([data-active]) { fill-opacity: calc(var(--series-strength, 1) * 0.45); } .tg-chart--donut .tg-chart__plot { inline-size: min(100%, 14rem); justify-self: center; } .tg-chart__segment { fill: none; stroke: var(--series); stroke-opacity: var(--series-strength, 1); transition: stroke-opacity var(--duration-fast) var(--ease); } .tg-chart__segment[data-texture] { stroke: url(#tg-chart-hatch); stroke-opacity: 1; } .tg-chart--donut .tg-chart__plot:has(.tg-chart__segment[data-active]) .tg-chart__segment:not([data-active]) { stroke-opacity: calc(var(--series-strength, 1) * 0.45); } .tg-chart__hatch { color: var(--series); } .tg-chart__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .tg-chart__center > strong { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.15; } .tg-chart__center > span { color: var(--text-secondary); font-size: var(--fs-xs); } .tg-chart--donut .tg-chart__legend { flex-direction: column; align-self: center; } .tg-chart--donut .tg-chart__legend-item { justify-content: space-between; } .tg-chart--donut .tg-chart__legend-item > :first-child { margin-inline-end: auto; } .tg-chart__legend-item[data-texture]::before { background: repeating-linear-gradient(45deg, var(--series) 0 1.5px, transparent 1.5px 3.5px); opacity: 1; box-shadow: inset 0 0 0 1px var(--series); } @media (forced-colors: active) { .tg-chart__line, .tg-chart__segment { stroke: CanvasText; } .tg-chart__bar, .tg-chart__point, .tg-chart__area { fill: CanvasText; } } } @layer tds.components { .tg-editor { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-inline-size: 0; border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); overflow: clip; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .tg-editor:has(.tg-editor__content:focus) { border-color: var(--accent-main); box-shadow: var(--focus); } .tg-editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-block-end: 1px solid var(--border-subtle-color); font-size: var(--fs-sm); } .tg-editor__bar > .tg-breadcrumbs { flex: 1 1 auto; min-inline-size: 0; } .tg-editor__toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-block-end: 1px solid var(--border-subtle-color); overflow-x: auto; scrollbar-width: none; } .tg-editor__toolbar > * { flex: 0 0 auto; } @media (max-width: 36rem) { .tg-editor__toolbar { position: sticky; inset-block-end: var(--tg-keyboard-inset, 0px); order: 9; border-block: 1px solid var(--border-subtle-color) 0; } } .tg-editor__content { display: grid; gap: var(--space-3); align-content: start; max-inline-size: calc(var(--layout-reading-width) + var(--space-8) * 2); min-block-size: 12rem; padding: var(--space-6) var(--space-8); color: var(--text-color); font-size: max(1rem, var(--fs)); line-height: 1.6; outline: none; caret-color: var(--text-link); } .tg-editor__content:focus-visible { box-shadow: none; } .tg-editor__content[contenteditable=false] { caret-color: transparent; } .tg-editor__content > * { margin: 0; } .tg-editor__content h2 { font-size: var(--fs-display); line-height: 1.2; letter-spacing: -0.01em; } .tg-editor__content h3 { font-size: var(--fs-lg); line-height: 1.3; } .tg-editor__content h4 { font-size: var(--fs); } .tg-editor__content :is(h2, h3, h4) { font-weight: var(--fw-semibold); } .tg-editor__content :is(ul, ol) { padding-inline-start: var(--space-6); } .tg-editor__content li + li { margin-block-start: var(--space-1); } .tg-editor__content code { padding: 0.1em 0.3em; border-radius: var(--radius-xs); background: var(--background-muted); font-family: var(--font-family-mono); font-size: 0.9em; } .tg-editor__content pre { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--background-muted); overflow-x: auto; font-size: var(--fs-sm); } .tg-editor__content pre code { padding: 0; background: none; } .tg-editor__content blockquote { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--border-color); color: var(--text-secondary); } .tg-editor__content a { color: var(--text-link); text-underline-offset: 0.2em; } .tg-editor__content ::selection { background: var(--accent-soft); } @media (max-width: 36rem) { .tg-editor__content { padding: var(--space-4); } } .tg-editor__block { margin-inline: calc(var(--space-2) * -1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .tg-editor__block:is([aria-selected=true], [data-selected]) { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-main); } .tg-editor__status { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); border-block-start: var(--border-transparent); color: var(--text-secondary); font-size: var(--fs-xs); } .tg-editor__status > [data-state=error] { color: var(--text-danger); } .tg-selection-toolbar { position: absolute; inset-block-start: var(--anchor-y, 0); inset-inline-start: var(--anchor-x, 0); z-index: var(--z-overlay); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border: var(--floating-border); border-radius: var(--radius-control); background: var(--floating-bg); --ring-bg: var(--floating-bg); color: var(--floating-color); box-shadow: var(--floating-shadow); translate: -50% calc(-100% - var(--space-2)); transform-origin: bottom center; animation: tg-selection-in var(--duration-fast) var(--ease); } .tg-selection-toolbar:dir(rtl) { translate: 50% calc(-100% - var(--space-2)); } .tg-selection-toolbar[data-placement=below] { translate: -50% var(--space-2); transform-origin: top center; } .tg-selection-toolbar[data-instant] { animation: none; } .tg-selection-toolbar > .tg-toolbar__separator { margin-block: var(--space-1); } .tg-selection-toolbar > .tg-badge { margin-inline: var(--space-1); } @keyframes tg-selection-in { from { opacity: 0; transform: scale(0.96); } } } @layer tds.components { .tg-hold-btn { position: relative; isolation: isolate; overflow: clip; } .tg-hold-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0.18; transform: scaleX(var(--hold-progress, 0)); transform-origin: left center; } .tg-hold-btn:dir(rtl)::before { transform-origin: right center; } .tg-hold-btn[data-state=holding]::before { transition: none; } .tg-hold-btn:not([data-state=holding])::before { transition: transform var(--duration-fast) var(--ease); } .tg-hold-btn[data-state=confirmed]::before { transform: scaleX(1); opacity: 0.28; } .tg-slide-confirm { position: relative; display: grid; align-items: center; inline-size: min(100%, 22rem); min-block-size: calc(var(--control-h) + var(--space-2)); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--background-muted); isolation: isolate; } .tg-slide-confirm[data-state=confirmed] { background: var(--accent-soft); } .tg-slide-confirm__track { position: absolute; inset: var(--space-1); z-index: -1; border-radius: inherit; background: var(--accent-soft); --slide-rest: calc((1 - var(--slide-progress, 0)) * (100% - var(--control-h))); clip-path: inset(0 var(--slide-rest) 0 0 round var(--radius-pill)); } .tg-slide-confirm__track:dir(rtl) { clip-path: inset(0 0 0 var(--slide-rest) round var(--radius-pill)); } .tg-slide-confirm__label { grid-area: 1/1; padding-inline: var(--control-h); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: center; pointer-events: none; opacity: calc(1 - var(--slide-progress, 0) * 1.6); } .tg-slide-confirm__thumb { grid-area: 1/1; inline-size: 100%; min-block-size: var(--control-h); margin: 0; appearance: none; background: transparent; cursor: grab; } .tg-slide-confirm__thumb:active { cursor: grabbing; } .tg-slide-confirm__thumb::-webkit-slider-runnable-track { block-size: var(--control-h); background: transparent; } .tg-slide-confirm__thumb::-webkit-slider-thumb { appearance: none; inline-size: var(--control-h); block-size: var(--control-h); border-radius: 50%; background: var(--icon-chevron-right-on-action) center/1.25rem no-repeat, var(--action-bg); } .tg-slide-confirm__thumb::-moz-range-track { block-size: var(--control-h); background: transparent; } .tg-slide-confirm__thumb::-moz-range-thumb { inline-size: var(--control-h); block-size: var(--control-h); border: 0; border-radius: 50%; background: var(--icon-chevron-right-on-action) center/1.25rem no-repeat, var(--action-bg); } .tg-slide-confirm__thumb:focus-visible { outline: none; } .tg-slide-confirm__thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text-link); outline-offset: 3px; } .tg-slide-confirm__thumb:focus-visible::-moz-range-thumb { outline: 2px solid var(--text-link); outline-offset: 3px; } @media (max-width: 36rem) { .tg-slide-confirm { inline-size: 100%; } } .tg-fab { position: fixed; inset-inline-end: var(--space-4); inset-block-end: calc(var(--space-4) + var(--safe-area-bottom) + var(--tg-composer-height, 0px) + var(--tg-tabbar-height, 0px)); z-index: var(--z-sticky); inline-size: var(--control-h); block-size: var(--control-h); border-radius: var(--radius-pill); box-shadow: var(--shadow-overlay); } .tg-fab--extended { inline-size: auto; padding-inline: var(--space-4) var(--space-5); gap: var(--space-2); } .tg-fab > .tg-icon { transition: transform var(--duration) var(--ease); } .tg-fab[aria-expanded=true] > .tg-icon:only-child { transform: rotate(45deg); } .tg-fab-menu { position: fixed; inset-inline-end: var(--space-4); inset-block-end: calc(var(--space-4) + var(--safe-area-bottom) + var(--tg-composer-height, 0px) + var(--tg-tabbar-height, 0px) + var(--control-h) + var(--space-5)); z-index: var(--z-sticky); } .tg-fab-menu__list { display: grid; justify-items: end; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .tg-fab-menu__item { display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-h); padding-inline: var(--space-4) var(--space-2); border: var(--border); border-radius: var(--radius-pill); background: var(--surface-bg); --ring-bg: var(--surface-bg); color: var(--text-color); box-shadow: var(--shadow-overlay); font: inherit; font-weight: var(--fw-medium); cursor: pointer; } .tg-fab-menu__item > .tg-icon { color: var(--text-link); } .tg-fab-menu__item:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; } .tg-fab-menu:not([hidden]) .tg-fab-menu__item { animation: tg-fab-item-in var(--duration) var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); } @keyframes tg-fab-item-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .tg-fab-menu:not([hidden]) .tg-fab-menu__item { animation: none; } } .tg-fab-scope { position: relative; overflow: clip; contain: layout; } .tg-fab-scope > :is(.tg-fab, .tg-fab-menu) { position: absolute; } } @layer tds.components { .tg-player { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-4); min-inline-size: 0; padding: var(--space-3); border: var(--border); border-radius: var(--radius-lg); background: var(--surface-bg); --ring-bg: var(--surface-bg); } .tg-player__cover { inline-size: 4rem; block-size: 4rem; margin: 0; border-radius: var(--radius); background: var(--background-muted); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); } .tg-player__cover > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .tg-player__meta { display: grid; min-inline-size: 0; } .tg-player__meta > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); } .tg-player__meta > span { color: var(--text-secondary); font-size: var(--fs-sm); } .tg-player__progress { grid-column: 1/-1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .tg-player__controls { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .tg-compare { --compare: 50%; position: relative; display: grid; min-inline-size: 0; border-radius: var(--radius-lg); clip-path: var(--media-clip, border-box); mask-image: var(--media-mask, linear-gradient(var(--mask-opaque), var(--mask-opaque))); background: var(--background-muted); } .tg-compare > img, .tg-compare > picture { grid-area: 1/1; display: block; inline-size: 100%; block-size: auto; } .tg-compare__before, .tg-compare__after { grid-area: 1/1; margin: 0; } .tg-compare__before > img, .tg-compare__after > img { display: block; inline-size: 100%; block-size: auto; } .tg-compare__after { clip-path: inset(0 0 0 var(--compare)); } .tg-compare:dir(rtl) .tg-compare__after { clip-path: inset(0 var(--compare) 0 0); } .tg-compare__label { position: absolute; inset-block-start: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--overlay-bg); color: var(--overlay-text); font-size: var(--fs-xs); pointer-events: none; } .tg-compare__label:nth-child(1 of .tg-compare__label) { inset-inline-start: var(--space-3); } .tg-compare__label:nth-last-child(1 of .tg-compare__label) { inset-inline-end: var(--space-3); } .tg-compare__control { position: absolute; inset: 0; overflow: clip; } .tg-compare__control:has(> .tg-compare__handle:focus-visible) { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-compare__handle { position: absolute; inset-block: 0; inset-inline-start: calc(var(--control-h) / -2); inset-inline-end: auto; inline-size: calc(100% + var(--control-h)); block-size: 100%; margin: 0; padding: 0; border: 0; appearance: none; background: none; cursor: ew-resize; } .tg-compare__handle::-webkit-slider-runnable-track { block-size: 100%; background: none; } .tg-compare__handle::-webkit-slider-thumb { appearance: none; inline-size: var(--control-h); block-size: 100%; background: linear-gradient(var(--overlay-text), var(--overlay-text)) center/2px 100% no-repeat; } .tg-compare__handle::-moz-range-track { block-size: 100%; background: none; } .tg-compare__handle::-moz-range-thumb { inline-size: var(--control-h); block-size: 100%; border: 0; border-radius: 0; background: linear-gradient(var(--overlay-text), var(--overlay-text)) center/2px 100% no-repeat; } .tg-compare__handle:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; } .tg-compare__grip { position: absolute; inset-block-start: 50%; inset-inline-start: var(--compare); display: grid; place-items: center; inline-size: var(--control-h); block-size: var(--control-h); border-radius: 50%; background: var(--overlay-text); color: var(--overlay-bg); border: var(--border-action); translate: -50% -50%; pointer-events: none; } .tg-compare__grip:dir(rtl) { translate: 50% -50%; } .tg-waveform { position: relative; display: grid; min-inline-size: 0; } .tg-waveform__track { grid-area: 1/1; display: flex; align-items: center; gap: 2px; block-size: 3rem; pointer-events: none; } .tg-waveform__bar { flex: 1 1 0; min-inline-size: 1px; block-size: 100%; border-radius: 1px; background: var(--text-muted); transform: scaleY(var(--level, 0.5)); } .tg-waveform__bar[data-played] { background: var(--accent-main); } .tg-waveform__progress { grid-area: 1/1; inline-size: 100%; block-size: 3rem; margin: 0; appearance: none; background: none; cursor: pointer; } .tg-waveform__progress::-webkit-slider-runnable-track { block-size: 100%; background: none; } .tg-waveform__progress::-webkit-slider-thumb { appearance: none; inline-size: 2px; block-size: 100%; background: var(--text-color); } .tg-waveform__progress::-moz-range-track { background: none; } .tg-waveform__progress::-moz-range-thumb { inline-size: 2px; block-size: 100%; border: 0; border-radius: 0; background: var(--text-color); } .tg-waveform__progress:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; border-radius: var(--radius-xs); } .tg-selection-box { position: absolute; inset-inline-start: var(--box-x, 0); inset-block-start: var(--box-y, 0); inline-size: var(--box-w, 8rem); block-size: var(--box-h, 6rem); border: 2px solid var(--accent-main); border-radius: 2px; cursor: move; touch-action: none; } .tg-selection-box:focus-visible { outline: 2px solid var(--text-link); outline-offset: 3px; } .tg-selection-box__handle { position: absolute; inline-size: 12px; block-size: 12px; border: 2px solid var(--accent-main); border-radius: 2px; background: var(--surface-bg); --ring-bg: var(--surface-bg); translate: -50% -50%; } .tg-selection-box__handle::before { content: ""; position: absolute; inset: calc((12px - var(--control-h)) / 2); } .tg-selection-box__handle[data-corner=nw] { inset-inline-start: 0; inset-block-start: 0; cursor: nwse-resize; } .tg-selection-box__handle[data-corner=ne] { inset-inline-start: 100%; inset-block-start: 0; cursor: nesw-resize; } .tg-selection-box__handle[data-corner=sw] { inset-inline-start: 0; inset-block-start: 100%; cursor: nesw-resize; } .tg-selection-box__handle[data-corner=se] { inset-inline-start: 100%; inset-block-start: 100%; cursor: nwse-resize; } }