/* ==========================================================================================
=> CMS GIRVAS (https://www.cms-girvas.ru/)
=>
=> Типовая стилизация интерактивных уведомлений, генерируемых CMS "GIRVAS"
=>
=> @link      https://gitflic.ru/project/garbalo/cms-girvas Путь до репозитория системы
=> @copyright Copyright (c) 2022 - 2024, Andrey Shestakov & Garbalo (https://www.garbalo.com/)
=> @license   https://gitflic.ru/project/garbalo/cms-girvas/LICENSE.md
============================================================================================= */

.notification {
  box-sizing: border-box;
  background-color: var(--primary-color-2);
  color: var(--primary-color-3);
  font-size: 14px;
  padding: 20px;
}

.notification .notification__title {
  text-transform: uppercase;
  font-size: inherit;
  font-weight: 700;
  margin-bottom: 10px;
}

.notification .notification__content {
  font-size: inherit;
}

.notification .notification__content:not(:last-child) {
  margin-bottom: 10px;
}

.notification .notification__footer {
  text-transform: uppercase;
  font-size: 12px;
}

.notification.notification_is-static {
  margin-bottom: 20px;
}

.notification.notification_is-popup {
  position: fixed;
  padding: 20px;
  left: -340px;
  bottom: 10px;
  opacity: 0;
  z-index: 200;
  transition: left 1s, opacity 1s;
}

.notification.notification_is-popup.notification_is-showed {
  left: 10px;
  opacity: 1;
}

.notification_default {
  background-color: var(--primary-color-2);
  color: var(--primary-color-3);
  border-left: 12px solid var(--primary-color-1);
}

.notification_error {
  background-color: var(--secondary-color-6);
  color: var(--primary-color-4);
  border-left: 12px solid var(--secondary-color-10);
}

.notification_success {
  background-color: var(--secondary-color-9);
  color: var(--primary-color-4);
  border-left: 12px solid var(--secondary-color-11);
}

.notification_info {
  background-color: var(--secondary-color-3);
  color: var(--primary-color-4);
  border-left: 12px solid var(--secondary-color-12);
}

.notification a {
  color: inherit;
}