:where(:root),
:where(:host) {
  --vaadin-notification-border-width: 0px;
  --vaadin-ease-fluid: cubic-bezier(0.78, 0, 0.22, 1);
  --vaadin-notification-padding: var(--vaadin-padding-m);
}

vaadin-notification-container {
  color-scheme: var(--aura-notification-color-scheme);
}

vaadin-notification-card::part(overlay) {
  --aura-surface-level: 3.5;
  background: var(--vaadin-notification-background, var(--aura-surface-color));
  box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-notification-shadow, var(--aura-overlay-shadow));

  /* TODO probably should be in base styles */
  /* Keeps notifications on top of MDL view transitions */
  view-transition-name: vaadin-notification;
}

vaadin-notification-card:is(
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    .v-info,
    .v-success,
    .v-warning,
    .v-error,
    [theme~='info'],
    [theme~='success'],
    [theme~='warning'],
    [theme~='error']
  )::part(overlay) {
  --vaadin-notification-background: var(--aura-accent-surface);
  --vaadin-icon-color: var(--aura-accent-text-color);
  box-shadow:
    inset 0 0 0 1px light-dark(transparent, var(--aura-accent-border-color)),
    0 0 0 1px light-dark(var(--aura-accent-border-color), transparent),
    var(--vaadin-notification-shadow, var(--aura-shadow-m));
}

::view-transition-group(vaadin-notification) {
  /* Keep on top of MDL view-transition elements */
  z-index: 1;
  /* The backdrop-filter from vaadin-notification-card::part(overlay) is copied here, so we need to clip it with the same border radius */
  border-radius: var(--vaadin-notification-border-radius, var(--vaadin-radius-l));
}

/* In Safari, the backdrop-filter is copied to transition-group pseudo element but also retained in the new/old pseudo elements */
/* Removing it from the transition-group makes it look better */
@supports (background: -webkit-named-image(i)) {
  ::view-transition-group(vaadin-notification) {
    backdrop-filter: none;
  }
}

vaadin-notification-card vaadin-card {
  --vaadin-card-border-width: 0px;
  --vaadin-card-gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
  color: var(--vaadin-text-color-secondary);
}

vaadin-notification-card vaadin-button {
  --aura-surface-level: 6;
}