// Since this style is injected inside the shadow DOM, use this to reset any
// parent styles.
:host {
  all: initial;
}

@import "bootstrap/scss/bootstrap";
@import "_shared";

// The root container for all other elements. Since we don't have a way to
// target the root of the shadow DOM itself, we need some sort of wrapper like
// this to apply base styles.
.app-style-root {
  // Use bootstrap's "body" styles for defining our own root container inside
  // the shadow DOM.
  @extend :root;
  @extend body;

  background-color: transparent;
}

pre {
  background-color: $light;
  border-radius: 0.25rem;
  border: 1px solid $border-color;
  padding: 0.25rem 0.5rem;
}

.signup-key {
  font-size: 1.5rem;
  display: inline-block;
  font-weight: bold;
  margin-bottom: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  color: $code-color;
}

pre.signup-example {
  white-space: pre-wrap;
}

.signup-footer {
  margin-top: 2rem;
  font-size: 12px;
  background-color: #f5f5f5;
  color: #555;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.signup-footer p {
  color: #555;
  margin-bottom: 0.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.recaptcha-notice {
  margin-top: 1rem;
  text-align: right;
  font-size: 0.7rem;
  color: #767676;
}
