.notification {
  align-items: start;
  border-radius: var(--notification-radius);
  display: none;
  gap: var(--notification-gap);
  grid-template-columns: 1fr auto;
  padding: var(--notification-padding);
  text-align: center;

  button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    float: right;
  }

  &.failed {
    background-color: var(--notification-danger-background);
    color: var(--notification-danger-foreground);
  }

  &.success {
    background-color: var(--notification-success-background);
    color: var(--notification-success-foreground);
  }
}