:host {
  font-family: var(--font-family-sans);
  font-weight: var(--font-rg);
}

:host div.wrapper {
  color: var(--gray800);
  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

z-button,
z-input {
  display: inline-block;
  width: 100%;
}

:host div.wrapper > z-divider {
  width: 100%;
  margin-bottom: calc(var(--space-unit) * 3);
}

:host div.wrapper > .signup-heading {
  font-size: var(--font-size-2);
  font-weight: var(--font-sb);
}

:host div.wrapper > div.signup z-button {
  display: inline-block;
  margin: calc(var(--space-unit) * 2) 0;
}

/* Tablet breakpoint */
@media only screen and (min-width: 768px) {
  z-button {
    width: initial;
  }

  :host social-login.modal-idp-login-form > div.social-providers > div.social-providers-container {
    flex-direction: column;
  }

  :host div.wrapper {
    width: 396px;
    padding: calc(var(--space-unit) * 3);
  }
}

/* Desktop breakpoint */
@media only screen and (min-width: 1152px) {
}

/* Wide breakpoint */
@media only screen and (min-width: 1366px) {
  :host div.wrapper {
    width: 477px;
    padding: calc(var(--space-unit) * 4);
  }
}