@telekom/scale-components/dist/collection/components/notification-message/notification-message.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --width: 100%;
  --radius: var(--telekom-radius-standard);
  --border: var(--telekom-line-weight-standard) solid transparent;

  --background-error: var(--telekom-color-functional-danger-subtle);
  --background-warning: var(--telekom-color-functional-warning-subtle);
  --background-informational: var(
    --telekom-color-functional-informational-subtle
  );
  --background-success: var(--telekom-color-functional-success-subtle);
}

.notification-message {
  border: var(--border);
  border-radius: var(--radius);
  width: var(--width);
  position: relative;
}

.notification-message--variant-error {
  background: var(--background-error);
}
.notification-message--variant-warning {
  background-color: var(--background-warning);
}
.notification-message--variant-informational {
  background-color: var(--background-informational);
}
.notification-message--variant-success {
  background-color: var(--background-success);
}

.notification-message__heading {
  margin: 14px 48px 14px 48px;
  font-weight: var(--telekom-typography-font-weight-bold);
  line-height: var(--telekom-typography-line-spacing-standard);
}

.notification-message__text {
  margin: 8px 48px 15px 48px;
}

::slotted(*) {
  font-weight: var(--telekom-typography-font-weight-regular);
}

.notification-message__icon-close {
  position: absolute;
  top: 8px;
  right: 13.5px;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--telekom-color-text-and-icon-standard);
}

.notification-message__icon-close svg {
  height: 19px;
  width: 19px;
  padding: 6.5px;
  border-radius: 20%;
}

.notification-message__icon-close:hover svg {
  background-color: hsl(0, 0%, 100%);
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

.notification-message__icon-success {
  position: absolute;
  top: 12.5px;
  left: 17px;
  height: 20px;
  width: 20px;
  color: var(--telekom-color-text-and-icon-functional-success);
}

.notification-message__icon-error {
  position: absolute;
  top: 12px;
  left: 17px;
  height: 20px;
  width: 20px;
  color: var(--telekom-color-text-and-icon-functional-danger);
}

.notification-message__icon-information {
  position: absolute;
  top: 12px;
  left: 17px;
  height: 20px;
  width: 20px;
  color: var(--telekom-color-text-and-icon-functional-informational);
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .notification-message__icon-close {
    color: hsl(0, 0%, 100%);
  }
  .notification-message {
    border: 1px solid hsl(0, 0%, 100%);
  }
}