/*
  @file Theming the styles created by WYSIWYG inline styling.
*/

/* Alerts */
.alert {
  padding: var(--spacing-largest);
  border: var(--border-large);
  border-color: var(--border-color-alert);
  background-color: var(--color-white);
  font-size: var(--font-size-large);
  font-weight: bold;
}

.alert-primary {
  border-color: var(--color-accent);
}

.alert-info {
  border-color: var(--color-info);
}

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

.alert-fail {
  border-color: var(--color-warning);
}

.alert-success {
  border-color: var(--color-success);
}

/* Links */
.btn.btn-start {
  display: inline-flex;
  align-items: center;
  padding: var(--btn-start-padding-vertical) var(--btn-start-padding-horizontal);
  text-decoration: none;
  color: var(--btn-start-color);
  border: var(--btn-start-border);
  border-color: var(--btn-start-border-color);
  background-color: var(--btn-start-bg-color);
  line-height: 1;
}
.btn.btn-start:focus,
.btn.btn-start:hover {
  color: var(--btn-start-color-hover);
  background-color: var(--btn-start-bg-color-hover);
}
.btn.btn-start::after {
  position: relative;
  top: var(--btn-start-icon-top);
  margin-inline-start: 0.5rem;
  content: var(--btn-start-icon) / "";
  font-size: var(--btn-start-icon-size);
  line-height: 0;
}
.external-link::after {
  position: relative;
  top: -3px;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-inline-start: 0.25rem;
  content: "";
  background-color: var(--external-link-icon-color); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */
  -webkit-mask-image: url("../../templates/includes/icons/external-link.svg");
  mask-image: url("../../templates/includes/icons/external-link.svg");
}

/* Styled lists */
.list-checked li::marker {
  content: "\2714\0020";
  color: var(--color-green);
}

.align-left {
  margin-right: var(--wysiwyg-align-spacing);
}

.align-right {
  margin-left: var(--wysiwyg-align-spacing);
}

.lede {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: clamp(2.2rem, 2vw, 3rem);
  font-weight: 600;
  letter-spacing: 2px;
  max-width: 55ch;
}

.highlighted-word {
  color: var(--color-orange);
}

a.button {
  padding: 0.5rem 1rem;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 1.3rem;
  display: inline-block;
  margin: 1rem 0;
  transition: all 0.3s ease-in-out;
  border: 1px solid white;
}