@import '@legends/styles/base.scss';

// TODO - if we use rem here, it doesn't scale well with round()
$font-size-lg: 20px;
$gap-lg: 12px;
$icon-size-lg: 28px;
$margin-left-lg: -10px;

$scale-factor: 0.75;

.itemNetworks {
  --font-size: #{$font-size-lg};
  --gap: #{$gap-lg};
  --icon-size: #{$icon-size-lg};
  --margin-left: #{$margin-left-lg};
  display: flex;
  align-items: start;
  svg:not(:first-child) {
    margin-left: var(--margin-left);
  }

  svg {
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        z-index: 10 - $i;
      }
    }
  }
  svg {
    line-height: 0;
    width: var(--icon-size);
    height: var(--icon-size);
  }
}

.itemText {
  font-size: var(--font-size);
  color: $blackText;
}


//   &.sm {
//     --font-size: #{round($font-size-lg * $scale-factor)};
//     --gap: #{round($gap-lg * $scale-factor)};
//     --icon-size: #{round($icon-size-lg * $scale-factor)};
//     --margin-left: #{round($margin-left-lg * $scale-factor)};
//   }
//   &.reverse {
//     .item {
//       flex-direction: row-reverse;
//     }
//   }
