.callout{
  width:100%; height:100%; box-sizing:border-box; position:relative;
  background:var(--md-neutral-background-2-rest);
  border-radius:var(--md-radius-240,24px);
  padding:16px 20px; display:flex; align-items:flex-start; gap:16px;
}
.callout-icon-square{
  flex-shrink:0; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; font-size:var(--md-typography-font-size-600);
  color:var(--md-brand-foreground-1-rest);
}
.callout[data-kind="tip"]{ background:var(--md-color-blue-100); }
.callout[data-kind="success"]{ background:var(--md-color-teal-100); }
.callout[data-kind="warning"]{ background:var(--md-color-orange-100); }
.callout[data-kind="danger"]{ background:var(--md-color-pink-100); }
.callout[data-kind="success"] .callout-icon-square, .callout[data-kind="success"] .callout-title{ color:var(--md-color-teal-700); }
.callout[data-kind="warning"] .callout-icon-square, .callout[data-kind="warning"] .callout-title{ color:var(--md-color-orange-700); }
.callout[data-kind="danger"] .callout-icon-square, .callout[data-kind="danger"] .callout-title{ color:var(--md-color-pink-600); }
.callout[data-kind="informative"]:not([data-style="accent"]) .callout-icon-square{ color:var(--md-color-grey-800); }
.frame[data-theme="dark"] .callout[data-kind="informative"]:not([data-style="accent"]) .callout-icon-square{ color:var(--md-color-grey-300); }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="tip"]{ background:rgba(107,138,247,0.16); }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="success"]{ background:rgba(60,203,170,0.16); }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="warning"]{ background:rgba(255,140,90,0.16); }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="danger"]{ background:rgba(240,122,160,0.16); }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="success"] .callout-icon-square, .frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="success"] .callout-title{ color:#5FD6BB; }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="warning"] .callout-icon-square, .frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="warning"] .callout-title{ color:#FFA071; }
.frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="danger"] .callout-icon-square, .frame[data-theme="dark"] .callout:not([data-style="accent"])[data-kind="danger"] .callout-title{ color:#F28BB0; }
.callout-text{ display:flex; flex-flow:row wrap; align-items:baseline; gap:4px 10px; flex:1; min-width:0; padding-top:2px; }
.callout-title-wrap{ width:auto; flex-shrink:0; }
.callout-title{ font-family:var(--font-display); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-500); line-height:28px; color:var(--md-brand-foreground-1-rest); outline:none; }
.callout:not([data-style="accent"])[data-kind="informative"] .callout-title{ color:var(--md-neutral-foreground-1-rest); }
.callout-description{ font-family:var(--font-sans); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-500); line-height:28px; color:var(--md-neutral-foreground-1-rest); outline:none; flex:1 1 auto; min-width:160px; white-space:pre-wrap; }
.callout-description:empty{ flex:0 0 auto; min-width:0; }
.callout-title-wrap:not(:has(.callout-title:not(:empty))){ display:none; }
.callout[data-style="accent"][data-kind="tip"]{ background:var(--md-color-blue-500); }
.callout[data-style="accent"][data-kind="informative"]{ background:var(--md-color-grey-800); }
.frame[data-theme="dark"] .callout[data-style="accent"][data-kind="informative"]{ background:var(--md-color-grey-700); }
.frame[data-theme="dark"] .callout[data-style="accent"][data-kind="tip"]{ background:var(--slide-accent); }
.callout[data-style="accent"][data-kind="success"]{ background:var(--md-color-teal-700); }
.callout[data-style="accent"][data-kind="warning"]{ background:var(--md-color-orange-700); }
.callout[data-style="accent"][data-kind="danger"]{ background:var(--md-color-pink-600); }
.callout[data-style="accent"] .callout-icon-square,
.callout[data-style="accent"] .callout-title,
.callout[data-style="accent"] .callout-description{ color:var(--md-color-grey-white); }

.callout[data-orientation="vertical"]{ flex-direction:column; align-items:center; justify-content:center; gap:44px; text-align:center; }
.callout[data-orientation="vertical"] .callout-icon-square{ width:64px; height:64px; font-size:64px; }
.callout[data-orientation="vertical"] .callout-text{ flex:0 0 auto; flex-flow:column nowrap; align-items:center; gap:20px; width:100%; padding-top:0; }
.callout[data-orientation="vertical"] .callout-title-wrap{ width:100%; }
.callout[data-orientation="vertical"] .callout-title{ font-size:var(--md-typography-font-size-700); line-height:var(--md-typography-line-height-600); text-align:center; }
.callout[data-orientation="vertical"] .callout-description{ flex:0 0 auto; width:100%; min-width:0; font-size:var(--md-typography-font-size-600); line-height:var(--md-typography-line-height-600); text-align:center; }