/*
 * Alerts
 *
 * BEM-style component classes used by app/components/ui/notifications/.
 *
 * Usage:
 *   class="alert alert--warning"          <- yellow warning banner
 *
 * Cascade order: base first, then modifiers, then BEM elements.
 */

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

.alert {
  padding: 1rem;
  border-inline-start-width: 4px;
  border-inline-start-style: solid;
}

.alert__body {
  display: flex;
}

.alert__icon-wrap {
  flex-shrink: 0;
}

.alert__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.alert__icon--large {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.alert__text-wrap {
  margin-inline-start: 0.75rem;
}

.alert__text {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Heading inside the alert body. */
.alert__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  margin: 0;
}

/* Bulleted list inside the alert body. */
.alert__list {
  margin-block: 0;
  margin-block-start: 0.5rem;
  padding-inline-start: 1.25rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Modifiers                                                          */
/* ------------------------------------------------------------------ */

/* Warning — yellow palette. */
.alert--warning {
  border-inline-start-color: rgb(var(--palette-yellow-400));
  background-color: rgb(var(--palette-yellow-50));
}

.alert--warning .alert__icon {
  color: rgb(var(--palette-yellow-400));
}

.alert--warning .alert__text {
  color: rgb(var(--palette-yellow-700));
}

/* Error — red palette. */
.alert--error {
  border-inline-start-color: var(--color-danger);
  background-color: rgb(var(--palette-red-50));
}

.alert--error .alert__icon {
  color: var(--color-danger);
}

.alert--error .alert__title {
  color: rgb(var(--palette-red-800));
}

.alert--error .alert__text,
.alert--error .alert__list {
  color: rgb(var(--palette-red-700));
}

/* Success - green palette. */
.alert--success {
  border-inline-start-color: rgb(var(--palette-green-400)); /* green-400 */
  background-color: rgb(var(--palette-green-50)); /* green-50 */
}

.alert--success .alert__icon {
  color: rgb(var(--palette-green-400));
}

.alert--success .alert__title {
  color: rgb(var(--palette-green-800));
}

.alert--success .alert__text,
.alert--success .alert__list {
  color: rgb(var(--palette-green-700));
}

/* Info - blue palette. */
.alert--info {
  border-inline-start-color: rgb(var(--palette-blue-400)); /* blue-400 */
  background-color: rgb(var(--palette-blue-50)); /* blue-50 */
}

.alert--info .alert__icon {
  color: rgb(var(--palette-blue-400));
}

.alert--info .alert__title {
  color: rgb(var(--palette-blue-900));
}

.alert--info .alert__text,
.alert--info .alert__list {
  color: rgb(var(--palette-blue-700));
}

.alert--rounded {
  border-radius: var(--radius-md);
  border-inline-start-width: 0;
}

.alert--spaced {
  margin-block-start: 2.5rem;
}

.alert__text-wrap--offset {
  margin-block-start: 0.5rem;
}

.alert__list-item--spaced {
  margin-block-start: 1rem;
}

.alert__list-note {
  display: inline-block;
  padding-inline: 1rem;
  color: var(--color-danger);
}

/* ------------------------------------------------------------------ */
/* Page notification                                                   */
/* ------------------------------------------------------------------ */

.page-notification {
  padding: 1.5rem;
  border: 1px solid rgb(var(--palette-blue-200));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.page-notification--info {
  background-color: rgb(var(--palette-blue-50));
}

.page-notification--success {
  background-color: rgb(var(--palette-green-50));
}

.page-notification--warning {
  background-color: rgb(var(--palette-yellow-50));
}

.page-notification--danger {
  background-color: rgb(var(--palette-red-50));
}

.page-notification__body {
  display: flex;
}

.page-notification__icon-wrap {
  flex-shrink: 0;
}

.page-notification__icon-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
}

.page-notification__icon-bubble--info {
  background-color: var(--color-info);
}

.page-notification__icon-bubble--success {
  background-color: var(--color-success);
}

.page-notification__icon-bubble--warning {
  background-color: var(--color-warning);
}

.page-notification__icon-bubble--danger {
  background-color: var(--color-danger);
}

.page-notification__content {
  flex: 1 1 auto;
  margin-inline-start: 1rem;
}

.page-notification__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.page-notification__title--info {
  color: rgb(var(--palette-blue-800));
}

.page-notification__title--success {
  color: rgb(var(--palette-green-800));
}

.page-notification__title--warning {
  color: rgb(var(--palette-yellow-800));
}

.page-notification__title--danger {
  color: rgb(var(--palette-red-800));
}

.page-notification__text {
  margin: 0;
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.page-notification__text--info {
  color: rgb(var(--palette-blue-700));
}

.page-notification__text--success {
  color: rgb(var(--palette-green-700));
}

.page-notification__text--warning {
  color: rgb(var(--palette-yellow-700));
}

.page-notification__text--danger {
  color: rgb(var(--palette-red-700));
}

.page-notification__actions {
  margin-block-start: 1rem;
}

/* ------------------------------------------------------------------ */
/* Impersonator alert                                                  */
/* ------------------------------------------------------------------ */

.impersonator-alert {
  padding: 1rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-rose-50));
}

.impersonator-alert__body {
  display: flex;
}

.impersonator-alert__icon-wrap {
  flex-shrink: 0;
}

.impersonator-alert__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: rgb(var(--palette-rose-400));
}

.impersonator-alert__content {
  flex: 1 1 auto;
  margin-inline-start: 0.75rem;
}

@media (min-width: 768px) {
  .impersonator-alert__content {
    display: flex;
    justify-content: space-between;
  }
}

.impersonator-alert__message {
  margin: 0;
  color: rgb(var(--palette-rose-700));
  font-size: 0.875rem;
}

.impersonator-alert__action {
  margin-block: 0;
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .impersonator-alert__action {
    margin-block-start: 0;
    margin-inline-start: 1.5rem;
  }
}

.impersonator-alert__button {
  color: rgb(var(--palette-rose-700));
  font-weight: 500;
  white-space: nowrap;
}

.impersonator-alert__button:hover {
  color: var(--color-critical);
}