/* Rebrand Plane's "Sign in with Gitea" OAuth button as Microsoft.
   Targets Plane's own markup (packages/ui/src/oauth/oauth-button.tsx):
     <button><div><img alt="Gitea Logo"></div><span>Sign in with Gitea</span></button>
   Pure CSS: React's DOM is never touched, so there is nothing to fight and
   nothing to break on re-render. If Plane ever changes the alt text, these
   rules simply stop applying — the button keeps working, just unbranded. */

/* 1. Hide Gitea's logo, draw Microsoft's in its place */
button:has(img[alt="Gitea Logo"]) > div > img {
  display: none !important;
}
button:has(img[alt="Gitea Logo"]) > div::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'><rect x='1' y='1' width='10' height='10' fill='%23F25022'/><rect x='12' y='1' width='10' height='10' fill='%237FBA00'/><rect x='1' y='12' width='10' height='10' fill='%2300A4EF'/><rect x='12' y='12' width='10' height='10' fill='%23FFB900'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 2. Swap the label */
button:has(img[alt="Gitea Logo"]) > span {
  font-size: 0 !important;
}
button:has(img[alt="Gitea Logo"]) > span::after {
  content: "Sign in with Microsoft";
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* 3. Compact variant (icon only, no <span>) still gets the right logo */
button:has(img[alt="Gitea Logo"]):not(:has(span)) > div::after {
  width: 18px;
  height: 18px;
}