/* vim: set ts=2 sw=2 sts=2 et: */

/**
 * Copyright (c) 2001-present X-Cart Holdings LLC. All rights reserved.
 * See https://www.x-cart.com/license-agreement.html for license details.
 */

:root {
  --social-login-apple-icon-color: #000;

  --social-login-paypal-circle-color: #042F8B;
  --social-login-paypal-checkmark-color: #003087;
  --social-login-paypal-foreground-letter-color: #012D8A;
  --social-login-paypal-background-letter-color: #019AE0;
  --social-login-paypal-letters-crossing-color: #001F6B;
}

[data-theme='dark'] {
  --social-login-apple-icon-color: #FFF;

  --social-login-paypal-circle-color: #FFF;
  --social-login-paypal-checkmark-color: #FFF;
  --social-login-paypal-foreground-letter-color: #FFF;
  --social-login-paypal-background-letter-color: #E4E4E4;
  --social-login-paypal-letters-crossing-color: #D9D9D9;
}

.widget-authorization, .widget-accountdialog {
  flex-direction: column;
}

.widget-authorization .social-block,
.widget-accountdialog .social-block {
  max-width: 400px;
  margin: 0 auto;
}

.social-block {
  display: flex;
  flex-direction: column;
  row-gap: var(--rhythmic-unit);
  width: 100%;
  align-items: center;
  position: relative;
}

.social-block:not(:last-child) {
  margin-bottom: var(--rhythmic-unit);
}

.social-btn__container {
  width: 100%;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--rhythmic-unit) / 2) calc(1.5 * var(--rhythmic-unit));
  border: var(--thick-border-base) solid var(--color-link);
  column-gap: calc(var(--rhythmic-unit) / 2);
  font-size: var(--font-size-big);
  font-weight: 600;
  line-height: var(--line-height-small);
  transition: var(--mode-transition) border-color;
  min-height: calc(3.5 * var(--rhythmic-unit));
  border-radius: var(--btn-border-radius);
}

.social-btn, .social-btn:link, .social-btn:visited, .social-btn:hover, .social-btn:focus, .social-btn:active {
  text-decoration: none;
}

.social-btn__icon {
  width: calc(1.5 * var(--rhythmic-unit));
  height: auto;
}

.social-block__line {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.social-block__line:before {
  content: '';
  position: absolute;
  top: 50%;
  height: var(--border-base);
  left: 0;
  right: 0;
  background: var(--color-lines);
  transition: var(--mode-transition) background-color;
}

.social-block__line-text {
  font-size: var(--font-size-small);
  line-height: 1;
  padding: 0 calc(1.5 * var(--rhythmic-unit));
  background: var(--body-bg);
  position: relative;
  transition: var(--mode-transition) background-color;
}

.ui-dialog .social-block__line-text {
  background: var(--popup-bg);
}

.social-net-Apple svg {
  color: var(--social-login-apple-icon-color);
  transition: var(--mode-transition) color;
}

.social-net-PayPal svg path {
  transition: var(--mode-transition) fill;
}

.social-net-PayPal svg .paypal-icon__circle {
  fill: var(--social-login-paypal-circle-color);
}

.social-net-PayPal svg .paypal-icon__checkmark {
  fill: var(--social-login-paypal-checkmark-color);
}

.social-net-PayPal svg .paypal-icon__foreground-letter {
  fill: var(--social-login-paypal-foreground-letter-color);
}

.social-net-PayPal svg .paypal-icon__background-letter {
  fill: var(--social-login-paypal-background-letter-color);
}

.social-net-PayPal svg .paypal-icon__letters-crossing {
  fill: var(--social-login-paypal-letters-crossing-color);
}

.social-net-Amazon > .social-btn {
  width: 100% !important;
  border: none;
}

/* Hide social block in case it includes only empty block for Amazon Pay button */
.social-block:has(.lwa-popup-mode:empty:first-child + .social-block__line) {
  display: none;
}

.social-block:has(.social-block__line:first-child) {
  display: none;
}