.sociallogin {
  margin: 1.25rem 0;
}

.sociallogin__buttons {
  display: grid;
  gap: .625rem;
}

.sociallogin__button {
  align-items: center;
  background: #fff;
  border: 1px solid #e3dfe0;
  border-radius: .5rem;
  color: #292526;
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  gap: .75rem;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sociallogin__button:hover,
.sociallogin__button:focus-visible {
  background: #fff7f8;
  border-color: #e07a8b;
  box-shadow: 0 0 0 .15rem rgba(224, 122, 139, .12);
  color: #292526;
  text-decoration: none;
}

.sociallogin__icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
}

.sociallogin__button--google .sociallogin__icon { color: #4285f4; }
.sociallogin__button--apple .sociallogin__icon { color: #111; font-size: 1.4rem; }
.sociallogin__button--facebook .sociallogin__icon { background: #1877f2; border-radius: 50%; color: #fff; font-family: Arial, sans-serif; }
.sociallogin__button--tiktok .sociallogin__icon { color: #111; }

.sociallogin__divider {
  align-items: center;
  color: #6d6869;
  display: flex;
  font-size: .875rem;
  gap: .75rem;
  margin: 1.25rem 0;
  text-align: center;
}

.sociallogin__divider::before,
.sociallogin__divider::after {
  background: #e3dfe0;
  content: '';
  flex: 1 1 auto;
  height: 1px;
}

.sociallogin__message {
  border-radius: .5rem;
  font-size: .875rem;
  margin-bottom: .75rem;
  padding: .75rem 1rem;
}

.sociallogin__message--info { background: #fff7f8; color: #6b5057; }
.sociallogin__message--error { background: #fff0f2; color: #9f3f50; }

@media (min-width: 768px) {
  .sociallogin__buttons { gap: .75rem; }
}