/* [data-component="dialog-trigger"] { } */ [data-component="dialog-overlay"] { position: fixed; inset: 0; z-index: 50; background-color: hsl(from var(--background-base) h s l / 0.2); /* Start invisible so the very first paint matches the animation's from-state — without this the overlay flashes at full opacity for one frame before the animation rewinds it to 0. */ opacity: 0; animation: overlayHide 120ms ease-in forwards; &[data-expanded] { /* `backwards` applies the from-keyframe before the animation starts, so the element is invisible from the first paint and there's no jump-then-fade flicker on mount. */ animation: overlayShow 180ms ease-out both; }} [data-component="dialog"] { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none; [data-slot="dialog-container"] { position: relative; z-index: 50; width: min(calc(100vw - 16px), 640px); height: min(calc(100vh - 16px), 512px); display: flex; flex-direction: column; align-items: center; justify-items: start; overflow: visible; [data-slot="dialog-content"] { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; width: 100%; max-height: 100%; min-height: 280px; overflow: auto; pointer-events: auto; /* Hide scrollbar */ scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } /* padding: 8px; */ /* padding: 8px 8px 0 8px; */ border-radius: var(--radius-xl); background: var(--surface-raised-stronger-non-alpha); background-clip: padding-box; box-shadow: var(--shadow-lg-border-base); [data-slot="dialog-header"] { display: flex; padding: 20px; justify-content: space-between; align-items: center; flex-shrink: 0; align-self: stretch; [data-slot="dialog-title"] { color: var(--text-strong); /* text-16-medium */ font-family: var(--font-family-sans); font-size: var(--font-size-large); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-x-large); /* 150% */ letter-spacing: var(--letter-spacing-tight); } /* [data-slot="dialog-close-button"] {} */ } [data-slot="dialog-description"] { display: flex; padding: 0 20px 16px; justify-content: space-between; align-items: center; flex-shrink: 0; align-self: stretch; color: var(--text-base); /* text-13-regular */ font-family: var(--font-family-sans); font-size: var(--font-size-base); font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); } [data-slot="dialog-body"] { width: 100%; position: relative; display: flex; flex-direction: column; flex: 1; overflow: hidden; &:focus-visible { outline: none; } } &:focus-visible { outline: none; } } } &[data-fit] { [data-slot="dialog-container"] { height: auto; [data-slot="dialog-content"] { min-height: 0; } } } &[data-size="large"] [data-slot="dialog-container"] { width: min(calc(100vw - 32px), 800px); height: min(calc(100vh - 32px), 600px); } &[data-size="x-large"] [data-slot="dialog-container"] { width: min(calc(100vw - 32px), 960px); height: min(calc(100vh - 32px), 600px); }} [data-component="dialog"][data-transition] [data-slot="dialog-content"] { /* Mirror the overlay treatment so the content respects its from-state before the first paint and the dialog never flashes at full opacity. */ opacity: 0; animation: contentHide 120ms ease-in forwards; &[data-expanded] { animation: contentShow 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }} @keyframes overlayShow { from { opacity: 0; } to { opacity: 1; }}@keyframes overlayHide { from { opacity: 1; } to { opacity: 0; }}@keyframes contentShow { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); }}@keyframes contentHide { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); }}
/* [data-component="dialog-trigger"] { } */
[data-component="dialog-overlay"] {
position: fixed;
inset: 0;
z-index: 50;
background-color: hsl(from var(--background-base) h s l / 0.2);
/* Start invisible so the very first paint matches the animation's
from-state — without this the overlay flashes at full opacity for one
frame before the animation rewinds it to 0. */
opacity: 0;
animation: overlayHide 120ms ease-in forwards;
&[data-expanded] {
/* `backwards` applies the from-keyframe before the animation starts,
so the element is invisible from the first paint and there's no
jump-then-fade flicker on mount. */
animation: overlayShow 180ms ease-out both;
}
}
[data-component="dialog"] {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
[data-slot="dialog-container"] {
position: relative;
z-index: 50;
width: min(calc(100vw - 16px), 640px);
height: min(calc(100vh - 16px), 512px);
display: flex;
flex-direction: column;
align-items: center;
justify-items: start;
overflow: visible;
[data-slot="dialog-content"] {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
width: 100%;
max-height: 100%;
min-height: 280px;
overflow: auto;
pointer-events: auto;
/* Hide scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
/* padding: 8px; */
/* padding: 8px 8px 0 8px; */
border-radius: var(--radius-xl);
background: var(--surface-raised-stronger-non-alpha);
background-clip: padding-box;
box-shadow: var(--shadow-lg-border-base);
[data-slot="dialog-header"] {
display: flex;
padding: 20px;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
align-self: stretch;
[data-slot="dialog-title"] {
color: var(--text-strong);
/* text-16-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-large);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-x-large); /* 150% */
letter-spacing: var(--letter-spacing-tight);
}
/* [data-slot="dialog-close-button"] {} */
}
[data-slot="dialog-description"] {
display: flex;
padding: 0 20px 16px;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
align-self: stretch;
color: var(--text-base);
/* text-13-regular */
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal);
}
[data-slot="dialog-body"] {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
&:focus-visible {
outline: none;
}
}
&:focus-visible {
outline: none;
}
}
}
&[data-fit] {
[data-slot="dialog-container"] {
height: auto;
[data-slot="dialog-content"] {
min-height: 0;
}
}
}
&[data-size="large"] [data-slot="dialog-container"] {
width: min(calc(100vw - 32px), 800px);
height: min(calc(100vh - 32px), 600px);
}
&[data-size="x-large"] [data-slot="dialog-container"] {
width: min(calc(100vw - 32px), 960px);
height: min(calc(100vh - 32px), 600px);
}
}
[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
/* Mirror the overlay treatment so the content respects its from-state
before the first paint and the dialog never flashes at full opacity. */
opacity: 0;
animation: contentHide 120ms ease-in forwards;
&[data-expanded] {
animation: contentShow 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
}
@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes overlayHide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes contentShow {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes contentHide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.98);
}
}