:root:not([uidensity]) notification-message {
  --infobar-message-vertical-margin: 3px;

  --infobar-vertical-margin: 7px;
  --infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] notification-message {
  --infobar-message-vertical-margin: 2px;

  --infobar-vertical-margin: 6px;
  --infobar-button-vertical-margin: 2px;
}
:root[uidensity="touch"] notification-message {
  --infobar-message-vertical-margin: 4px;

  --infobar-vertical-margin: 8px;
  --infobar-button-vertical-margin: 4px;
}

:root:not([uidensity]) #tab-notification-deck,
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
}
:root[uidensity="compact"] #tab-notification-deck,
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
}
:root[uidensity="touch"] #tab-notification-deck,
:root[uidensity="touch"] notification-message[message-bar-type="infobar"] {
}
.infobar > .icon {
  margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
}
.notification-message {
  padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
}
.notification-button-container > .notification-button {
  margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */
}
.notification-close {
  margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */
}

/* Hard coded for compatibility - Disappearing phenomenon */
.container.infobar::before {
  content: "";
  display: block;
  width: 2px;
  position: absolute;
  background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}
