/* Official provider marks and canonical provider-button component for Studio W9.
   Self-hosted so identity controls do not depend on third-party image CDNs. */

.provider-group {
  display: grid;
  gap: var(--spacingHorizontalS);
}

.provider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalM);
  width: 100%;
  min-height: calc(var(--spacingHorizontalXXXL) + var(--spacingHorizontalL));
  padding: var(--spacingHorizontalM) var(--spacingHorizontalL);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightSemibold);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--durationFast) var(--curveEasyEase),
    border-color var(--durationFast) var(--curveEasyEase),
    transform var(--durationFast) var(--curveEasyEase);
}

.provider-group .provider-button:hover {
  border-color: var(--colorNeutralStrokeAccessible);
  background: var(--colorNeutralBackground1Hover);
  color: var(--colorNeutralForeground1);
  text-decoration: none;
}

.provider-group .provider-button:active {
  transform: translateY(var(--strokeWidthThin));
}

.provider-group .provider-button:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: var(--spacingHorizontalXS);
}
[data-auth-provider] {
  --w9-auth-provider-icon: none;
}

[data-auth-provider]::before {
  content: "";
  display: inline-block;
  width: var(--spacingHorizontalXL);
  height: var(--spacingHorizontalXL);
  flex: 0 0 var(--spacingHorizontalXL);
  background-image: var(--w9-auth-provider-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

[data-auth-provider="google"] {
  --w9-auth-provider-icon: url("/assets/auth/google.svg");
}

[data-auth-provider="microsoft"] {
  --w9-auth-provider-icon: url("/assets/auth/microsoft.svg");
}

[data-auth-provider="facebook"] {
  --w9-auth-provider-icon: url("/assets/auth/facebook.svg");
}

[data-auth-provider="email"] {
  --w9-auth-provider-icon: url("/assets/auth/email.svg");
}

[data-auth-provider="yahoo"] {
  --w9-auth-provider-icon: url("/assets/auth/yahoo.svg");
}

[data-auth-provider] .provider-mark {
  display: none;
}

.auth-provider-option[data-auth-provider] {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalS);
}

.auth-provider-option[data-auth-provider].auth-provider-pending {
  flex-wrap: wrap;
}

.auth-provider-option[data-auth-provider].auth-provider-pending .auth-provider-status {
  flex: 0 0 100%;
}