/*
 * Social sign-in buttons.
 *
 * ENG-7686 replaced the `bootstrap-social` npm package (v5.1.1). That package declared
 * `bootstrap@3.4.1` as a dependency, which was the last thing pulling a pre-5 Bootstrap into the
 * project -- its CSS never needed Bootstrap 3 at runtime, but the dependency kept a second
 * Bootstrap in node_modules and in pnpm-lock.yaml.
 *
 * This is a from-scratch Bootstrap 5 implementation of only the classes the repo actually uses:
 * `.btn-social`, `.btn-social-icon`, and the four brands (`.btn-facebook`, `.btn-twitter`,
 * `.btn-linkedin`, `.btn-google`). The upstream file shipped 20+ brands and BS3-era
 * compound selectors (`.open > .dropdown-toggle`, `fieldset[disabled]`) that mean nothing here.
 *
 * Brands are expressed as Bootstrap 5 button variants -- they set the `--bs-btn-*` custom
 * properties that `.btn` already reads -- rather than as flat `background-color` overrides. That
 * is what makes hover, :active, :focus-visible and :disabled behave like every other BS5 button
 * without restating each state, and it is why these must be used together with `.btn`.
 *
 * Raw hex is correct here: these are external brand colors, not design-system values, so they do
 * not belong in the `--sp-*` token files. (vuejs/DESIGN_SYSTEM.md governs product color; the
 * design-token pre-commit hook scopes itself to vuejs/ for exactly this reason.)
 *
 * Geometry is carried over from the upstream file so the buttons keep their proportions: the
 * first child is pulled into a fixed icon slot on the left, with the label padded clear of it.
 */

.btn-social,
.btn-social-icon {
  position: relative;
  padding-left: 44px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-social > :first-child,
.btn-social-icon > :first-child {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  line-height: 34px;
  font-size: 1.6em;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-social.btn-lg {
  padding-left: 61px;
}

.btn-social.btn-lg > :first-child {
  line-height: 45px;
  width: 45px;
  font-size: 1.8em;
}

.btn-social.btn-sm {
  padding-left: 38px;
}

.btn-social.btn-sm > :first-child {
  line-height: 28px;
  width: 28px;
  font-size: 1.4em;
}

/* Icon-only: a square button whose icon slot is the whole control. */
.btn-social-icon {
  height: 34px;
  width: 34px;
  padding: 0;
}

.btn-social-icon > :first-child {
  border: none;
  text-align: center;
  width: 100%;
}

.btn-social-icon.btn-lg {
  height: 45px;
  width: 45px;
  padding-left: 0;
  padding-right: 0;
}

.btn-social-icon.btn-sm {
  height: 30px;
  width: 30px;
  padding-left: 0;
  padding-right: 0;
}

/*
 * Brand variants. --bs-btn-focus-shadow-rgb is the brand color in r,g,b so the focus ring matches
 * the button instead of falling back to Bootstrap's default blue.
 */
.btn-facebook {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3b5998;
  --bs-btn-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2d4373;
  --bs-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2d4373;
  --bs-btn-active-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3b5998;
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-focus-shadow-rgb: 59, 89, 152;
}

.btn-twitter {
  --bs-btn-color: #fff;
  --bs-btn-bg: #55acee;
  --bs-btn-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2795e9;
  --bs-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2795e9;
  --bs-btn-active-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #55acee;
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-focus-shadow-rgb: 85, 172, 238;
}

.btn-linkedin {
  --bs-btn-color: #fff;
  --bs-btn-bg: #007bb6;
  --bs-btn-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #005983;
  --bs-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #005983;
  --bs-btn-active-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #007bb6;
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-focus-shadow-rgb: 0, 123, 182;
}

/*
 * `.btn-google`, the name bootstrap-social used. (A `.btn-google-plus` alias existed for
 * user_settings_oauth.html, the one page that used it; that page was deleted as unreachable in
 * ENG-8920, so the alias went with it.)
 */
.btn-google {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dd4b39;
  --bs-btn-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c23321;
  --bs-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c23321;
  --bs-btn-active-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dd4b39;
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-focus-shadow-rgb: 221, 75, 57;
}