/* File: assets/gl-styles.css */

.gl-button-container {
  width: 100%;
  max-width: 300px;
}

#google-login-button,
#google-register-button {
  width: 100%;
}

.gl-button-container > div {
  display: flex;
}

/* Debug output styling */
#gl-debug-output {
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 13px;
  color: #333;
  margin-top: 10px;
}
/* 1) The wrapper around Google’s rendered button */
.gl-button-wrapper {
  position: relative;
  display: flex;
}

/* 2) A transparent overlay that catches clicks */
.gl-button-overlay {
    position: absolute;
    top: 0; left: 0;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    height: 44px;
    width: 218px;
}

/* 3) Modifier classes so you can flip between “login” & “register” modes */
.gl-login-mode  .gl-button-overlay { /* in login mode */ }
.gl-register-mode .gl-button-overlay { /* in register mode */ }