STYLE_START .amazonpay-button-container { display: grid; justify-items: stretch; min-height: 42px; min-width: 113px; max-width: 600px; height: 100%; width: 100%; touch-action: manipulation; max-height: 193px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .amazonpay-button-container-rows { grid-template-rows: 65% 10% 25%; } .amazonpay-custom-button-container-rows { grid-template-rows: 100%; } .amazonpay-button-view1 { grid-row: 1/2; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; border-style: solid; border-width: 1px; box-sizing: border-box; width: 100%; display: grid; grid-template-rows: 13% 13% 1fr 1fr 10% 16%; grid-template-columns: 4% 10% 6% 1fr 6% 10% 4%; justify-items: center; justify-self: stretch; align-self: stretch; } .amazonpay-button-view1-gold { border-color: #a88734 #9c7e31 #846a29; background: linear-gradient(to bottom, #f7dfa5, #f0c14b); } .amazonpay-button-view1-gray { border-color: #ADB1B8 #A2A6AC #8D9096; background: linear-gradient(to bottom, #F7F8FA, #E7E9EC); } .amazonpay-button-view1-ink { border-color: #3d444c #2f353b #2c3137; background: linear-gradient(to bottom, #71777D, #444C54); } .amazonpay-button-enabled { cursor: pointer; } .amazonpay-button-disabled { cursor: default; opacity: 0.25; filter: grayscale(100%); } .amazonpay-button-view1 .amazonpay-button-sandbox-logo { grid-row: 2/4; grid-column: 2/3; } .amazonpay-button-view1 .amazonpay-button-logo { grid-row: 3/6; grid-column: 4/5; } .amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo { grid-row: 1/3; grid-column: 1/2; } .amazonpay-button-view1 .amazonpay-signin-button-logo { grid-row: 3/6; grid-column: 2/7; } .amazonpay-button-view1 .amazonpay-button-chevrons { grid-row: 3/5; grid-column: 6/7; } .amazonpay-button-view1-gold:active { background: #f0c14b; outline: none; border-color: #e77600; box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); } .amazonpay-button-view1-gray:active { background: #DCDFE3; outline: none; border-color: #e77600; box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); } .amazonpay-button-view1-ink:active { background: #444C54; outline: none; border-color: #32373e #24282d #212429; box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); } .amazonpay-button-view1-gold:focus { outline: none; border-color: #e77600; box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); } .amazonpay-button-view1-gray:focus { outline: none; border-color: #e77600; box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); } .amazonpay-button-view1-ink:focus { outline: none; border-color: #32373e #24282d #212429; box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); } .amazonpay-button-view1-gold:hover { background: linear-gradient(to bottom, #f5d78e, #eeb933); } .amazonpay-button-view1-gray:hover { background: linear-gradient(to bottom, #E6E9EF, #D9DCE1); } .amazonpay-button-view1-ink:hover { background: linear-gradient(to bottom, #64696F, #393F47); } .amazonpay-button-view2 { grid-row: 2/3; } .amazonpay-button-view3 { grid-row: 3/4; justify-items: center; justify-self: stretch; align-self: stretch; } .amazonpay-button-view1 .amazonpay-button-sandbox-logo img, .amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo img, .amazonpay-button-view1 .amazonpay-button-logo img, .amazonpay-button-view1 .amazonpay-signin-button-logo img, .amazonpay-button-view1 .amazonpay-button-chevrons img, .amazonpay-button-view3 .amazonpay-button-microtext img { display: block; height: 100%; width: 100%; user-select: none; -webkit-touch-callout: none; } .amazonpay-button-view1 .amazonpay-button-sandbox-logo img, .amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo img, .amazonpay-button-view1 .amazonpay-button-logo img, .amazonpay-button-view1 .amazonpay-signin-button-logo img, .amazonpay-button-view1 .amazonpay-button-chevrons img { object-fit: contain; } .amazonpay-button-view3 .amazonpay-button-microtext img { object-fit: contain; } .animate-chevron .amazonpay-button-chevrons{ -webkit-animation: slide 2s ease-out; -webkit-animation-direction: running; -webkit-animation-iteration-count: 3; -webkit-animation-delay: 0.5s; animation: slide 2s ease-out; animation-direction: running; animation-iteration-count: 3; animation-delay: 0.5s; } @keyframes slide { from { grid-column: 5/6; opacity: 1; } 10% { opacity: 0.5; } 25% { opacity: 0.1; } 50% { grid-column: 5/7; opacity: 1; } 60% { opacity:0.5 } 75% { opacity: 0.1; } to { grid-column: 6/7; opacity: 1; } STYLE_END