.ucb-icon-alignment-left, .ucb-icon-alignment-right {
  display: block;
}

.ucb-icon-alignment-left {
  float: left;
  margin: .5rem;
  margin-left: 0;
}

.ucb-icon-alignment-right {
  float: right;
  margin: .5rem;
  margin-right: 0;
}

.ucb-icon-color-black {
  --ucb-icon-primary-color: #000;
  --ucb-icon-secondary-color: #FFF;
  color: var(--ucb-icon-primary-color);
}

.ucb-icon-color-white {
  --ucb-icon-primary-color: #FFF;
  --ucb-icon-secondary-color: #000;
  color: var(--ucb-icon-primary-color);
}

.ucb-icon-color-lightgray {
  --ucb-icon-primary-color: #ccc;
  --ucb-icon-secondary-color: #000;
  color: var(--ucb-icon-primary-color);
}

.ucb-icon-color-gray {
  --ucb-icon-primary-color: #808080;
  --ucb-icon-secondary-color: #000;
  color: var(--ucb-icon-primary-color);
}

.ucb-icon-color-darkgray {
  --ucb-icon-primary-color: #444;
  --ucb-icon-secondary-color: #FFF;
  color: var(--ucb-icon-primary-color);
}

.ucb-icon-color-gold {
  --ucb-icon-primary-color: #cfb87c;
  --ucb-icon-secondary-color: #000;
  color: var(--ucb-icon-primary-color);
}

.ucb-icon-style-square, .ucb-icon-style-square-rounded, .ucb-icon-style-circle {
  display: inline-block;
  background-color: var(--ucb-icon-primary-color, currentColor);
  width: 1em;
  max-width: 1em;
  text-align: center;
  box-sizing: content-box;
  vertical-align: top;
  padding: .5em;
}

.ucb-icon-style-square svg, .ucb-icon-style-square-rounded svg, .ucb-icon-style-circle svg {
  width: 1em;
  max-width: 1em;
}

.ucb-icon-style-square > *, .ucb-icon-style-square-rounded > *, .ucb-icon-style-circle > * {
  color: var(--ucb-icon-secondary-color, var(--ucb-background-color, #FFF));
}

.ucb-icon-style-square-rounded {
  border-radius: .25em;
}

.ucb-icon-style-circle {
  border-radius: 1em;
}

svg.ucb-icon-style-circle {
  --ucb-icon-style-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTYiIC8+PC9zdmc+');
  -webkit-mask-image: var(--ucb-icon-style-mask-image);
  mask-image: var(--ucb-icon-style-mask-image);
  border-radius: 0;
}