@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
1,516 lines (1,509 loc) • 431 kB
CSS
.rt-reset:where(body, blockquote, dl, dd, figure, p) {
margin: 0;
}
.rt-reset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
font: unset;
}
.rt-reset:where(h1, h2, h3, h4, h5, h6) {
font: unset;
margin: 0;
}
.rt-reset:where(a) {
all: unset;
-webkit-tap-highlight-color: transparent;
}
.rt-reset:where(
button,
select,
[type='button'],
[type='image'],
[type='reset'],
[type='submit'],
[type='checkbox'],
[type='color'],
[type='radio'],
[type='range']
) {
all: unset;
display: inline-block;
font-weight: normal;
font-style: normal;
text-indent: initial;
-webkit-tap-highlight-color: transparent;
}
.rt-reset:where(label) {
-webkit-tap-highlight-color: transparent;
}
.rt-reset:where(select) {
font-weight: normal;
font-style: normal;
text-align: start;
}
.rt-reset:where(
textarea,
input:not(
[type='button'],
[type='image'],
[type='reset'],
[type='submit'],
[type='checkbox'],
[type='color'],
[type='radio'],
[type='range']
)
) {
all: unset;
display: block;
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
font-weight: normal;
font-style: normal;
text-align: start;
text-indent: initial;
-webkit-tap-highlight-color: transparent;
cursor: text;
white-space: pre-wrap;
}
.rt-reset:where(:focus) {
outline: none;
}
.rt-reset::placeholder {
color: unset;
opacity: unset;
-webkit-user-select: none;
user-select: none;
}
.rt-reset:where(table) {
all: unset;
display: table;
text-indent: initial;
}
.rt-reset:where(caption) {
text-align: inherit;
}
.rt-reset:where(td) {
padding: 0;
}
.rt-reset:where(th) {
font-weight: unset;
text-align: inherit;
padding: 0;
}
.rt-reset:where(abbr, acronym) {
text-decoration: none;
}
.rt-reset:where(canvas, object, picture, summary) {
display: block;
}
.rt-reset:where(del, s) {
text-decoration: unset;
}
.rt-reset:where(fieldset, hr) {
all: unset;
display: block;
}
.rt-reset:where(legend) {
padding: 0;
border: none;
cursor: default;
}
.rt-reset:where(li) {
display: block;
text-align: unset;
}
.rt-reset:where(ol, ul) {
list-style: none;
margin: 0;
padding: 0;
}
.rt-reset:where(iframe) {
display: block;
border: none;
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
}
.rt-reset:where(ins, u) {
text-decoration: none;
}
.rt-reset:where(img) {
display: block;
max-width: 100%;
}
.rt-reset:where(svg) {
display: block;
max-width: 100%;
flex-shrink: 0;
}
.rt-reset:where(mark) {
all: unset;
}
.rt-reset:where(pre) {
font: unset;
margin: unset;
}
.rt-reset:where(q)::before,
.rt-reset:where(q)::after {
content: '';
}
.rt-reset:where(sub, sup) {
font: unset;
vertical-align: unset;
}
.rt-reset:where(details) ::marker,
.rt-reset:where(summary)::marker {
content: none;
}
.rt-reset:where(video) {
display: block;
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
}
.rt-reset:where(:any-link) {
cursor: var(--cursor-link);
}
.rt-reset:where(button) {
cursor: var(--cursor-button);
}
.rt-reset:where(:disabled, [data-disabled]) {
cursor: var(--cursor-disabled);
}
.rt-reset:where(input[type='checkbox']) {
cursor: var(--cursor-checkbox);
}
.rt-reset:where(input[type='radio']) {
cursor: var(--cursor-radio);
}
.rt-reset,
.rt-reset::before,
.rt-reset::after {
box-sizing: border-box;
}
@keyframes rt-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes rt-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes rt-slide-from-top {
from {
transform: translateY(4px) scale(0.97);
}
to {
transform: translateY(0) scale(1);
}
}
@keyframes rt-slide-to-top {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(4px) scale(0.97);
}
}
@keyframes rt-slide-from-bottom {
from {
transform: translateY(-4px) scale(0.97);
}
to {
transform: translateY(0) scale(1);
}
}
@keyframes rt-slide-to-bottom {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(-4px) scale(0.97);
}
}
@keyframes rt-slide-from-left {
from {
transform: translateX(4px) scale(0.97);
}
to {
transform: translateX(0) scale(1);
}
}
@keyframes rt-slide-to-left {
from {
transform: translateX(0) scale(1);
}
to {
transform: translateX(4px) scale(0.97);
}
}
@keyframes rt-slide-from-right {
from {
transform: translateX(-4px) scale(0.97);
}
to {
transform: translateX(0) scale(1);
}
}
@keyframes rt-slide-to-right {
from {
transform: translateX(0) scale(1);
}
to {
transform: translateX(-4px) scale(0.97);
}
}
@media (prefers-reduced-motion: no-preference) {
.rt-PopperContent {
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-PopperContent:where([data-state='open']) {
animation-duration: 160ms;
}
.rt-PopperContent:where([data-state='open']):where([data-side='top']) {
animation-name: rt-slide-from-top, rt-fade-in;
}
.rt-PopperContent:where([data-state='open']):where([data-side='bottom']) {
animation-name: rt-slide-from-bottom, rt-fade-in;
}
.rt-PopperContent:where([data-state='open']):where([data-side='left']) {
animation-name: rt-slide-from-left, rt-fade-in;
}
.rt-PopperContent:where([data-state='open']):where([data-side='right']) {
animation-name: rt-slide-from-right, rt-fade-in;
}
.rt-PopperContent:where([data-state='closed']) {
animation-duration: 100ms;
}
.rt-PopperContent:where([data-state='closed']):where([data-side='top']) {
animation-name: rt-slide-to-top, rt-fade-out;
}
.rt-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
animation-name: rt-slide-to-bottom, rt-fade-out;
}
.rt-PopperContent:where([data-state='closed']):where([data-side='left']) {
animation-name: rt-slide-to-left, rt-fade-out;
}
.rt-PopperContent:where([data-state='closed']):where([data-side='right']) {
animation-name: rt-slide-to-right, rt-fade-out;
}
}
.rt-Box {
box-sizing: border-box;
display: block;
}
.rt-Flex {
box-sizing: border-box;
display: flex;
justify-content: flex-start;
}
.rt-Grid {
box-sizing: border-box;
display: grid;
align-items: stretch;
justify-content: flex-start;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
}
.rt-Section {
box-sizing: border-box;
flex-shrink: 0;
}
.rt-Section:where(.rt-r-size-1) {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.rt-Section:where(.rt-r-size-2) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.rt-Section:where(.rt-r-size-3) {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.rt-Section:where(.rt-r-size-4) {
padding-top: calc(80px * var(--scaling));
padding-bottom: calc(80px * var(--scaling));
}
@media (min-width: 520px) {
.rt-Section:where(.xs\:rt-r-size-1) {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.rt-Section:where(.xs\:rt-r-size-2) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.rt-Section:where(.xs\:rt-r-size-3) {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.rt-Section:where(.xs\:rt-r-size-4) {
padding-top: calc(80px * var(--scaling));
padding-bottom: calc(80px * var(--scaling));
}
}
@media (min-width: 768px) {
.rt-Section:where(.sm\:rt-r-size-1) {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.rt-Section:where(.sm\:rt-r-size-2) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.rt-Section:where(.sm\:rt-r-size-3) {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.rt-Section:where(.sm\:rt-r-size-4) {
padding-top: calc(80px * var(--scaling));
padding-bottom: calc(80px * var(--scaling));
}
}
@media (min-width: 1024px) {
.rt-Section:where(.md\:rt-r-size-1) {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.rt-Section:where(.md\:rt-r-size-2) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.rt-Section:where(.md\:rt-r-size-3) {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.rt-Section:where(.md\:rt-r-size-4) {
padding-top: calc(80px * var(--scaling));
padding-bottom: calc(80px * var(--scaling));
}
}
@media (min-width: 1280px) {
.rt-Section:where(.lg\:rt-r-size-1) {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.rt-Section:where(.lg\:rt-r-size-2) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.rt-Section:where(.lg\:rt-r-size-3) {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.rt-Section:where(.lg\:rt-r-size-4) {
padding-top: calc(80px * var(--scaling));
padding-bottom: calc(80px * var(--scaling));
}
}
@media (min-width: 1640px) {
.rt-Section:where(.xl\:rt-r-size-1) {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.rt-Section:where(.xl\:rt-r-size-2) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.rt-Section:where(.xl\:rt-r-size-3) {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.rt-Section:where(.xl\:rt-r-size-4) {
padding-top: calc(80px * var(--scaling));
padding-bottom: calc(80px * var(--scaling));
}
}
.radix-themes {
--container-1: 448px;
--container-2: 688px;
--container-3: 880px;
--container-4: 1136px;
--scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
--scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
--scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
--scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
--scrollarea-scrollbar-vertical-margin-top: var(--space-1);
--scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
--scrollarea-scrollbar-vertical-margin-left: var(--space-1);
--scrollarea-scrollbar-vertical-margin-right: var(--space-1);
--segmented-control-transition-duration: 100ms;
--spinner-animation-duration: 800ms;
--spinner-opacity: 0.65;
}
.rt-Container {
display: flex;
box-sizing: border-box;
flex-direction: column;
align-items: center;
flex-shrink: 0;
flex-grow: 1;
}
.rt-ContainerInner {
width: 100%;
}
:where(.rt-Container.rt-r-size-1) .rt-ContainerInner {
max-width: var(--container-1);
}
:where(.rt-Container.rt-r-size-2) .rt-ContainerInner {
max-width: var(--container-2);
}
:where(.rt-Container.rt-r-size-3) .rt-ContainerInner {
max-width: var(--container-3);
}
:where(.rt-Container.rt-r-size-4) .rt-ContainerInner {
max-width: var(--container-4);
}
@media (min-width: 520px) {
:where(.rt-Container.xs\:rt-r-size-1) .rt-ContainerInner {
max-width: var(--container-1);
}
:where(.rt-Container.xs\:rt-r-size-2) .rt-ContainerInner {
max-width: var(--container-2);
}
:where(.rt-Container.xs\:rt-r-size-3) .rt-ContainerInner {
max-width: var(--container-3);
}
:where(.rt-Container.xs\:rt-r-size-4) .rt-ContainerInner {
max-width: var(--container-4);
}
}
@media (min-width: 768px) {
:where(.rt-Container.sm\:rt-r-size-1) .rt-ContainerInner {
max-width: var(--container-1);
}
:where(.rt-Container.sm\:rt-r-size-2) .rt-ContainerInner {
max-width: var(--container-2);
}
:where(.rt-Container.sm\:rt-r-size-3) .rt-ContainerInner {
max-width: var(--container-3);
}
:where(.rt-Container.sm\:rt-r-size-4) .rt-ContainerInner {
max-width: var(--container-4);
}
}
@media (min-width: 1024px) {
:where(.rt-Container.md\:rt-r-size-1) .rt-ContainerInner {
max-width: var(--container-1);
}
:where(.rt-Container.md\:rt-r-size-2) .rt-ContainerInner {
max-width: var(--container-2);
}
:where(.rt-Container.md\:rt-r-size-3) .rt-ContainerInner {
max-width: var(--container-3);
}
:where(.rt-Container.md\:rt-r-size-4) .rt-ContainerInner {
max-width: var(--container-4);
}
}
@media (min-width: 1280px) {
:where(.rt-Container.lg\:rt-r-size-1) .rt-ContainerInner {
max-width: var(--container-1);
}
:where(.rt-Container.lg\:rt-r-size-2) .rt-ContainerInner {
max-width: var(--container-2);
}
:where(.rt-Container.lg\:rt-r-size-3) .rt-ContainerInner {
max-width: var(--container-3);
}
:where(.rt-Container.lg\:rt-r-size-4) .rt-ContainerInner {
max-width: var(--container-4);
}
}
@media (min-width: 1640px) {
:where(.rt-Container.xl\:rt-r-size-1) .rt-ContainerInner {
max-width: var(--container-1);
}
:where(.rt-Container.xl\:rt-r-size-2) .rt-ContainerInner {
max-width: var(--container-2);
}
:where(.rt-Container.xl\:rt-r-size-3) .rt-ContainerInner {
max-width: var(--container-3);
}
:where(.rt-Container.xl\:rt-r-size-4) .rt-ContainerInner {
max-width: var(--container-4);
}
}
.rt-Skeleton {
--skeleton-radius: var(--skeleton-radius-override);
--skeleton-height: var(--skeleton-height-override);
border-radius: var(--radius-1);
animation: rt-skeleton-pulse 1000ms infinite alternate-reverse !important;
background-image: none !important;
background-clip: border-box !important;
border: none !important;
box-shadow: none !important;
-webkit-box-decoration-break: clone !important;
box-decoration-break: clone !important;
color: transparent !important;
outline: none !important;
pointer-events: none !important;
-webkit-user-select: none !important;
user-select: none !important;
cursor: default !important;
}
.rt-Skeleton:where([data-inline-skeleton]) {
line-height: 0;
font-family: Arial, sans-serif !important;
}
:where(.rt-Skeleton:empty) {
display: block;
height: var(--space-3);
}
.rt-Skeleton > *,
.rt-Skeleton::after,
.rt-Skeleton::before {
visibility: hidden !important;
}
@keyframes rt-skeleton-pulse {
from {
background-color: var(--gray-a3);
}
to {
background-color: var(--gray-a4);
}
}
.rt-Text {
line-height: var(--line-height, var(--default-line-height));
letter-spacing: var(--letter-spacing, inherit);
}
:where(.rt-Text) {
margin: 0;
}
.rt-Text:where([data-accent-color]) {
color: var(--accent-a11);
}
.rt-Text:where([data-accent-color].rt-high-contrast),
:where([data-accent-color]:not(.radix-themes)) .rt-Text:where(.rt-high-contrast) {
color: var(--accent-12);
}
@media (pointer: coarse) {
.rt-Text:where(label) {
-webkit-tap-highlight-color: transparent;
}
.rt-Text:where(label):where(:active) {
outline: 0.75em solid var(--gray-a4);
outline-offset: -0.6em;
}
}
.rt-Text:where(.rt-r-size-1) {
font-size: var(--font-size-1);
--line-height: var(--line-height-1);
--letter-spacing: var(--letter-spacing-1);
}
.rt-Text:where(.rt-r-size-2) {
font-size: var(--font-size-2);
--line-height: var(--line-height-2);
--letter-spacing: var(--letter-spacing-2);
}
.rt-Text:where(.rt-r-size-3) {
font-size: var(--font-size-3);
--line-height: var(--line-height-3);
--letter-spacing: var(--letter-spacing-3);
}
.rt-Text:where(.rt-r-size-4) {
font-size: var(--font-size-4);
--line-height: var(--line-height-4);
--letter-spacing: var(--letter-spacing-4);
}
.rt-Text:where(.rt-r-size-5) {
font-size: var(--font-size-5);
--line-height: var(--line-height-5);
--letter-spacing: var(--letter-spacing-5);
}
.rt-Text:where(.rt-r-size-6) {
font-size: var(--font-size-6);
--line-height: var(--line-height-6);
--letter-spacing: var(--letter-spacing-6);
}
.rt-Text:where(.rt-r-size-7) {
font-size: var(--font-size-7);
--line-height: var(--line-height-7);
--letter-spacing: var(--letter-spacing-7);
}
.rt-Text:where(.rt-r-size-8) {
font-size: var(--font-size-8);
--line-height: var(--line-height-8);
--letter-spacing: var(--letter-spacing-8);
}
.rt-Text:where(.rt-r-size-9) {
font-size: var(--font-size-9);
--line-height: var(--line-height-9);
--letter-spacing: var(--letter-spacing-9);
}
@media (min-width: 520px) {
.rt-Text:where(.xs\:rt-r-size-1) {
font-size: var(--font-size-1);
--line-height: var(--line-height-1);
--letter-spacing: var(--letter-spacing-1);
}
.rt-Text:where(.xs\:rt-r-size-2) {
font-size: var(--font-size-2);
--line-height: var(--line-height-2);
--letter-spacing: var(--letter-spacing-2);
}
.rt-Text:where(.xs\:rt-r-size-3) {
font-size: var(--font-size-3);
--line-height: var(--line-height-3);
--letter-spacing: var(--letter-spacing-3);
}
.rt-Text:where(.xs\:rt-r-size-4) {
font-size: var(--font-size-4);
--line-height: var(--line-height-4);
--letter-spacing: var(--letter-spacing-4);
}
.rt-Text:where(.xs\:rt-r-size-5) {
font-size: var(--font-size-5);
--line-height: var(--line-height-5);
--letter-spacing: var(--letter-spacing-5);
}
.rt-Text:where(.xs\:rt-r-size-6) {
font-size: var(--font-size-6);
--line-height: var(--line-height-6);
--letter-spacing: var(--letter-spacing-6);
}
.rt-Text:where(.xs\:rt-r-size-7) {
font-size: var(--font-size-7);
--line-height: var(--line-height-7);
--letter-spacing: var(--letter-spacing-7);
}
.rt-Text:where(.xs\:rt-r-size-8) {
font-size: var(--font-size-8);
--line-height: var(--line-height-8);
--letter-spacing: var(--letter-spacing-8);
}
.rt-Text:where(.xs\:rt-r-size-9) {
font-size: var(--font-size-9);
--line-height: var(--line-height-9);
--letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 768px) {
.rt-Text:where(.sm\:rt-r-size-1) {
font-size: var(--font-size-1);
--line-height: var(--line-height-1);
--letter-spacing: var(--letter-spacing-1);
}
.rt-Text:where(.sm\:rt-r-size-2) {
font-size: var(--font-size-2);
--line-height: var(--line-height-2);
--letter-spacing: var(--letter-spacing-2);
}
.rt-Text:where(.sm\:rt-r-size-3) {
font-size: var(--font-size-3);
--line-height: var(--line-height-3);
--letter-spacing: var(--letter-spacing-3);
}
.rt-Text:where(.sm\:rt-r-size-4) {
font-size: var(--font-size-4);
--line-height: var(--line-height-4);
--letter-spacing: var(--letter-spacing-4);
}
.rt-Text:where(.sm\:rt-r-size-5) {
font-size: var(--font-size-5);
--line-height: var(--line-height-5);
--letter-spacing: var(--letter-spacing-5);
}
.rt-Text:where(.sm\:rt-r-size-6) {
font-size: var(--font-size-6);
--line-height: var(--line-height-6);
--letter-spacing: var(--letter-spacing-6);
}
.rt-Text:where(.sm\:rt-r-size-7) {
font-size: var(--font-size-7);
--line-height: var(--line-height-7);
--letter-spacing: var(--letter-spacing-7);
}
.rt-Text:where(.sm\:rt-r-size-8) {
font-size: var(--font-size-8);
--line-height: var(--line-height-8);
--letter-spacing: var(--letter-spacing-8);
}
.rt-Text:where(.sm\:rt-r-size-9) {
font-size: var(--font-size-9);
--line-height: var(--line-height-9);
--letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 1024px) {
.rt-Text:where(.md\:rt-r-size-1) {
font-size: var(--font-size-1);
--line-height: var(--line-height-1);
--letter-spacing: var(--letter-spacing-1);
}
.rt-Text:where(.md\:rt-r-size-2) {
font-size: var(--font-size-2);
--line-height: var(--line-height-2);
--letter-spacing: var(--letter-spacing-2);
}
.rt-Text:where(.md\:rt-r-size-3) {
font-size: var(--font-size-3);
--line-height: var(--line-height-3);
--letter-spacing: var(--letter-spacing-3);
}
.rt-Text:where(.md\:rt-r-size-4) {
font-size: var(--font-size-4);
--line-height: var(--line-height-4);
--letter-spacing: var(--letter-spacing-4);
}
.rt-Text:where(.md\:rt-r-size-5) {
font-size: var(--font-size-5);
--line-height: var(--line-height-5);
--letter-spacing: var(--letter-spacing-5);
}
.rt-Text:where(.md\:rt-r-size-6) {
font-size: var(--font-size-6);
--line-height: var(--line-height-6);
--letter-spacing: var(--letter-spacing-6);
}
.rt-Text:where(.md\:rt-r-size-7) {
font-size: var(--font-size-7);
--line-height: var(--line-height-7);
--letter-spacing: var(--letter-spacing-7);
}
.rt-Text:where(.md\:rt-r-size-8) {
font-size: var(--font-size-8);
--line-height: var(--line-height-8);
--letter-spacing: var(--letter-spacing-8);
}
.rt-Text:where(.md\:rt-r-size-9) {
font-size: var(--font-size-9);
--line-height: var(--line-height-9);
--letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 1280px) {
.rt-Text:where(.lg\:rt-r-size-1) {
font-size: var(--font-size-1);
--line-height: var(--line-height-1);
--letter-spacing: var(--letter-spacing-1);
}
.rt-Text:where(.lg\:rt-r-size-2) {
font-size: var(--font-size-2);
--line-height: var(--line-height-2);
--letter-spacing: var(--letter-spacing-2);
}
.rt-Text:where(.lg\:rt-r-size-3) {
font-size: var(--font-size-3);
--line-height: var(--line-height-3);
--letter-spacing: var(--letter-spacing-3);
}
.rt-Text:where(.lg\:rt-r-size-4) {
font-size: var(--font-size-4);
--line-height: var(--line-height-4);
--letter-spacing: var(--letter-spacing-4);
}
.rt-Text:where(.lg\:rt-r-size-5) {
font-size: var(--font-size-5);
--line-height: var(--line-height-5);
--letter-spacing: var(--letter-spacing-5);
}
.rt-Text:where(.lg\:rt-r-size-6) {
font-size: var(--font-size-6);
--line-height: var(--line-height-6);
--letter-spacing: var(--letter-spacing-6);
}
.rt-Text:where(.lg\:rt-r-size-7) {
font-size: var(--font-size-7);
--line-height: var(--line-height-7);
--letter-spacing: var(--letter-spacing-7);
}
.rt-Text:where(.lg\:rt-r-size-8) {
font-size: var(--font-size-8);
--line-height: var(--line-height-8);
--letter-spacing: var(--letter-spacing-8);
}
.rt-Text:where(.lg\:rt-r-size-9) {
font-size: var(--font-size-9);
--line-height: var(--line-height-9);
--letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 1640px) {
.rt-Text:where(.xl\:rt-r-size-1) {
font-size: var(--font-size-1);
--line-height: var(--line-height-1);
--letter-spacing: var(--letter-spacing-1);
}
.rt-Text:where(.xl\:rt-r-size-2) {
font-size: var(--font-size-2);
--line-height: var(--line-height-2);
--letter-spacing: var(--letter-spacing-2);
}
.rt-Text:where(.xl\:rt-r-size-3) {
font-size: var(--font-size-3);
--line-height: var(--line-height-3);
--letter-spacing: var(--letter-spacing-3);
}
.rt-Text:where(.xl\:rt-r-size-4) {
font-size: var(--font-size-4);
--line-height: var(--line-height-4);
--letter-spacing: var(--letter-spacing-4);
}
.rt-Text:where(.xl\:rt-r-size-5) {
font-size: var(--font-size-5);
--line-height: var(--line-height-5);
--letter-spacing: var(--letter-spacing-5);
}
.rt-Text:where(.xl\:rt-r-size-6) {
font-size: var(--font-size-6);
--line-height: var(--line-height-6);
--letter-spacing: var(--letter-spacing-6);
}
.rt-Text:where(.xl\:rt-r-size-7) {
font-size: var(--font-size-7);
--line-height: var(--line-height-7);
--letter-spacing: var(--letter-spacing-7);
}
.rt-Text:where(.xl\:rt-r-size-8) {
font-size: var(--font-size-8);
--line-height: var(--line-height-8);
--letter-spacing: var(--letter-spacing-8);
}
.rt-Text:where(.xl\:rt-r-size-9) {
font-size: var(--font-size-9);
--line-height: var(--line-height-9);
--letter-spacing: var(--letter-spacing-9);
}
}
.rt-BaseDialogOverlay {
position: fixed;
inset: 0;
}
.rt-BaseDialogOverlay::before {
position: fixed;
content: '';
inset: 0;
background-color: var(--color-overlay);
}
.rt-BaseDialogScroll {
display: flex;
overflow: auto;
position: absolute;
inset: 0;
}
.rt-BaseDialogScrollPadding {
flex-grow: 1;
margin: auto;
padding-top: var(--space-6);
padding-bottom: max(var(--space-6), 6vh);
padding-left: var(--space-4);
padding-right: var(--space-4);
}
.rt-BaseDialogContent {
margin: auto;
width: 100%;
z-index: 1;
position: relative;
box-sizing: border-box;
overflow: auto;
--inset-padding-top: var(--dialog-content-padding);
--inset-padding-right: var(--dialog-content-padding);
--inset-padding-bottom: var(--dialog-content-padding);
--inset-padding-left: var(--dialog-content-padding);
padding: var(--dialog-content-padding);
box-sizing: border-box;
background-color: var(--color-panel-solid);
box-shadow: var(--shadow-6);
outline: none;
}
.rt-BaseDialogContent:where(.rt-r-size-1) {
--dialog-content-padding: var(--space-3);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.rt-r-size-2) {
--dialog-content-padding: var(--space-4);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.rt-r-size-3) {
--dialog-content-padding: var(--space-5);
border-radius: var(--radius-5);
}
.rt-BaseDialogContent:where(.rt-r-size-4) {
--dialog-content-padding: var(--space-6);
border-radius: var(--radius-5);
}
@media (min-width: 520px) {
.rt-BaseDialogContent:where(.xs\:rt-r-size-1) {
--dialog-content-padding: var(--space-3);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.xs\:rt-r-size-2) {
--dialog-content-padding: var(--space-4);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.xs\:rt-r-size-3) {
--dialog-content-padding: var(--space-5);
border-radius: var(--radius-5);
}
.rt-BaseDialogContent:where(.xs\:rt-r-size-4) {
--dialog-content-padding: var(--space-6);
border-radius: var(--radius-5);
}
}
@media (min-width: 768px) {
.rt-BaseDialogContent:where(.sm\:rt-r-size-1) {
--dialog-content-padding: var(--space-3);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.sm\:rt-r-size-2) {
--dialog-content-padding: var(--space-4);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.sm\:rt-r-size-3) {
--dialog-content-padding: var(--space-5);
border-radius: var(--radius-5);
}
.rt-BaseDialogContent:where(.sm\:rt-r-size-4) {
--dialog-content-padding: var(--space-6);
border-radius: var(--radius-5);
}
}
@media (min-width: 1024px) {
.rt-BaseDialogContent:where(.md\:rt-r-size-1) {
--dialog-content-padding: var(--space-3);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.md\:rt-r-size-2) {
--dialog-content-padding: var(--space-4);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.md\:rt-r-size-3) {
--dialog-content-padding: var(--space-5);
border-radius: var(--radius-5);
}
.rt-BaseDialogContent:where(.md\:rt-r-size-4) {
--dialog-content-padding: var(--space-6);
border-radius: var(--radius-5);
}
}
@media (min-width: 1280px) {
.rt-BaseDialogContent:where(.lg\:rt-r-size-1) {
--dialog-content-padding: var(--space-3);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.lg\:rt-r-size-2) {
--dialog-content-padding: var(--space-4);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.lg\:rt-r-size-3) {
--dialog-content-padding: var(--space-5);
border-radius: var(--radius-5);
}
.rt-BaseDialogContent:where(.lg\:rt-r-size-4) {
--dialog-content-padding: var(--space-6);
border-radius: var(--radius-5);
}
}
@media (min-width: 1640px) {
.rt-BaseDialogContent:where(.xl\:rt-r-size-1) {
--dialog-content-padding: var(--space-3);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.xl\:rt-r-size-2) {
--dialog-content-padding: var(--space-4);
border-radius: var(--radius-4);
}
.rt-BaseDialogContent:where(.xl\:rt-r-size-3) {
--dialog-content-padding: var(--space-5);
border-radius: var(--radius-5);
}
.rt-BaseDialogContent:where(.xl\:rt-r-size-4) {
--dialog-content-padding: var(--space-6);
border-radius: var(--radius-5);
}
}
@media (prefers-reduced-motion: no-preference) {
@keyframes rt-dialog-overlay-no-op {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes rt-dialog-content-show {
from {
opacity: 0;
transform: translateY(5px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0px) scale(1);
}
}
@keyframes rt-dialog-content-hide {
from {
opacity: 1;
transform: translateY(0px) scale(1);
}
to {
opacity: 0;
transform: translateY(5px) scale(0.99);
}
}
.rt-BaseDialogOverlay:where([data-state='closed']) {
animation: rt-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-BaseDialogOverlay:where([data-state='open'])::before {
animation: rt-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-BaseDialogOverlay:where([data-state='closed'])::before {
animation: rt-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-BaseDialogContent:where([data-state='open']) {
animation: rt-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-BaseDialogContent:where([data-state='closed']) {
animation: rt-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
}
}
.rt-AvatarRoot {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
-webkit-user-select: none;
user-select: none;
width: var(--avatar-size);
height: var(--avatar-size);
flex-shrink: 0;
}
.rt-AvatarImage {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.rt-AvatarFallback {
font-family: var(--default-font-family);
font-weight: var(--font-weight-medium);
font-style: normal;
z-index: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: inherit;
text-transform: uppercase;
}
.rt-AvatarFallback:where(.rt-one-letter) {
font-size: var(--avatar-fallback-one-letter-font-size);
}
.rt-AvatarFallback:where(.rt-two-letters) {
font-size: var(--avatar-fallback-two-letters-font-size, var(--avatar-fallback-one-letter-font-size));
}
.rt-AvatarRoot:where(.rt-r-size-1) {
--avatar-size: var(--space-5);
--avatar-fallback-one-letter-font-size: var(--font-size-2);
--avatar-fallback-two-letters-font-size: var(--font-size-1);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-1);
}
.rt-AvatarRoot:where(.rt-r-size-2) {
--avatar-size: var(--space-6);
--avatar-fallback-one-letter-font-size: var(--font-size-3);
--avatar-fallback-two-letters-font-size: var(--font-size-2);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-2);
}
.rt-AvatarRoot:where(.rt-r-size-3) {
--avatar-size: var(--space-7);
--avatar-fallback-one-letter-font-size: var(--font-size-4);
--avatar-fallback-two-letters-font-size: var(--font-size-3);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-3);
}
.rt-AvatarRoot:where(.rt-r-size-4) {
--avatar-size: var(--space-8);
--avatar-fallback-one-letter-font-size: var(--font-size-5);
--avatar-fallback-two-letters-font-size: var(--font-size-4);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-4);
}
.rt-AvatarRoot:where(.rt-r-size-5) {
--avatar-size: var(--space-9);
--avatar-fallback-one-letter-font-size: var(--font-size-6);
border-radius: max(var(--radius-4), var(--radius-full));
letter-spacing: var(--letter-spacing-6);
}
.rt-AvatarRoot:where(.rt-r-size-6) {
--avatar-size: 80px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.rt-r-size-7) {
--avatar-size: 96px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.rt-r-size-8) {
--avatar-size: 128px;
--avatar-fallback-one-letter-font-size: var(--font-size-8);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-8);
}
.rt-AvatarRoot:where(.rt-r-size-9) {
--avatar-size: 160px;
--avatar-fallback-one-letter-font-size: var(--font-size-9);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-9);
}
@media (min-width: 520px) {
.rt-AvatarRoot:where(.xs\:rt-r-size-1) {
--avatar-size: var(--space-5);
--avatar-fallback-one-letter-font-size: var(--font-size-2);
--avatar-fallback-two-letters-font-size: var(--font-size-1);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-1);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-2) {
--avatar-size: var(--space-6);
--avatar-fallback-one-letter-font-size: var(--font-size-3);
--avatar-fallback-two-letters-font-size: var(--font-size-2);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-2);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-3) {
--avatar-size: var(--space-7);
--avatar-fallback-one-letter-font-size: var(--font-size-4);
--avatar-fallback-two-letters-font-size: var(--font-size-3);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-3);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-4) {
--avatar-size: var(--space-8);
--avatar-fallback-one-letter-font-size: var(--font-size-5);
--avatar-fallback-two-letters-font-size: var(--font-size-4);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-4);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-5) {
--avatar-size: var(--space-9);
--avatar-fallback-one-letter-font-size: var(--font-size-6);
border-radius: max(var(--radius-4), var(--radius-full));
letter-spacing: var(--letter-spacing-6);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-6) {
--avatar-size: 80px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-7) {
--avatar-size: 96px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-8) {
--avatar-size: 128px;
--avatar-fallback-one-letter-font-size: var(--font-size-8);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-8);
}
.rt-AvatarRoot:where(.xs\:rt-r-size-9) {
--avatar-size: 160px;
--avatar-fallback-one-letter-font-size: var(--font-size-9);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 768px) {
.rt-AvatarRoot:where(.sm\:rt-r-size-1) {
--avatar-size: var(--space-5);
--avatar-fallback-one-letter-font-size: var(--font-size-2);
--avatar-fallback-two-letters-font-size: var(--font-size-1);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-1);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-2) {
--avatar-size: var(--space-6);
--avatar-fallback-one-letter-font-size: var(--font-size-3);
--avatar-fallback-two-letters-font-size: var(--font-size-2);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-2);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-3) {
--avatar-size: var(--space-7);
--avatar-fallback-one-letter-font-size: var(--font-size-4);
--avatar-fallback-two-letters-font-size: var(--font-size-3);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-3);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-4) {
--avatar-size: var(--space-8);
--avatar-fallback-one-letter-font-size: var(--font-size-5);
--avatar-fallback-two-letters-font-size: var(--font-size-4);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-4);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-5) {
--avatar-size: var(--space-9);
--avatar-fallback-one-letter-font-size: var(--font-size-6);
border-radius: max(var(--radius-4), var(--radius-full));
letter-spacing: var(--letter-spacing-6);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-6) {
--avatar-size: 80px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-7) {
--avatar-size: 96px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-8) {
--avatar-size: 128px;
--avatar-fallback-one-letter-font-size: var(--font-size-8);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-8);
}
.rt-AvatarRoot:where(.sm\:rt-r-size-9) {
--avatar-size: 160px;
--avatar-fallback-one-letter-font-size: var(--font-size-9);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 1024px) {
.rt-AvatarRoot:where(.md\:rt-r-size-1) {
--avatar-size: var(--space-5);
--avatar-fallback-one-letter-font-size: var(--font-size-2);
--avatar-fallback-two-letters-font-size: var(--font-size-1);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-1);
}
.rt-AvatarRoot:where(.md\:rt-r-size-2) {
--avatar-size: var(--space-6);
--avatar-fallback-one-letter-font-size: var(--font-size-3);
--avatar-fallback-two-letters-font-size: var(--font-size-2);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-2);
}
.rt-AvatarRoot:where(.md\:rt-r-size-3) {
--avatar-size: var(--space-7);
--avatar-fallback-one-letter-font-size: var(--font-size-4);
--avatar-fallback-two-letters-font-size: var(--font-size-3);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-3);
}
.rt-AvatarRoot:where(.md\:rt-r-size-4) {
--avatar-size: var(--space-8);
--avatar-fallback-one-letter-font-size: var(--font-size-5);
--avatar-fallback-two-letters-font-size: var(--font-size-4);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-4);
}
.rt-AvatarRoot:where(.md\:rt-r-size-5) {
--avatar-size: var(--space-9);
--avatar-fallback-one-letter-font-size: var(--font-size-6);
border-radius: max(var(--radius-4), var(--radius-full));
letter-spacing: var(--letter-spacing-6);
}
.rt-AvatarRoot:where(.md\:rt-r-size-6) {
--avatar-size: 80px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.md\:rt-r-size-7) {
--avatar-size: 96px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.md\:rt-r-size-8) {
--avatar-size: 128px;
--avatar-fallback-one-letter-font-size: var(--font-size-8);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-8);
}
.rt-AvatarRoot:where(.md\:rt-r-size-9) {
--avatar-size: 160px;
--avatar-fallback-one-letter-font-size: var(--font-size-9);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 1280px) {
.rt-AvatarRoot:where(.lg\:rt-r-size-1) {
--avatar-size: var(--space-5);
--avatar-fallback-one-letter-font-size: var(--font-size-2);
--avatar-fallback-two-letters-font-size: var(--font-size-1);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-1);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-2) {
--avatar-size: var(--space-6);
--avatar-fallback-one-letter-font-size: var(--font-size-3);
--avatar-fallback-two-letters-font-size: var(--font-size-2);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-2);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-3) {
--avatar-size: var(--space-7);
--avatar-fallback-one-letter-font-size: var(--font-size-4);
--avatar-fallback-two-letters-font-size: var(--font-size-3);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-3);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-4) {
--avatar-size: var(--space-8);
--avatar-fallback-one-letter-font-size: var(--font-size-5);
--avatar-fallback-two-letters-font-size: var(--font-size-4);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-4);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-5) {
--avatar-size: var(--space-9);
--avatar-fallback-one-letter-font-size: var(--font-size-6);
border-radius: max(var(--radius-4), var(--radius-full));
letter-spacing: var(--letter-spacing-6);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-6) {
--avatar-size: 80px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-7) {
--avatar-size: 96px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-8) {
--avatar-size: 128px;
--avatar-fallback-one-letter-font-size: var(--font-size-8);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-8);
}
.rt-AvatarRoot:where(.lg\:rt-r-size-9) {
--avatar-size: 160px;
--avatar-fallback-one-letter-font-size: var(--font-size-9);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-9);
}
}
@media (min-width: 1640px) {
.rt-AvatarRoot:where(.xl\:rt-r-size-1) {
--avatar-size: var(--space-5);
--avatar-fallback-one-letter-font-size: var(--font-size-2);
--avatar-fallback-two-letters-font-size: var(--font-size-1);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-1);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-2) {
--avatar-size: var(--space-6);
--avatar-fallback-one-letter-font-size: var(--font-size-3);
--avatar-fallback-two-letters-font-size: var(--font-size-2);
border-radius: max(var(--radius-2), var(--radius-full));
letter-spacing: var(--letter-spacing-2);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-3) {
--avatar-size: var(--space-7);
--avatar-fallback-one-letter-font-size: var(--font-size-4);
--avatar-fallback-two-letters-font-size: var(--font-size-3);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-3);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-4) {
--avatar-size: var(--space-8);
--avatar-fallback-one-letter-font-size: var(--font-size-5);
--avatar-fallback-two-letters-font-size: var(--font-size-4);
border-radius: max(var(--radius-3), var(--radius-full));
letter-spacing: var(--letter-spacing-4);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-5) {
--avatar-size: var(--space-9);
--avatar-fallback-one-letter-font-size: var(--font-size-6);
border-radius: max(var(--radius-4), var(--radius-full));
letter-spacing: var(--letter-spacing-6);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-6) {
--avatar-size: 80px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-7) {
--avatar-size: 96px;
--avatar-fallback-one-letter-font-size: var(--font-size-7);
border-radius: max(var(--radius-5), var(--radius-full));
letter-spacing: var(--letter-spacing-7);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-8) {
--avatar-size: 128px;
--avatar-fallback-one-letter-font-size: var(--font-size-8);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-8);
}
.rt-AvatarRoot:where(.xl\:rt-r-size-9) {
--avatar-size: 160px;
--avatar-fallback-one-letter-font-size: var(--font-size-9);
border-radius: max(var(--radius-6), var(--radius-full));
letter-spacing: var(--letter-spacing-9);
}
}
.rt-AvatarRoot:where(.rt-variant-solid) :where(.rt-AvatarFallback) {
background-color: var(--accent-9);
color: var(--accent-contrast);
}
.rt-AvatarRoot:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-AvatarFallback) {
background-color: var(--accent-12);
color: var(--accent-1);
}
.rt-AvatarRoot:where(.rt-variant-soft) :where(.rt-AvatarFallback) {
background-color: var(--accent-a3);
color: var(--accent-a11);
}
.rt-AvatarRoot:where(.rt-variant-soft):where(.rt-high-contrast) :where(.rt-AvatarFallback) {
color: var(--accent-12);
}
.rt-Badge {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-family: var(--default-font-family);
font-weight: var(--font-weight-medium);
font-style: normal;
flex-shrink: 0;
line-height: 1;
height: -moz-fit-content;
height: fit-content;
}
.rt-Badge:where(.rt-r-size-1) {
font-size: var(--font-size-1);
line-height: var(--line-height-1);
letter-spacing: var(--letter-spacing-1);
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
gap: calc(var(--space-1) * 1.5);
border-radius: max(var(--radius-1), var(--radius-full));
}
.rt-Badge:where(.rt-r-size-2) {
font-size: var(--font-size-1);
line-height: var(--line-height-1);
letter-spacing: var(--letter-spacing-1);
padding: var(--space-1) var(--space-2);
gap: calc(var(--space-1) * 1.5);
border-radius: max(var(--radius-2), var(--radius-full));
}
.rt-Badge:where(.rt-r-size-3) {
font-size: var(--font-size