:root{
  --slb-size: 32px;
  --slb-gap: 8px;
}
.slb-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:var(--slb-gap);
  align-items:center;
  margin: 0.5em 0;
}
.slb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width: var(--slb-size);
  height: var(--slb-size);
  text-decoration:none;
  line-height:1;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
  font-weight:600;
  padding: 0 10px;
  box-sizing: border-box;
}
.slb-btn:hover{ transform: translateY(-1px); }
.slb-ic{ width: 60%; height: 60%; display:block; }
.slb-text{ font-size: 0.9rem; line-height:1; }

/* shapes */
.slb-shape--circle .slb-btn{ border-radius: 9999px; }
.slb-shape--rounded .slb-btn{ border-radius: 10px; }
.slb-shape--square  .slb-btn{ border-radius: 0; }

/* label modes */
.slb-buttons .slb-btn .slb-text{ display:none; }
.slb-buttons .slb-btn .slb-icon + .slb-text{ display:inline; }
.slb-theme--brand .slb-btn{ color:#fff; }
.slb-theme--mono-dark .slb-btn{ background:#222; color:#fff; }
.slb-theme--mono-light .slb-btn{ background:#eee; color:#111; }

/* size-aware padding for text mode */
.slb-buttons .slb-btn .slb-text{ padding:0 2px; }
.slb-buttons .slb-btn svg{ fill: currentColor; }

/* brand colors (background) */
.slb-theme--brand .slb-x{ background:#111; }
.slb-theme--brand .slb-facebook{ background:#1877f2; }
.slb-theme--brand .slb-instagram{ background:#d6249f; }
.slb-theme--brand .slb-line{ background:#06c755; }
.slb-theme--brand .slb-youtube{ background:#ff0000; }
.slb-theme--brand .slb-tiktok{ background:#000; }
.slb-theme--brand .slb-threads{ background:#000; }
.slb-theme--brand .slb-linkedin{ background:#0a66c2; }
.slb-theme--brand .slb-pixiv{ background:#0096fa; }

/* when label=text or both, widen buttons */
.slb-buttons .slb-btn .slb-text{ display:inline-block; }
.slb-buttons .slb-btn .slb-ic{ min-width: 18px; }

/* allow icon-only mode to center perfectly */
.slb-buttons .slb-btn .slb-text:empty{ display:none; }