.rt-CalloutRoot {
  box-sizing: border-box;
  display: grid;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  color: var(--accent-a11);

  &:where(.rt-high-contrast) {
    color: var(--accent-12);
  }
}

.rt-CalloutIcon {
  display: flex;
  align-items: center;
  grid-column-start: -2;
  height: var(--callout-icon-height);
}

/* Anything that’s not an icon goes to the right of the icon */
.rt-CalloutRoot > :where(:not(.rt-CalloutIcon)) {
  grid-column-start: -1;
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-CalloutRoot {
    &:where(.rt-r-size-1) {
      row-gap: var(--space-2);
      column-gap: var(--space-2);
      padding: var(--space-3);
      border-radius: var(--radius-3);
      --callout-icon-height: var(--line-height-2);
    }
    &:where(.rt-r-size-2) {
      row-gap: var(--space-2);
      column-gap: var(--space-3);
      padding: var(--space-4);
      border-radius: var(--radius-4);
      --callout-icon-height: var(--line-height-2);
    }
    &:where(.rt-r-size-3) {
      row-gap: var(--space-3);
      column-gap: var(--space-4);
      padding: var(--space-5);
      border-radius: var(--radius-5);
      --callout-icon-height: var(--line-height-3);
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

/* soft */

.rt-CalloutRoot:where(.rt-variant-soft) {
  background-color: var(--accent-a3);
}

/* surface */

.rt-CalloutRoot:where(.rt-variant-surface) {
  box-shadow: inset 0 0 0 1px var(--accent-a6);
  background-color: var(--accent-a2);
}

/* outline */

.rt-CalloutRoot:where(.rt-variant-outline) {
  box-shadow: inset 0 0 0 1px var(--accent-a7);
}