.toast {
  font: var(--grapes-body-m);
  position: relative;
  box-shadow: var(--grapes-elevation-l);
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 0 var(--grapes-unit-8);
  align-items: center;
  justify-items: start;
  width: var(--grapes-size-toast);
  border-radius: var(--grapes-border-radius-8);
  color: var(--grapes-color-content-complementary);
  overflow: hidden;
  padding: var(--grapes-unit-8) var(--grapes-unit-8) var(--grapes-unit-8)
    var(--grapes-unit-16);
  box-sizing: border-box;

  &:has(.toastContent):not(:has(.toastAction)) {
    padding-bottom: var(--grapes-unit-16);
  }

  &[data-variant='success'] {
    background: var(--grapes-color-background-primary-success-default);
  }
  &[data-variant='alert'] {
    background: var(--grapes-color-background-primary-alert-default);
  }
}

.toastContent,
.toastAction {
  grid-column-start: 2;
}