/* ==========================================================================================
=> CMS CMS «ГИРВАС»
=>
=> Включена в Реестр российского программного обеспечения Минцифры РФ.
=> Реестровый номер: №25012 от 27.11.2024
=> 
=> @copyright Copyright (c) 2021 - 2026, ИП Шестаков А.Р., «Карельский разработчик».
=>             Все права защищены.
=> @license   https://gitflic.ru/project/garbalo/cms-girvas/LICENSE.md
=> @see       https://gitflic.ru/project/garbalo/cms-girvas Репозиторий продукта
=> @see       https://cms-girvas.ru Сайт продукта
=> @author    Андрей Шестаков <andrey.shestakov@karelian-developer.ru>
=> @support   support@karelian-developer.ru
============================================================================================= */

.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;
}