/*

@title Icon

@reference
  - https://every-layout.dev/layouts/icon/

@example
  ```
    <icon-l class="_align:center">
      <i class="flag-icon flag-icon-us margin-right:s-2"></i>
      <h4>
        <%= space.depot_slug %>
      </h4>
    </icon-l>
  ```

*/
icon-l {
  --align: baseline;
  align-items: var(--align);
}

icon-l svg {
  --size: 0.75em;

  height: var(--size);
  /* height: 1cap; */
  width: var(--size);
  /* width: 1cap; */
}


icon-l._align\:center {
  --align: center;
}


/* To make sure ELO components play nice with Stimulus */
icon-l {
  pointer-events: none;
}

icon-l._size\:1em svg {
  --size: 1em;
}

icon-l._align\:text {
  --align: baseline;
  display: inline-flex;
  vertical-align: middle;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.with-icon .text {
  margin-inline-start: var(--s-3);
}


.with-icon .text.at-start {
  margin-inline-end: var(--s-3);
  margin-inline-start: 0;
}