.fm-share-buttons {
  --fm-sb-bg: transparent;
  --fm-sb-hover-bg: transparent;
  display: flex;
  align-items: center;
  gap: var(--fm-sb-gap, 20px);
}

.fm-share-buttons--align-left   { justify-content: flex-start; }
.fm-share-buttons--align-center { justify-content: center; }
.fm-share-buttons--align-right  { justify-content: flex-end; }

.fm-share-btn {
  background-color: var(--fm-sb-bg);
  transition: background-color 0.15s ease;
  width: var(--fm-sb-btn-size, 50px);
  height: var(--fm-sb-btn-size, 50px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.fm-share-btn:hover {
  background-color: var(--fm-sb-hover-bg) !important;
}

.fm-share-btn__icon svg {
  max-width: var(--fm-sb-icon-size, 24px);
  max-height: var(--fm-sb-icon-size, 24px);
  height: var(--fm-sb-icon-size, 24px);
  width: var(--fm-sb-icon-size, 24px);
  object-fit: contain;
}

.fm-share-btn svg path,
.fm-share-btn svg circle,
.fm-share-btn svg rect,
.fm-share-btn svg polygon {
  fill: var(--fm-sb-icon-color, currentColor);
}

.fm-share-btn:hover svg path,
.fm-share-btn:hover svg circle,
.fm-share-btn:hover svg rect,
.fm-share-btn:hover svg polygon {
  fill: var(--fm-sb-hover-icon-color, var(--fm-sb-icon-color, currentColor));
}

.fm-share-buttons--has-bg .fm-share-btn svg path,
.fm-share-buttons--has-bg .fm-share-btn svg circle,
.fm-share-buttons--has-bg .fm-share-btn svg rect,
.fm-share-buttons--has-bg .fm-share-btn svg polygon {
  fill: var(--fm-sb-icon-color, #fff);
}

.fm-share-buttons--has-bg .fm-share-btn:hover svg path,
.fm-share-buttons--has-bg .fm-share-btn:hover svg circle,
.fm-share-buttons--has-bg .fm-share-btn:hover svg rect,
.fm-share-buttons--has-bg .fm-share-btn:hover svg polygon {
  fill: var(--fm-sb-hover-icon-color, var(--fm-sb-icon-color, #fff));
}