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

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

$scale-factor: 0.75;

.wrapper {
  --font-size: #{$font-size-lg};
  --gap: #{$gap-lg};
  --icon-size: #{$icon-size-lg};
  --margin-left: #{$margin-left-lg};

  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gap);

  .item {
    display: flex;
    gap: var(--gap);
    align-items: center;
    justify-content: flex-end;

    .itemNetworks {
      display: flex;

      svg:not(:first-child) {
        margin-left: var(--margin-left);
      }

      svg {
        @for $i from 1 through 10 {
          &:nth-child(#{$i}) {
            z-index: 10 - $i;
          }
        }
      }
    }

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

    svg {
      line-height: 0;
      width: var(--icon-size);
      height: var(--icon-size);
    }
  }

  &.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;
    }
  }
}
