.icon {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  * {
    pointer-events: none;
  }
  
  &[data-size="xxs"] {
    width: var(--rem-10);
    min-width: var(--rem-10);

    i {
      font-size: var(--rem-10);
    }
  }

  &[data-size="xs"] {
    width: var(--rem-12);
    min-width: var(--rem-12);

    i {
      font-size: var(--rem-12);
    }
  }

  &[data-size="sm"] {
    width: 1rem;
    min-width: 1rem;

    i {
      font-size: var(--rem-14);
    }
  }

  &[data-size="md"] {
    width: 1.25rem;
    min-width: 1.25rem;

    i {
      font-size: 1rem;
    }
  }

  &[data-size="lg"] {
    width: 1.5rem;
    min-width: 1.5rem;

    i {
      font-size: 1.25rem;
    }
  }

  &[data-size="xl"] {
    width: 2rem;
    min-width: 2rem;

    i {
      font-size: 1.75rem;
    }
  }
}