/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

accepted-cards {
  margin: 1em 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: first baseline;
}

.accepted-cards-label {
  display: inline-block;
  font-size: smaller;
  flex: 0 2 content;
  white-space: nowrap;
}

.accepted-cards-list {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 2 1 auto;
}

.accepted-cards-list > .accepted-cards-item {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 5px 0;
  margin-inline-start: 10px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* placeholders for specific card icons we don't yet have assets for */
accepted-cards:not(.branded) .accepted-cards-item[data-network-id] {
  width: 48px;
  text-align: center;
  background-image: url("./card-icon.svg");
  -moz-context-properties: fill-opacity;
  fill-opacity: 0.5;
}
accepted-cards:not(.branded) .accepted-cards-item[data-network-id]::after {
  box-sizing: border-box;
  content: attr(data-network-id);
  padding: 8px 4px 0 4px;
  text-align: center;
  font-size: 0.7rem;
  display: inline-block;
  overflow: hidden;
  width: 100%;
}

/*
  We use .png / @2x.png images where we don't yet have a vector version of a logo
*/
.accepted-cards-item[data-network-id="amex"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-amex.png");
}

.accepted-cards-item[data-network-id="cartebancaire"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-cartebancaire.png");
}

.accepted-cards-item[data-network-id="diners"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-diners.svg");
}

.accepted-cards-item[data-network-id="discover"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-discover.png");
}

.accepted-cards-item[data-network-id="jcb"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-jcb.svg");
}

.accepted-cards-item[data-network-id="mastercard"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-mastercard.svg");
}

.accepted-cards-item[data-network-id="mir"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-mir.svg");
}

.accepted-cards-item[data-network-id="unionpay"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-unionpay.svg");
}

.accepted-cards-item[data-network-id="visa"] {
  background-image: url("chrome://formautofill/content/third-party/cc-logo-visa.svg");
}

@media (min-resolution: 1.1dppx) {
  .accepted-cards-item[data-network-id="amex"] {
    background-image: url("chrome://formautofill/content/third-party/cc-logo-amex@2x.png");
  }
  .accepted-cards-item[data-network-id="cartebancaire"] {
    background-image: url("chrome://formautofill/content/third-party/cc-logo-cartebancaire@2x.png");
  }
  .accepted-cards-item[data-network-id="discover"] {
    background-image: url("chrome://formautofill/content/third-party/cc-logo-discover@2x.png");
  }
}
