@layer components {
  .rs-toast-region {
    position: fixed;
    z-index: calc(var(--rs-z-index-fixed) + 1);
    inset-inline-end: var(--rs-unit-x4);
    inset-block-end: var(--rs-unit-x4);
    display: grid;
    gap: var(--rs-unit-x2);
    inline-size: min(360px, calc(100vw - var(--rs-unit-x8)));
  }

  .rs-toast {
    display: grid;
    gap: var(--rs-unit-x2);
    border-radius: var(--rs-radius-medium);
    padding: var(--rs-unit-x4);
    background: var(--rs-color-background-elevation-overlay);
    color: var(--rs-color-foreground-neutral);
    box-shadow: var(--rs-shadow-overlay);
  }
}