/* BREADCRUMBS */

/* An example. This block-type cannot be customised via JSON because its properties do not properly map to the classes. Breadcrumbs are currently unused. */
.wp-block-breadcrumbs,
.wc-block-breadcrumbs {
  margin-bottom: 1rem;
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.588), 20px) !important;
  color: var(--wp--preset--color--contrast);
  .woocommerce-breadcrumb {
    color: inherit;
  }
}

/*PRODUCTS */

/* Single product metadata badges for Music products. */
.single-product .go-product-music-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  > span {
    display: block;
    padding: 0.6em 0.8em;
    font-size: 0.62em;
    font-weight: 200;
    color: var(--wp--preset--color--label-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color: var(--wp--preset--color--meta-label);
    border-radius: 3px;
  }
}

/* This is designed to track H2 in the UI settings */
.woocommerce.wc-block-product-results-count .woocommerce-result-count {
  margin-bottom: 1em;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* MINI-CART */

.wc-block-components-drawer__screen-overlay {
  background-color: rgba(20, 20, 20, 0.5);
  .wc-block-components-drawer {
    border-color: var(--wp--custom--swatches--grey--500);
    animation-duration: 0.75s;
    .wc-block-mini-cart__empty-cart-wrapper {
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
    .wp-block-woocommerce-mini-cart-contents {
      padding: 1em;
    }
  }
}

/* ACCOUNT AND CART ICONS
  Special highlighting of account and cart icons
  These classes are added by add_woocommerce_body_classes.
*/

body.go-woocommerce-page--account {
  /* Highlight the account icon */
  .header svg.wc-block-customer-account__account-icon {
    color: var(--wp--preset--color--menu-link-hover) !important;
    transition: none !important;
  }
}

body.go-woocommerce-page--cart {
  /* WC hides this; show it */
  .header .wc-block-mini-cart[aria-hidden="true"] {
    visibility: visible !important;
    padding-top: 2px;
    pointer-events: none;
  }

  /* Highlight the cart icon */
  .header svg.wc-block-mini-cart__icon {
    color: var(--wp--preset--color--menu-link-hover) !important;
    transition: none !important;
  }
}

/* NOTICES */

/*
  This is used inside a .woocommerce div in My Account (and perhaps elsewhere) but without a .woocommerce div in Checkout.
*/
.wc-block-components-notice-banner {
  margin: 0 0 3em;
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--woocommerce-notice-bg) !important;
  border-color: var(--wp--preset--color--woocommerce-notice-border) !important;
  border-radius: var(--wp--preset--border-radius--x-small);
  .wc-block-components-notice-banner__content .wc-forward {
    display: none;
  }
  &:focus-visible {
    outline: none;
  }
  &.is-success {
    background-color: var(
      --wp--preset--color--woocommerce-notice-bg-success
    ) !important;
  }
  &.is-error {
    background-color: var(
      --wp--preset--color--woocommerce-notice-bg-error
    ) !important;
  }
  svg {
    background-color: var(--wp--custom--swatches--gold--200) !important;
  }
  .wc-block-components-notice-banner__dismiss svg {
    background-color: transparent !important;
    fill: var(--wp--preset--color--contrast);
  }
}

/* MY ACCOUNT PAGE */

.woocommerce-account {
  --wc-form-color-background: var(--wp--preset--color--input-bg);
  --wc-form-color-text: var(--wp--preset--color--input-color);

  .woocommerce {
    .woocommerce-MyAccount-navigation ul {
      padding: 2.5em 2em;
      background-color: var(--wp--preset--color--card-bg);
      background-image: var(--wp--custom--backgrounds--card--current);
      border-radius: var(--wp--preset--border-radius--medium);
      > p {
        text-indent: 1em;
        & + p {
          margin-top: 0.75em;
        }
      }
      img {
        border-radius: var(--wp--preset--border-radius--small);
      }
    }

    /* Mainly relates to My Account -> Billing/Shipping address forms */
    .woocommerce-MyAccount-content {
      address {
        margin-bottom: 1em;
        font-style: normal;
      }
      .edit {
        float: none;
        font-size: var(--wp--preset--font-size--small);
      }
      .form-row {
        &:not(:has(#account_display_name_description)) {
          margin-bottom: 1em;
          &:last-of-type {
            margin-bottom: 3em;
          }
        }
        label {
          margin-top: 1em;
        }
      }
      /* Account details form specifically */
      .woocommerce-EditAccountForm {
        #account_display_name_description {
          em {
            display: block;
            margin: 1em 0;
            font-size: var(--wp--preset--font-size--custom-4);
            font-style: normal;
          }
        }
        fieldset {
          padding: 1em;
          margin: 3em 0 2em;
          border: 1px solid
            var(--wp--preset--color--woocommerce-fieldset-border);
        }
      }
      @media only screen and (min-width: 769px) {
        width: 65%;
        padding-top: 1em;
      }
    }
  }
}

/* CHECKOUT */
.wc-block-components-radio-control--highlight-checked {
  .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    box-shadow: none;
  }
  &:after {
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
  }
  .wc-block-components-payment-methods__save-card-info {
    margin: 1.5em 0 0.5em;
  }
  #radio-control-wc-payment-method-options-stripe__content.optimized-checkout-element {
    padding-top: 0;
  }
}

.wc-block-components-address-card
  address
  .wc-block-components-address-card__address-section--secondary {
  color: inherit;
}

.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--wp--custom--swatches--grey--700);
}

/* CART / BASKET */

/* Stop "Proceed to Checkout" button from being full width */
.wc-block-cart__submit-container {
  display: flex;
  justify-content: center;
  padding-top: 1.5em !important;
  .wc-block-components-button:not(.is-link) {
    width: auto;
  }
}

/* Hide payment options area - none are enabled on the Basket page */
.wc-block-cart__payment-options {
  display: none;
}

/* OTHER */

/* WC uses this for select menus, e.g. in billing address change https://select2.org/ */
.select2-container--default {
  .select2-results__option[data-selected="true"] {
    background-color: var(
      --wp--preset--color--select-2-selected-option-bg
    ) !important;
  }
  .select2-results__option--highlighted[aria-selected],
  .select2-results__option--highlighted[data-selected] {
    background-color: var(--wp--preset--color--select-2-highlighted-option-bg);
  }
  .select2-dropdown,
  .select2-selection {
    background-color: var(--wc-form-color-background) !important;
    border-color: var(--wp--preset--color--input-border) !important;
    .select2-search__field:focus-visible {
      outline: none;
    }
    .select2-selection__arrow b {
      filter: invert(0.5);
    }
  }
}