:host .grit-elevation-0, :root .grit-elevation-0 {
  box-shadow: 0px 0px 0px 0px rgba(33, 43, 54, 0.16), 0px 0px 0px 0px rgba(33, 43, 54, 0.16);
  z-index: 0;
}
:host .grit-elevation-1, :root .grit-elevation-1 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 1px 1px 0px rgba(33, 43, 54, 0.16);
  z-index: 1;
}
:host .grit-elevation-2, :root .grit-elevation-2 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 3px 4px 0px rgba(33, 43, 54, 0.1);
  z-index: 2;
}
:host .grit-elevation-3, :root .grit-elevation-3 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.08), 0px 8px 10px 0px rgba(33, 43, 54, 0.2);
  z-index: 3;
}
:host .grit-elevation-4, :root .grit-elevation-4 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.1), 0px 16px 16px 0px rgba(33, 43, 54, 0.12);
  z-index: 4;
}
:host .grit-elevation-5, :root .grit-elevation-5 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.1), 0px 24px 24px 0px rgba(33, 43, 54, 0.12);
  z-index: 5;
}

:host {
  display: flex;
  position: relative;
  overflow: hidden;
  max-height: 500px;
  letter-spacing: var(--grit-notification-letter-spacing);
  opacity: var(--grit-notification-initial-opacity);
  outline: none;
  box-sizing: border-box;
  transition: left 320ms, right 320ms, margin-bottom 320ms, opacity 0.2s;
}

::slotted(*) {
  padding: 16px;
}

:host(.flag) {
  position: relative;
  border: var(--grit-notification-flag-border);
  letter-spacing: var(--grit-notification-letter-spacing);
  border-radius: var(--grit-notification-flag-border-radius);
  margin-bottom: 8px;
  background-color: white;
  min-width: var(--grit-notification-flag-max-width);
  max-width: var(--grit-notification-flag-max-width);
  transition: left 320ms, right 320ms, margin-bottom 320ms, opacity 200ms, max-height 200ms;
  opacity: 1;
  touch-action: none;
}

:host(.enter-side-right) {
  right: -500px;
}

:host(.enter-side-left) {
  left: -500px;
}