/*
  @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-left: 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-left: 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);
}