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

/* Links */
.btn.btn-start {
  display: inline-flex;
  align-items: center;
  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);
}
.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("../../../../../contrib/localgov_base/templates/includes/icons/external-link.svg");
  mask-image: url("../../../../../contrib/localgov_base/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);
}