.branch-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--branch-icon-width, 24px);
  height: var(--branch-icon-height, 24px);
  line-height: 0;
  vertical-align: middle;
}
.branch-icon > .branch-icon__svg,
.branch-icon > .branch-icon__svg > svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Preserve outline artwork against Safe SVG's blanket svg fill rule. */
.branch-icon svg[fill="none"] {
  fill: none;
}
.branch-icon--colored:not(.branch-icon--projected) :is(svg, svg *)[stroke]:not([stroke="none"]):not([stroke^="url("]),
.branch-icon--colored.branch-icon--projected :is(svg, svg *)[stroke]:not([stroke="none"]):not([stroke^="url("]):not(defs *):not(mask *):not(clipPath *):not(filter *) {
  stroke: currentColor;
}
.branch-icon--colored:not(.branch-icon--projected) :is(svg, svg *)[fill]:not([fill="none"]):not([fill^="url("]):not([data-branch-icon-background]),
.branch-icon--colored.branch-icon--projected :is(svg, svg *)[fill]:not([fill="none"]):not([fill^="url("]):not([data-branch-icon-background]):not(defs *):not(mask *):not(clipPath *):not(filter *) {
  fill: currentColor;
}
.branch-icon--stroke :is(svg, svg *)[stroke]:not([stroke="none"]) {
  stroke-width: var(--branch-icon-stroke);
}
.branch-nav-icon-slot {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.branch-shared-icon.safe-svg-cover,
.branch-shared-icon .safe-svg-inside {
  line-height: 0;
}
.branch-icon-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 8px;
}
.branch-icon-appearance {
  display: grid;
  gap: 12px;
  margin-block: 12px;
}
.branch-icon-appearance__dimensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}