/*
Copyright (C) 2016 Apple Inc. All Rights Reserved.
See LICENSE.txt for this sample’s licensing information

Abstract:
Styles the example site, as well as the Apple Pay button using -webkit-named-image
*/

body {
    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

h2 {
    font-weight: 300;
    font-size: xx-large;
}

p {
    font-weight: 300;
}

.apple-pay {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* CSS */
@supports (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        box-sizing: border-box;
        width: 100%;
        min-width: 200px;
        height: 40px;
        min-height: 40px;
        margin: 5px auto;
        visibility: hidden;

        border: 0;
        border-radius: 4px;
        box-shadow: 0px 1px 3px 0px #6d6d6d;
        outline: 0;
        padding: 10px 8px;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
    .apple-pay-button-black:active {
        -apple-pay-button-style: white-outline;
    }

    .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 {
        display: inline-block;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        box-sizing: border-box;
        width: 100%;
        min-width: 200px;
        height: 40px;
        min-height: 40px;
        margin: 5px auto;
        visibility: hidden;

        border: 0;
        border-radius: 4px;
        box-shadow: 0px 1px 3px 0px #6d6d6d;
        outline: 0;
        padding: 10px 8px;
    }
    .apple-pay-button-black {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-white {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-white-with-line {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
        border: .5px solid black;
    }
}

.apple-pay-button:hover {
    cursor: pointer;
    box-shadow: 0px 1px 3px 0px #6d6d6d, inset 0px 0px 0px 1px #a8abb3;
}

.apple-pay-button.visible {
    visibility: visible;
}

/*
 * Cross-browser Apple Pay button (WG-51894).
 *
 * The <apple-pay-button> web component supplied by the Apple Pay JS SDK renders across Safari,
 * Chrome, Edge and Firefox — unlike the .apple-pay-button rules above, which rely on the
 * Safari-only -webkit-appearance: -apple-pay-button. The element is inert on the current pages
 * (it is only emitted on the cross-browser pilot path), so these rules never affect existing UI.
 * The button stays hidden until capability detection (applePayCapabilities / canMakePayments in
 * applepay-crossbrowser.jsp) confirms Apple Pay is available, then is revealed via .visible.
 */
apple-pay-button {
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 40px;
    --apple-pay-button-border-radius: 4px;
    --apple-pay-button-box-sizing: border-box;
    display: none;
    width: 100%;
    min-width: 200px;
    margin: 5px auto;
}

apple-pay-button.visible {
    display: inline-block;
}