/* ==UserStyle==
@name           ●→■ Unround Everything Everywhere ◙
@description    Forces zero border-radius to everything.
@namespace      myfonj
@version        1.2.4
@license        CC0 - Public Domain
@downloadURL none
==/UserStyle== */
/*
https://userstyles.world/style/8283/unround-everything-everywhere
https://greasyfork.org/en/scripts/408378/versions/new

Changelog
1.2.4 (2023-09-06) + outline offset
1.2.3 (2023-09-06) Facebook avar status outlines squared.
1.2.2 (2023-02-22) Fix the Facebook logo. Mwahahaha.
1.2.1 (2023-02-02) Let's try to let true radio inputs be round.
1.2.0 (2023-01-24) Just released to userstyles.world, reworded comments.
*/

/*
Global and aggresive
*/
*:not(#\0):not(#\1):not(#\2):not(input[type="radio" i]),
*:not(#\0):not(#\1):not(#\2)::before,
*:not(#\0):not(#\1):not(#\2)::after {
  border-radius: 0 !important;
}

/*
Firefox on Windows bug: touching any border property
reverts "fancy" modern thin 1px borders
to "ugly" retro old 3px outset look.

This is an attempt to circumnvent it by setting it back to 1px
at lowest possible specifity, so any (unlayered) author declaration wins over this.

Using :where() here is insufficient, because this this "wannabe userstyle" is injected as
the last author style, so it would win over prior `*` declarations anyway.
*/
@layer i_miss_true_user_origin_level_stylesheets {
  input, button, select {
    border-width: 1px;
  }
}

/*
FB & Workplace extra fixes
*/
:root#facebook svg[role] > mask[id]:first-child + g[mask]:last-child {
	 mask: none !important;
}
/* circle outline, some status perhaps */
:root#facebook svg[role] > mask[id]:first-child + g[mask]:last-child circle {
  opacity: 0.1 !important;
}
/* circle outline to real outline */
:root#facebook svg[role] > mask[id]:first-child + g[mask]:last-child image:has(~ circle[stroke="var(--accent)"]) {
  & {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
  }
  & ~ circle {
   display: none;
  }
}


@-moz-document domain("facebook.com") {
  /*
   logo - circle to square
   original path is circle with tiny notch on the bottom that lets (curved!) bottom edge of "f" be pushed up
   presumably because otherwise it could be percieved as "sticing out" of the circle due white-blue contrast
  */
  :root#facebook svg[viewBox="0 0 36 36"] path[d="M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z"] {
    d: path("M0 0 H 36 V 36 H 0 z");
  }
  /*
   logo - "f" not curved on the bottom
   this removes the bottom curvature (v12.7c1 .2 2 .3 3 .3s2-.1 3-.3) and sticks it (almost) to viewbox bondary.
   (1px -- V–instead of V 36 -- difference to prevent aforementioned perceptual overhang.)
   I guess this is the most nitpick-ish thing I have ever done.
  */
  :root#facebook svg[viewBox="0 0 36 36"] path[d="M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"] {
    d: path("M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15   V 35 h 6    V23h4z");
  }
}

/*
Twitter extra fixes
*/
@-moz-document domain("twitter.com") {
  [style*='clip-path: url("#circle-hw-shapeclip-clipconfig")'] {
    clip-path: none !important;
  }

/*
<div class="css-1dbjc4n r-1awozwy r-1p0dtai r-1777fci r-1d2f490 r-633pao r-u8s1d r-zchlnj r-ipm5af">
 <div aria-valuemax="1" aria-valuemin="0" role="progressbar" class="css-1dbjc4n r-1awozwy r-1777fci">
  <div class="css-1dbjc4n r-17bb2tj r-1muvv40 r-127358a r-1ldzwu0" style="height: 60px; width: 60px;">
   <svg height="100%" viewBox="0 0 32 32" width="100%">
    <circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke: rgb(255, 255, 255); opacity: 0.2;"></circle>
    <circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke: rgb(255, 255, 255); stroke-dasharray: 80px; stroke-dashoffset: 60px;"></circle>
   </svg>
  </div>
 </div>
</div> 
*/

}

/*
WhatsApp extra fixes
*/
@-moz-document domain("web.whatsapp.com") {
 svg:has(path.background) {
  background-color: rgba(var(--white-rgb),.16);
 }
 svg:has(path.background) g path{
  opacity: .3;
 } 
 svg:has(path.background) path.background {
  display: none
 }
}