:root {
  --success: #20B15A;
  --bad: #BE0A0A;
}
.brxe-text {
  --icon-url: url("/wp-content/uploads/checkmark.svg");
  --icon-url-bad: url("/wp-content/uploads/bad.svg");
  --icon-url-dot: url("/wp-content/uploads/dot.svg");
  --icon-color: var(--success);
  --icon-color-bad: var(--bad);
  --icon-color-dot: #000;
  --icon-color-white: var(--white);
  --icon-offset: 0 0.5ex;
  --icon-size: 1em;
  --icon-gap: 0.5em;
  --icon-display: flex;
  --list-indent: 0;
}
.brxe-text ul {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
  margin-inline-start: var(--list-indent);
}
.brxe-text ul li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--icon-gap);
  margin-bottom: 8px;
}
.brxe-text ul li::before {
  content: "";
  display: var(--icon-display);
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  background-color: var(--icon-color);
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  mask-size: cover;
  translate: var(--icon-offset);
}
.brxe-text ul.white {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
  margin-inline-start: var(--list-indent);
}
.brxe-text ul.white li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--icon-gap);
  margin-bottom: 8px;
}
.brxe-text ul.white li::before {
  content: "";
  display: var(--icon-display);
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  background-color: var(--icon-color-white);
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  mask-size: cover;
  translate: var(--icon-offset);
}
.brxe-text ul.bad {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
  margin-inline-start: var(--list-indent);
}
.brxe-text ul.bad li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--icon-gap);
  margin-bottom: 8px;
}
.brxe-text ul.bad li::before {
  content: "";
  display: var(--icon-display);
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  background-color: var(--icon-color-bad);
  -webkit-mask-image: var(--icon-url-bad);
  mask-image: var(--icon-url-bad);
  mask-size: cover;
  translate: var(--icon-offset);
}
.brxe-text ul.dot {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
  margin-inline-start: var(--list-indent);
}
.brxe-text ul.dot li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--icon-gap);
  margin-bottom: 8px;
}
.brxe-text ul.dot li::before {
  content: "";
  display: var(--icon-display);
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  background-color: var(--icon-color-dot);
  -webkit-mask-image: var(--icon-url-dot);
  mask-image: var(--icon-url-dot);
  mask-size: cover;
  translate: var(--icon-offset);
}
