/* container */
.trt-soc{display:flex;flex-wrap:wrap}

/* sizes */
.trt-soc--sm .trt-soc__btn{height:34px;font-size:13px;border-radius:8px;padding:0 10px}
.trt-soc--md .trt-soc__btn{height:40px;font-size:14px;border-radius:10px;padding:0 12px}
.trt-soc--lg .trt-soc__btn{height:46px;font-size:16px;border-radius:12px;padding:0 14px}

/* base button */
.trt-soc__btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;line-height:1}
.trt-soc__btn i{width:18px;text-align:center}

/* brand solid style (like your 2nd screenshot) */
.trt-soc--brand .trt-soc__btn{color:#fff}
.trt-soc--brand .trt-soc__btn--facebook{background:#1877F2}
.trt-soc--brand .trt-soc__btn--twitter{background:#8b5cf6}     /* purple like your sample */
.trt-soc--brand .trt-soc__btn--pinterest{background:#E60023}
.trt-soc--brand .trt-soc__btn--linkedin{background:#0A66C2}
.trt-soc--brand .trt-soc__btn--instagram{background:#E1306C}
.trt-soc--brand .trt-soc__btn--youtube{background:#FF0000}
.trt-soc--brand .trt-soc__btn--tiktok{background:#000}
.trt-soc--brand .trt-soc__btn--github{background:#24292e}
.trt-soc--brand .trt-soc__btn--dribbble{background:#EA4C89}
.trt-soc--brand .trt-soc__btn--behance{background:#1769FF}
.trt-soc--brand .trt-soc__btn--other{background:#0a3dff}
.trt-soc--brand .trt-soc__btn:hover{filter:brightness(.92)}

/* optional alt styles */
.trt-soc--icon .trt-soc__btn{width:38px;justify-content:center;border:1px solid #e6e8ef;background:#fff;color:#0b1b3f}
.trt-soc--icon .trt-soc__btn:hover{background:#0a3dff;color:#fff;border-color:#0a3dff}
.trt-soc--ghost .trt-soc__btn{border:1px solid #d7dbe3;background:#fff;color:#0b1b3f}
.trt-soc--text  .trt-soc__btn{color:#0b1b3f}