﻿/*#region ApplePay classes */
/*=============================*/
/*  sources / docs:
 *  https://github.com/justeat/ApplePayJSSample
 *  https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons
 */

.ApplePayDiv {
    margin-top: 0.7em;
}

div.apple-pay.apple-pay-button {
    width: 240px;
    height: 38.7px;
}

.apple-pay-notices {
    max-width: 340px;
    text-align: start;
}

@supports (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
    }

        .apple-pay-button.button-color-black {
            -apple-pay-button-style: black;
        }

        .apple-pay-button.button-color-white {
            -apple-pay-button-style: white;
        }

        .apple-pay-button.button-color-white-outline {
            -apple-pay-button-style: white-outline;
        }

        .apple-pay-button.button-with-text {
            /* default fallbacks */
            display: inline-block;
            -webkit-appearance: -apple-pay-button;
            /* default value */
            -apple-pay-button-type: buy;
        }

            .apple-pay-button.button-with-text > * {
                display: none;
            }

        .apple-pay-button.button-text-buy {
            -apple-pay-button-type: buy;
        }

        .apple-pay-button.button-text-donate {
            -apple-pay-button-type: donate;
        }

        .apple-pay-button.button-text-setup {
            -apple-pay-button-type: set-up;
        }

        .apple-pay-button.button-text-subscribe {
            -apple-pay-button-type: subscribe;
        }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        background-size: 20% 50%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        border-radius: 5px;
        padding: 0px;
        cursor: pointer;
        box-sizing: border-box;
        min-width: 200px;
        min-height: 32px;
        max-height: 64px;
        /* default fallbacks */
        background-color: black;
        color: white;
        background-image: -webkit-named-image(apple-pay-logo-white);
    }

        .apple-pay-button.button-color-black {
            background-color: black;
            color: white;
        }

        .apple-pay-button.button-color-white {
            background-color: white;
            color: black;
        }

        .apple-pay-button.button-color-white-outline {
            background-color: white;
            border: .5px solid black;
            color: black;
        }
        /*.apple-pay-button-with-text {
            --apple-pay-scale: 1;*/ /* (height / 32) */
        /*display: inline-flex;
            justify-content: center;
            font-size: 12px;
            border-radius: 5px;
            padding: 0px;
            box-sizing: border-box;
            min-width: 200px;
            min-height: 32px;
            max-height: 64px;
        }*/
        /*.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));
        }*/

        .apple-pay-button > .logo {
            /*width: 56px;*/ /* 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;
            /* default fallbacks */
            background-image: -webkit-named-image(apple-pay-logo-white);
        }

            .apple-pay-button > .logo.logo-color-white {
                background-image: -webkit-named-image(apple-pay-logo-white);
                background-color: black;
            }

            .apple-pay-button > .logo.logo-color-black {
                background-image: -webkit-named-image(apple-pay-logo-black);
                background-color: white;
            }
}

/*#endregion */
