.login-card {
  max-width: 30rem;
  padding: 2.5rem;
  background-color: var(--addgene-gray-0);
  border-radius: var(--addgene-large-panel-border-radius);

  .addgene-icon {
    width: 1.8rem;
    height: 1.8rem;
    background: url('../assets/images/icons/addgene-icon-white.svg') no-repeat center / contain;
  }

  .google-icon {
    width: 2rem;
    height: 2rem;
    background: url('../vendor/google-icon.svg') no-repeat center / contain;
  }
}

.addgene-provider-btn,
.google-provider-btn {
  min-height: 4.375rem;
}

.addgene-provider-btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--addgene-blue);
  --bs-btn-border-color: var(--addgene-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--addgene-dark-blue);
  --bs-btn-hover-border-color: var(--addgene-dark-blue);
}

.google-provider-btn {
  --bs-btn-color: var(--addgene-gray);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--addgene-gray);
  --bs-btn-hover-color: var(--addgene-gray);
  --bs-btn-hover-bg: var(--addgene-gray-0);
  --bs-btn-hover-border-color: var(--addgene-gray);
}

.btn-separator {
  margin: 1.8rem 0;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 999px;
    height: 1px;
    background: var(--addgene-border-gray-1);
  }

  &::before {
    right: 100%;
    margin-right: 15px;
  }

  &::after {
    left: 100%;
    margin-left: 15px;
  }
}