/*
 * Theme behaviour for Simple Follow Buttons.
 *
 * The ShareThis themes were written for an icon font, so they colour the glyph
 * through the `color` property and expect a rule per network to supply each
 * brand colour. We inline two custom properties on every button instead
 * (--sfb-color, the brand colour; --sfb-icon, a version of it that stays
 * readable on a light button), which lets one stylesheet cover all 51 networks.
 *
 * Selectors are prefixed with .sfb so they out-specify the theme files
 * regardless of the order the stylesheets load in.
 */

/* The themes were written for an icon font and still carry :before glyph rules.
   We inline SVG instead, so the pseudo-element would draw a second icon on top
   of ours wherever the old font happens to have that network. */
.sfb .ssbp-btn::before {
	content: none !important;
}

/* Size the inlined icon. This needs !important because theme 10 sets
   `height: unset !important` and adds vertical padding for the font layout. */
.sfb .ssbp-btn svg {
	width: var(--sfb-icon-size, 24px) !important;
	height: var(--sfb-icon-size, 24px) !important;
	padding: 0 !important;
	position: static;
	transform: none;
	flex: none;
}

/* the glyph follows the button's text colour, whatever the theme sets it to.
   fill="none" is a cut-out, so it is left alone */
.sfb .ssbp-btn svg,
.sfb .ssbp-btn svg *:not([fill="none"]) {
	fill: currentColor;
}

.sfb .ssbp-btn {
	color: #fff;
	transition: background-color .25s, color .25s, border-color .25s;
}

/* --- themes that put the icon on a light button ------------------------- */
/* buttons.css forces these transparent, so the icon and border carry the
   network colour instead of sitting invisibly white on white */
.sfb.ssbp--theme-6 .ssbp-btn,
.sfb.ssbp--theme-7 .ssbp-btn,
.sfb.ssbp--theme-8 .ssbp-btn,
.sfb.ssbp--theme-9 .ssbp-btn {
	color: var(--sfb-icon);
}

.sfb.ssbp--theme-6 .ssbp-btn,
.sfb.ssbp--theme-7 .ssbp-btn {
	border-color: currentColor;
}

/* --- hover ------------------------------------------------------------- */
/* theme 1 inverts to a white button, so the glyph has to darken with it */
.sfb.ssbp--theme-1 .ssbp-btn:hover,
.sfb.ssbp--theme-1 .ssbp-btn:focus {
	color: var(--sfb-icon);
}

/* the light themes fill in on hover */
.sfb.ssbp--theme-6 .ssbp-btn:hover,
.sfb.ssbp--theme-6 .ssbp-btn:focus,
.sfb.ssbp--theme-7 .ssbp-btn:hover,
.sfb.ssbp--theme-7 .ssbp-btn:focus {
	background-color: var(--sfb-color) !important;
	border-color: var(--sfb-color);
	color: #fff;
}

/* Themes 6, 7 and 9 hide the plain icon because the original markup carried a
   second, brand-coloured copy in a .color-icon span. We render one icon and
   colour it with CSS, so it must stay visible. */
.sfb .ssbp-btn .sfb-icon svg {
	display: block !important;
}

/* --- the name, shown by themes 3, 7 and 11 ------------------------------ */
/* 3 and 7 print the name under the button. The label is absolutely positioned,
   so it cannot widen its own column - instead the column gets a fixed pitch and
   the label is bounded to it and allowed to wrap, which keeps long names like
   "Stack Overflow" from running into the next button. */
.sfb.ssbp--theme-3 .ssbp-list li,
.sfb.ssbp--theme-7 .ssbp-list li {
	/* 3.css sets `margin: 0 !important` on its list items */
	margin-right: 2.4em !important;
	margin-bottom: 30px !important;
}

.sfb.ssbp--theme-3 .ssbp-btn .ssbp-text,
.sfb.ssbp--theme-7 .ssbp-btn .ssbp-text {
	/* the label sits on the page, not on the button, so it takes the readable
	   brand colour rather than the button's white */
	color: var(--sfb-icon);
	text-shadow: none;
	/* the left/right pair already centres the label over its button, so the
	   theme's own translateX(-50%) and margin would shift it off again */
	left: -1.1em !important;
	right: -1.1em !important;
	width: auto !important;
	transform: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	white-space: normal;
	line-height: 1.15;
	text-align: center;
}

/* 11 puts the name inside the button, so that one does grow with its label */
.sfb.ssbp--theme-11 .ssbp-btn {
	width: auto !important;
	padding: 0 .9em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
}

.sfb.ssbp--theme-11 .ssbp-text {
	margin-left: 0;
}

.sfb .ssbp-text {
	white-space: nowrap;
}

/* The icon sits on the text baseline otherwise, which pushes it low in every
   theme and to the right in the ones that add a label. Filling the button and
   centring inside it is independent of line-height and font metrics. */
.sfb .ssbp-btn .sfb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* theme 11 sets the icon beside its label, so there it sizes to content */
.sfb.ssbp--theme-11 .ssbp-btn .sfb-icon {
	width: auto;
	height: auto;
}