:root:not([uidensity]) #tab-notification-deck {
  --infobar-message-margin: 0 4px 3px;
}
:root[uidensity="compact"] #tab-notification-deck {
  --infobar-message-margin: 0 4px 2px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
  margin: var(--infobar-message-margin, 0 4px 4px) !important;
}

:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
  --infobar-vertical-margin: 7px;
  --infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
  --infobar-vertical-margin: 6px;
  --infobar-button-vertical-margin: 2px;
}
.infobar > .icon {
  margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
}
.notification-message {
  padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
}
.notification-button-container > .notification-button {
  margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
}
.notification-close {
  margin: var(--infobar-button-vertical-margin, 4px) 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(0, #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;
}