/* From Uiverse.io by 0xnihilism; adapted for the Arabic university login. */
.brutalist-button {
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:60px;padding:10px 15px;margin:10px 0 24px;box-sizing:border-box;
  background:#000;color:#fff;cursor:pointer;font:700 16px var(--sans);
  border:3px solid #fff;outline:3px solid #000;border-radius:0;
  box-shadow:6px 6px 0 #878787;position:relative;overflow:hidden;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.brutalist-button::before {
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,#ffffffcc,transparent);
  opacity:0;pointer-events:none;
}
.brutalist-button:hover {transform:translate(-4px,-4px);box-shadow:10px 10px 0 #878787;}
.brutalist-button:hover::before {animation:microsoft-button-slide .65s ease-out;}
@keyframes microsoft-button-slide {
  0% {transform:translateX(-100%);opacity:0;}
  15%,85% {opacity:.65;}
  100% {transform:translateX(100%);opacity:0;}
}
.brutalist-button:active {transform:translate(4px,4px);box-shadow:none;background:#fff;color:#000;border-color:#000;}
.brutalist-button:focus-visible {outline:3px solid #878787;outline-offset:5px;}
.brutalist-button .ms-logo {display:grid;grid-template-columns:repeat(2,1fr);gap:1px;width:26px;height:26px;flex-shrink:0;direction:ltr;position:relative;transition:transform .2s;}
.brutalist-button .ms-logo-square:nth-child(1) {background:#f25022;}
.brutalist-button .ms-logo-square:nth-child(2) {background:#7fba00;}
.brutalist-button .ms-logo-square:nth-child(3) {background:#878787;}
.brutalist-button .ms-logo-square:nth-child(4) {background:#ffb900;}
.brutalist-button .button-text {display:flex;flex-direction:column;line-height:1.4;position:relative;transition:transform .2s;}
.brutalist-button .button-text span:first-child {font-size:12px;}
.brutalist-button .button-text span:last-child {font-size:16px;direction:ltr;}
.brutalist-button:hover .ms-logo {transform:rotate(-10deg) scale(1.1);}
.brutalist-button:hover .button-text {transform:skew(-5deg);}
.brutalist-button:active .ms-logo {transform:rotate(10deg) scale(.9);}
.auth-login-hint {font-size:11px;line-height:1.7;color:var(--text-dim);margin:-6px 0 12px;}
@media(prefers-reduced-motion:reduce) {
  .brutalist-button,.brutalist-button * {transition:none!important;}
  .brutalist-button:hover::before {animation:none;opacity:0;}
  .brutalist-button:hover,.brutalist-button:active,.brutalist-button:hover *,.brutalist-button:active * {transform:none;}
}