/* web/themes/custom/awtur/css/components/social-sign-in.css */

.account-social-sign-in {
  margin-block: clamp(0.5rem, 2vw, 1rem) 0;
}

.account-social-sign-in .account-social-sign-in__button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #fff;
  color: #1f1f1f;
  font-family: 'Google Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.account-social-sign-in__button img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
}

.account-social-sign-in .account-social-sign-in__button:hover {
  background: #f8faff;
  box-shadow: 0 1px 3px #3c404326;
  color: #1f1f1f;
  text-decoration: none;
}

.account-social-sign-in__button:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}

.account-social-sign-in__separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: clamp(1rem, 3vw, 1.5rem);
  color: #666;
  font-size: 0.875rem;
}

.account-social-sign-in__separator::before,
.account-social-sign-in__separator::after {
  content: '';
  flex: 1;
  border-block-start: 1px solid #ddd;
}

.account-social-sign-in__providers {
  display: grid;
  gap: clamp(0.5rem, 2vw, 0.75rem);
}