@layer components {
  .twentyone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .twentyone-icon svg,
  .twentyone-icon img {
    aspect-ratio: 1;
    fill: inherit;
    flex: 0 0 auto;
    height: 1em;
    object-fit: contain;
    width: 1em;
    transition: var(--twentyone--element--transition);
  }
  .icon--center {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  .icon--right {
    flex-direction: row-reverse;
  }
  .icon--big {
    flex-direction: column;
    align-items: start;
  }
  .icon--big.icon--center {
    align-items: center;
  }
  .icon--big.icon--right {
    align-items: end;
  }
}