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

/**
 * X-Payments Cloud - Checkout With Apple Pay Styles
 *
 * Copyright (c) 2011-present Qualiteam software Ltd. All rights reserved.
 * See https://www.x-cart.com/license-agreement.html for license details.
 */

.apple-pay-button {
  width: 100%;
  height: 36px;
}

@supports (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-style: black;
  }
  .apple-pay-checkout-button {
    -apple-pay-button-type: check-out;
  }
  .apple-pay-buy-button {
    -apple-pay-button-type: buy;
  }
  .apple-pay-button > * {
    display: none;
  }
  .apple-pay-button-white {
    -apple-pay-button-style: white;
  }
  .apple-pay-button-white-with-line {
    -apple-pay-button-style: white-outline;
  }
}

@supports not (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button {
    --apple-pay-scale: 1; /* (height / 32) */
    display: inline-flex;
    width: 100%;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    padding: 0px;
    box-sizing: border-box;
    min-width: 200px;
    min-height: 32px;
    max-height: 64px;
    background-color: black;
    color: white;
  }
  .apple-pay-button-white {
    background-color: white;
    color: black;
  }
  .apple-pay-button-white-with-line {
    background-color: white;
    color: black;
    border: .5px solid black;
  }
  .apple-pay-button > .logo {
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
  }
  .apple-pay-button.apple-pay-button-white > .logo {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
  }
  .apple-pay-button.apple-pay-button-white-with-line > .logo {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
  }
  .apple-pay-button > .text {
    font-family: -apple-system;
    font-size: calc(1em * var(--apple-pay-scale));
    font-weight: 300;
    align-self: center;
    margin-right: calc(2px * var(--apple-pay-scale));
  }
  .apple-pay-checkout-button > .logo {
    width: calc(35px * var(--scale));
    height: 100%;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 0 50%;
    margin-left: calc(2px * var(--apple-pay-scale));
    border: none;
  }
}