/*drupal alert styles */
.va-alert {
  border-left-style: solid;
  border-left-width: 10px;
  box-sizing: border-box;
  color: var(--color-text);
  padding: var(--space-l);
  vertical-align: middle;
  width: 100%;
  
  svg {
    font-size: 1.25em;
    height: 1em;
    line-height: 0.05em;
    margin-right: var(--space-m);
  }
}

.va-alert.no-background {
  background-color: unset !important;
  padding-top: var(--spacing-s);
}

// ensure drupal system messages dont overwrite our choices.
.va-alert.no-background a {
  background-color: unset !important;
  color: var(--color-link) !important;
}

.va-alert .messages__header {
  display: none;
}

/* Fixes super long links breaking layout in the node link report. */
.va-alert a {
  word-break: break-all;
}

.va-alert.messages--success,
.va-alert.messages--status {
  background-color: var(--va-green-lightest);
  border-color: var(--va-green-dark);

  svg {
    color: var(--va-green-dark);
    fill: var(--va-green-dark)
  }
}

.va-alert.messages--success a,
.va-alert.messages--status a {
  background-color: var(--va-green-lightest);
}

.va-alert.messages--warning {
  background-color: var(--va-gold-lightest);
  border-color: var(--va-gold-med);

  svg {
    color: var(--va-gold-med);
    fill: var(--va-gold-med);
  }
}

.va-alert.messages--warning a {
  background-color: var(--va-gold-lightest);
}

.va-alert.messages--error {
  background-color: var(--va-red-lightest);
  border-color: var(--va-red-dark);

  svg {
    color: var(--va-red-dark);
    fill: var(--va-red-dark);
  }
}

.va-alert.messages--error a {
  background-color: var(--va-red-lightest);
}

.messages {
  margin-top: 0;
}

.messages-list {
  margin-bottom: var(--space-m);
  margin-top: 0;
}

// node link report tweaks
.block-node-link-report-block h2 {
  display: inline-block;
  margin-left: var(--space-s);
  width: 90%;
}

// hide default alert icons in favor of the toggle
.node-link-report-list .va-alert::before {
  display: none;
}

.node-link-report-list .va-alert .messages__header {
  display: flex;
}

.node-link-report-list .messages__header {
  background: unset;
  margin-bottom: 0;

  @include alert-icon(
    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23212121'/%3e%3c/svg%3e"
  );

  &::before {
    left: 0;
    transition: transform var(--details-transform-transition-duration) ease-in
      0s;
  }
}

.node-link-report-list .js-form-wrapper[open] .messages__header::before {
  transform: rotate(90deg);
}

.status-icon {
  height: 24px;
  width: 24px;
}

.dismissible-icon {
  box-sizing: content-box;
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}