.ledyer-switch-container {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem 0;
}
.ledyer-switch-container.loading::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}
.ledyer-switch-container.loading .switch-spinner {
  display: block !important;
}
.ledyer-switch-container .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ledyer-switch-container #customer-type-private,
.ledyer-switch-container #customer-type-business {
  text-decoration: none;
  outline: none;
  display: grid;
  place-items: center;
  flex-grow: 1;
  border: 1px solid #bdbdbd;
  color: #aaa;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  transition:
    all 0.3s ease,
    outline 0s;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.3;
  height: 48px;
}

@media (max-width: 768px) {
  .ledyer-switch-container #customer-type-private,
  .ledyer-switch-container #customer-type-business {
    font-size: 14px;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.ledyer-switch-container #customer-type-private.active,
.ledyer-switch-container #customer-type-business.active {
  background-color: black;
  border-color: black;
  color: white;
}

/* hide the button built in with ledyer checkout */
#ledyer-checkout-select-other {
  display: none !important;
}

.ledyer-switch-container .switch-spinner {
  display: none;
  z-index: 2;
  position: absolute;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid black;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }
  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }
  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}
@keyframes l20-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}