/* DX Icon — single icon via key or [icon] shortcode */
.dx-icon-display {
  display: flex;
  width: 100%;
  margin-block: var(--space-md);
}

.dx-icon-display--align-left {
  justify-content: flex-start;
}

.dx-icon-display--align-center {
  justify-content: center;
}

.dx-icon-display--align-right {
  justify-content: flex-end;
}

.dx-icon-display__inner {
  display: inline-flex;
  line-height: 0;
  color: var(--color-primary);
}

.dx-icon-display__svg,
.dx-icon-display__inner svg,
.dx-icon-display__inner .ti {
  display: block;
  color: inherit;
}

.dx-icon-display--size-s .dx-icon-display__inner :is(svg, .ti) {
  width: 2.5rem;
  height: 2.5rem;
}

.dx-icon-display--size-m .dx-icon-display__inner :is(svg, .ti) {
  width: 3.5rem;
  height: 3.5rem;
}

.dx-icon-display--size-l .dx-icon-display__inner :is(svg, .ti) {
  width: 5rem;
  height: 5rem;
}