/**
 * @file
 * Alert component styles for the Save Mo Lives theme.
 *
 * Converts the equivalent modotstrap _alert.scss rules to plain CSS using
 * Save Mo Lives design tokens. The .alert-icon is hidden at narrow viewports
 * and shown at 576 px+, matching modotstrap's sm breakpoint behaviour.
 *
 * Template: templates/paragraphs/paragraph--alert.html.twig
 */

/* ---------------------------------------------------------------------------
 * Sitewide / topic alert wrapper.
 * ------------------------------------------------------------------------- */
.alert {
  box-sizing: border-box;
  display:    flex;
  align-items: flex-start;
  padding:    12px 38px;
  border-bottom: 2px solid var(--sml-blue);
  background-color: var(--sml-warning-bg);
  margin:     0;
  width:      100%;
}

.alert:last-child {
  border-width: 3px;
}

.alert-topic .alert {
  background-color: var(--sml-blue-bg);
}

/* ---------------------------------------------------------------------------
 * Icon (hidden on mobile, shown at 576 px+).
 * ------------------------------------------------------------------------- */
.alert-icon {
  display: none;
}

.alert-icon img,
.alert-icon svg {
  width:  2rem;
  height: 2rem;
}

@media (min-width: 576px) {
  .alert-icon {
    display:      block;
    flex-shrink:  0;
    margin-right: 15px;
    text-align:   left;
  }
}

/* ---------------------------------------------------------------------------
 * Content area.
 * ------------------------------------------------------------------------- */
.alert-content {
  padding:   0;
  margin:    0;
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Title.
 * ------------------------------------------------------------------------- */
.alert-title {
  display:     block;
  font-weight: 700;
  color:       var(--sml-black);
  line-height: 1.26;
}

@media (min-width: 576px) {
  .alert-title {
    display:      inline;
    margin-right: 15px;
  }
}

.alert-topic .alert-title {
  color: var(--sml-blue-dark);
}

/* ---------------------------------------------------------------------------
 * Body text and link.
 * ------------------------------------------------------------------------- */
.alert-text {
  margin-right: 15px;
}

.alert-link {
  display:         block;
  text-decoration: underline;
}

@media (min-width: 576px) {
  .alert-link {
    display: inline;
  }
}