.sv-wc-apple-pay-button {
display: none;
width: 100%;
height: 44px;
margin: 0 0 1em 0;
}
@supports ( -webkit-appearance: -apple-pay-button ) {
.sv-wc-apple-pay-button {
-webkit-appearance: -apple-pay-button;
}
.sv-wc-apple-pay-button.apple-pay-button-black {
-apple-pay-button-style: black;
}
.sv-wc-apple-pay-button.apple-pay-button-white {
-apple-pay-button-style: white;
}
.sv-wc-apple-pay-button.apple-pay-button-white-with-line {
-apple-pay-button-style: white-outline;
}
.sv-wc-apple-pay-button.apple-pay-button-buy-now {
-apple-pay-button-type: buy;
}
.sv-wc-apple-pay-button.apple-pay-button-buy-now > * {
display: none;
}
}
@supports not ( -webkit-appearance: -apple-pay-button ) {
.sv-wc-apple-pay-button {
background-size: 100% 60%;
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 5px;
padding: 0px;
box-sizing: border-box;
min-width: 100px;
min-height: 40px;
max-height: 64px;
width: 100%;
}
.sv-wc-apple-pay-button.apple-pay-button-black {
background-image: -webkit-named-image( apple-pay-logo-white );
background-color: black;
color: white;
}
.sv-wc-apple-pay-button.apple-pay-button-white,
.sv-wc-apple-pay-button.apple-pay-button-white-with-line {
background-image: -webkit-named-image( apple-pay-logo-black );
background-color: white;
color: black;
}
.sv-wc-apple-pay-button.apple-pay-button-white-with-line {
border: .5px solid black;
}
.sv-wc-apple-pay-button.apple-pay-button-with-text {
--apple-pay-scale: 1; justify-content: center;
font-size: 12px;
background: none;
}
.sv-wc-apple-pay-button.apple-pay-button-with-text > .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 ) );
}
.sv-wc-apple-pay-button.apple-pay-button-with-text > .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;
}
.sv-wc-apple-pay-button.apple-pay-button-black .apple-pay-button-with-text > .logo {
background-image: -webkit-named-image( apple-pay-logo-white );
background-color: black;
}
.sv-wc-apple-pay-button.apple-pay-button-white .apple-pay-button-with-text > .logo,
.sv-wc-apple-pay-button.apple-pay-button-white-with-line .apple-pay-button-with-text > .logo {
background-image: -webkit-named-image( apple-pay-logo-black );
background-color: white;
}
}