/* ===== Icon List ===== */
    .icon-list {
      display: flex;
      flex-flow: column;
      gap: var(--gap);
    }
  
    /* ===== Icon List Item ===== */
    .icon-list__list-item {
      --gap: var(--space-2xs);
      --list-item-color-background: unset;
      grid-column-gap: var(--gap);
      grid-row-gap: var(--gap);
      flex-flow: column;
      align-items: flex-start;
      display: flex;
      background-color: var(--list-item-color-background);
    }
    
    /* ===== Icon List Item Horizontal ===== */
    .icon-list__list-item--horizontal {
      flex-flow: row;
      justify-content: flex-start;
      width: 100%;
      display: flex;
    }
  
    /* ===== Icon List Item Color Background ===== */
    .icon-list__list-item--color-background {
      --list-item-color-background: var(--color-background-secondary);
      padding-inline: var(--space-s);
      padding-block: var(--space-s);
      border-radius: var(--border-radius-small);
    }
  
    /* ===== Icon List Icon Box ===== */
    .icon-list__icon-box {
      display: grid;
      place-content: center;
      border-radius: var(--border-radius-small);
      background-color: var(--color-background-secondary);
      padding-inline: var(--space-2xs);
      padding-block: var(--space-2xs);
    }
  
    /* ===== Icon List Content ===== */
    .icon-list__content {
      display: flex;
      flex-flow: column;
      gap: var(--gap);
    }
  
    /* ===== Icon List Header ===== */
    .icon-list__header {
      display: flex;
      flex-flow: column;
    }
  
    /* ===== Icon List Body ===== */
    .icon-list__body {
      display: flex;
      flex-flow: column;
    }