/** dark theme for connect button with white outline and dark fill */
:root {
  /**
   * to avoid redeclaring these values, add `class="manifold-scheme-dark"` to the widget/its ancestors.
   * values that are commented out exist in :root but do not affect the connect widget
   */
  --manifold-theme--color--primary: hsl(0deg, 0%, 100%);
  /* --manifold-theme--color--secondary: hsl(0deg, 0%, 10%); */
  /* --manifold-theme--color--success: hsl(120, 50%, 32%); */
  /* --manifold-theme--color--error: hsl(0, 50%, 32%); */
  /* --manifold-theme--color--warning: hsl(33, 52%, 41%); */
  /* --manifold-theme--color--info: hsl(234, 36%, 54%); */
  --manifold-text--color--primary: rgba(0, 0, 0, 1);
  /* --manifold-text--color--secondary: hsla(0deg, 0%, 79%, 1); */
  /* --manifold-text--color--muted: hsla(0, 0%, 100%, 0.6); */
  /* --manifold-text--color--disabled: hsla(0, 0%, 100%, 0.48); */
  --manifold-text--color--body: hsla(0deg, 0%, 100%, 0.87);
  /* default border color for manifold borders, but connect widget has its own rules */
  --manifold-border--color: hsl(0deg, 0%, 42%);
  --manifold-page--color--background: hsl(0deg, 0%, 7%);
  /* --manifold-element--color--background: hsl(0deg, 0%, 20%); */

  /* setting background color here so connect widget is visible */
  background-color: var(--manifold-page--color--background);
}

#m-connection {
  /* uncomment to change values */
  /* --manifold-border--style: solid; */
  /* --manifold-border--color: var(--manifold-text--color--body); */

  /* overrides for text */
  --manifold-text--color--body: white;
  --manifold-text--font-size--body: 11px;

  /* overrides for border style */
  --manifold-border--width: 2px;
  --manifold-border--radius: 30px;
  --manifold-element--color--background: hsla(0, 0%, 0%, 80%);

  pointer-events: auto;
  position: absolute;
  top: 40px;
  right: 40px;
  height: auto;
  width: 180px;
  background-color: transparent;
}

#m-connection button {
  display: block;
  width: 100%;
  height: 60px;
  text-transform: uppercase;
  transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
}

#m-connection button:hover {
  /* hover by default shifts to the primary theme + text color, but we want custom behaviour here */
  background: hsla(0, 0%, 100%, 0.8);
  color: black;
}

@media screen and (max-width: 520px) {
  #m-connection {
    top: 25px;
    right: 25px;
    height: auto;
    width: 130px;
  }
}