overleaf/services/web/frontend/stylesheets/bootstrap-5/components/notifications.scss

.notification-body {
  // will be deprecated once notifications moved to use .notification (see below)
  flex-grow: 1;
  width: 90%;

  @include media-breakpoint-up(md) {
    width: auto;
  }
}

.notification-action {
  $line-height-computed: $font-size-base * $line-height-base; // 24px

  // will be deprecated once notifications moved to use .notification (see below)
  margin-top: calc($line-height-computed / 2); // match paragraph padding
  order: 1;

  @include media-breakpoint-up(md) {
    margin-top: 0;
    order: 0;
    padding-left: $spacing-05;
  }
}

.notification-close {
  // will be deprecated once notifications moved to use .notification (see below)
  padding-left: $spacing-05;
  text-align: right;
  width: 10%;

  button {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    float: right;
    padding: 5.5px;
    cursor: pointer;
    background: transparent;
    border: 0;

    &:hover,
    &:focus {
      background-color: rgba($neutral-90, 0.08);
      color: var(--content-secondary);
    }
  }

  @include media-breakpoint-up(md) {
    width: auto;
  }
}

.notification {
  border-radius: $border-radius-base;
  color: var(--content-primary);
  display: flex;
  padding: 0 $spacing-06; // vertical padding added by elements within notification
  width: 100%;

  a:not(.btn) {
    text-decoration: underline;
  }

  p {
    margin-bottom: $spacing-02;
  }

  .notification-icon {
    flex-grow: 0;
    padding: 18px $spacing-06 0 0;
  }

  .notification-icon.notification-icon-center {
    padding-top: 0;
    display: flex;
    align-items: center;
  }

  .notification-content-and-cta {
    // shared container to align cta with text on smaller screens
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;

    p:last-child {
      margin-bottom: 0;
    }
  }

  .notification-content {
    flex-grow: 1;
    padding: $spacing-06 0;
    width: 100%;
  }

  .notification-cta {
    padding-bottom: $spacing-06;

    a {
      font-weight: 700;
    }

    a,
    button {
      white-space: nowrap;
    }
  }

  .notification-disclaimer {
    color: var(--neutral-60);
    font-size: $font-size-sm;
    padding-bottom: $spacing-06;
  }

  .notification-close-btn {
    height: $spacing-12;
    align-items: center;
    display: flex;
    padding: 0 0 0 $spacing-06;

    button {
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      float: right;
      padding: 5.5px;
      cursor: pointer;
      background: transparent;
      border: 0;

      &:hover,
      &:focus {
        background-color: rgba($neutral-90, 0.08);
        color: var(--content-secondary);
      }
    }
  }

  &.notification-type-info {
    background-color: var(--bg-info-03);
    border: 1px solid var(--blue-20);

    .notification-icon {
      color: var(--blue-50);
    }
  }

  &.notification-type-success {
    background-color: var(--bg-accent-03);
    border: 1px solid var(--green-20);

    .notification-icon {
      color: var(--green-50);
    }
  }

  &.notification-type-warning {
    background-color: var(--bg-warning-03);
    border: 1px solid var(--yellow-20);

    .notification-icon {
      color: var(--yellow-40);
    }
  }

  &.notification-type-error {
    background-color: var(--bg-danger-03);
    border: 1px solid var(--red-20);

    .notification-icon {
      color: var(--red-50);
    }
  }

  &.notification-type-offer {
    background-color: var(--bg-light-primary);
    border: 1px solid var(--neutral-20);

    .notification-icon {
      color: var(--neutral-50);
    }
  }

  @include media-breakpoint-up(md) {
    &:not(.notification-cta-below-content) {
      .notification-content-and-cta {
        flex-wrap: nowrap;
      }

      .notification-content {
        width: auto;
      }

      .notification-cta {
        height: $spacing-12;
        padding-left: $spacing-06;
        padding-bottom: 0;
        align-items: center;
        display: flex;
      }
    }
  }
}

.notification-with-scroll-margin {
  scroll-margin: $spacing-06;
}

.notification-list {
  .notification {
    margin-bottom: $spacing-07;
  }
}

// Reconfirmation notification

.reconfirm-notification {
  display: flex;
  width: 100%;

  .fa-warning {
    margin-right: $spacing-05;
  }

  .btn-reconfirm {
    float: right;
    margin-left: $spacing-05;
    text-transform: capitalize;
  }
}

.group-invitation-cancel-subscription-notification-buttons {
  display: flex;
  align-items: center;
}

// Settings page
.affiliations-table {
  .reconfirm-notification {
    margin: 0 auto $spacing-05 auto !important;
    padding: $spacing-07;
  }

  .reconfirm-row {
    td {
      border: 0;

      .alert {
        border: 0;
        padding: 0;
      }

      :not(.alert) {
        .reconfirm-notification {
          background-color: var(--neutral-10);
          border-radius: $border-radius-base;

          .fa-warning {
            color: var(--yellow-40);
          }
        }
      }
    }
  }
}

// Only apply bottom margin to form messages when it is non-empty
.form-messages-bottom-margin > :last-child {
  margin-bottom: var(--spacing-06);
}