.ms-notifications {
  box-sizing: border-box;
  position: fixed;
  z-index: 1000;

  top: auto;
  bottom: 0;
  right: 0;
  left: 0;

  padding: 1rem ;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;

  max-width: 100%;
  width: 100%;

  pointer-events: none;

  &__ {
    &notification {
      box-sizing: border-box;
      position: relative;

      max-width: 100%;
      width: auto;

      color: white;

      padding: 1rem;

      border-radius: 12px;

      cursor: pointer;
      pointer-events: auto;

      &-- {
        &info {
          background-color: rgb(84, 160, 255);
        }

        &warning {
          background-color: rgb(243, 156, 18);
        }

        &error {
          background-color: rgb(232, 76, 60);
        }

        &success {
          background-color: rgb(48, 203, 131);
        }

        &loading {
          background-color: rgb(239, 243, 245);
          color: rgb(20, 27, 31);
        }
      }
    }
  }
}