.notification {
  @media (min-width: 1024px) {
    width: var(--Modal-Width-1024up-M) !important;
  }
}
.notification .notification-titlebar {
  padding-top: var(--Modal-X-Padding-S) !important;
  align-items: flex-start;

  @media (min-width: 600px) {
    padding-top: var(--Modal-X-Padding-M) !important;
  }

  @media (min-width: 1440px) {
    padding-top: var(--Modal-X-Padding-L) !important;
  }
}

/* Icon in title bar */
.notification-titlebar::before {
  background-color: transparent;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;

  mask-image: url('/assets/icons/32px/Info_Filled.svg');
  width: 32px;
  height: 32px;

  @media (min-width: 60px) {
    mask-image: url('/assets/icons/36px/Info_Filled.svg');
    width: 36px;
    height: 36px;
  }
}
.notification--info .notification-titlebar::before {
  background-color: var(--Brand-Primary-Blue-500);
}
.notification--error .notification-titlebar::before {
  background-color: var(--brand-error-500-main);
}
.notification--warning .notification-titlebar::before {
  background-color: var(--brand-warning-500-main);
}
.notification--success .notification-titlebar::before {
  background-color: var(--brand-success-500-main);
}

.notification .notification-content {
  padding-bottom: var(--Modal-B-Padding-XS) !important;
  overflow-y: auto !important;

  @media (min-width: 600px) {
    padding-bottom: var(--Modal-B-Padding-S) !important;
  }

  @media (min-width: 1440px) {
    padding-bottom: var(--Modal-B-Padding-M) !important;
  }
}

.notification .notification-buttonpane {
  border: 0;

  @media (min-width: 600px) {
    padding-inline: var(--Modal-X-Padding-M);
  }
}

.notification .notification-buttonset > .button {
  @media (min-width: 1024px) {
    /* size-l */
    font-size: var(--body2-font-size);
    line-height: var(--body2-line-height);
    letter-spacing: var(--body2-letter-spacing);
    height: 48px;
    /* min-width: 48px; */
    padding-inline: 18px;
  }
}

.notification-footer-shadow {
  /* Shadow/Shadow_Modal Footer */
  box-shadow:
    0px -4px 16px 0px rgba(23, 24, 28, 0.04),
    0px -10px 28px 8px rgba(23, 24, 28, 0.04);
}