:root {
  --prototype-i-arrow-down: url("/themes/custom/prototype/images/icons/icon-arrow-down.svg");
  --prototype-i-arrow-left: url("/themes/custom/prototype/images/icons/icon-arrow-left.svg");
  --prototype-i-arrow-right: url("/themes/custom/prototype/images/icons/icon-arrow-right.svg");
  --prototype-i-arrow-up: url("/themes/custom/prototype/images/icons/icon-arrow-up.svg");
  --prototype-i-cancel: url("/themes/custom/prototype/images/icons/icon-cancel.svg");
  --prototype-i-checkmark: url("/themes/custom/prototype/images/icons/icon-checkmark.svg");
  --prototype-i-circle-check: url("/themes/custom/prototype/images/icons/circle-check.svg");
  --prototype-i-circle-empty: url("/themes/custom/prototype/images/icons/circle-empty.svg");
  --prototype-i-circle-filled: url("/themes/custom/prototype/images/icons/circle-fill.svg");
  --prototype-i-error: url("/themes/custom/prototype/images/icons/error.svg");
  --prototype-i-minus: url("/themes/custom/prototype/images/icons/icon-minus.svg");
  --prototype-i-plus: url("/themes/custom/prototype/images/icons/icon-plus.svg");
  --prototype-i-rectangle-checked: url("/themes/custom/prototype/images/icons/rectangle-checked.svg");
  --prototype-i-rectangle-empty: url("/themes/custom/prototype/images/icons/rectangle-empty.svg");
  --prototype-i-search: url("/themes/custom/prototype/images/icons/icon-search.svg");
  --prototype-i-status: url("/themes/custom/prototype/images/icons/status.svg");
  --prototype-i-success: url("/themes/custom/prototype/images/icons/icon-success.svg");
  --prototype-i-warning: url("/themes/custom/prototype/images/icons/icon-warning.svg");
}

.icon {
  background-color: var(--prototype-color-black);
  block-size: 32px;
  display: block;
  font: 0/0 transparent;
  inline-size: 32px;
  -webkit-mask-size: cover;
          mask-size: cover;
}

.icon--arrow-down {
  -webkit-mask: var(--prototype-i-arrow-down) no-repeat center;
          mask: var(--prototype-i-arrow-down) no-repeat center;
}

.icon--arrow-left {
  -webkit-mask: var(--prototype-i-arrow-left) no-repeat center;
          mask: var(--prototype-i-arrow-left) no-repeat center;
}

.icon--arrow-right {
  -webkit-mask: var(--prototype-i-arrow-right) no-repeat center;
          mask: var(--prototype-i-arrow-right) no-repeat center;
}

.icon--arrow-up {
  -webkit-mask: var(--prototype-i-arrow-up) no-repeat center;
          mask: var(--prototype-i-arrow-up) no-repeat center;
}

.icon--circle-check {
  -webkit-mask: var(--prototype-i-circle-check) no-repeat center;
          mask: var(--prototype-i-circle-check) no-repeat center;
}

.icon--circle-empty {
  -webkit-mask: var(--prototype-i-circle-empty) no-repeat center;
          mask: var(--prototype-i-circle-empty) no-repeat center;
}

.icon--circle-filled {
  -webkit-mask: var(--prototype-i-circle-filled) no-repeat center;
          mask: var(--prototype-i-circle-filled) no-repeat center;
}

.icon--cancel {
  -webkit-mask: var(--prototype-i-cancel) no-repeat center;
          mask: var(--prototype-i-cancel) no-repeat center;
}

.icon--checkmark {
  -webkit-mask: var(--prototype-i-checkmark) no-repeat center;
          mask: var(--prototype-i-checkmark) no-repeat center;
}

.icon--error {
  -webkit-mask: var(--prototype-i-error) no-repeat center;
          mask: var(--prototype-i-error) no-repeat center;
}

.icon--minus {
  -webkit-mask: var(--prototype-i-minus) no-repeat center;
          mask: var(--prototype-i-minus) no-repeat center;
}

.icon--plus {
  -webkit-mask: var(--prototype-i-plus) no-repeat center;
          mask: var(--prototype-i-plus) no-repeat center;
}

.icon--rectangle-checked {
  -webkit-mask: var(--prototype-i-rectangle-checked) no-repeat center;
          mask: var(--prototype-i-rectangle-checked) no-repeat center;
}

.icon--rectangle-empty {
  -webkit-mask: var(--prototype-i-rectangle-empty) no-repeat center;
          mask: var(--prototype-i-rectangle-empty) no-repeat center;
}

.icon--search {
  -webkit-mask: var(--prototype-i-search) no-repeat center;
          mask: var(--prototype-i-search) no-repeat center;
}

.icon--success {
  -webkit-mask: var(--prototype-i-success) no-repeat center;
          mask: var(--prototype-i-success) no-repeat center;
}

.icon--warning {
  -webkit-mask: var(--prototype-i-warning) no-repeat center;
          mask: var(--prototype-i-warning) no-repeat center;
}