.wc-block-mini-cart { display: inline-block; } .wc-block-mini-cart__button { align-items: center; background-color: transparent; border: none; color: inherit; display: flex; font-size: inherit; font-family: inherit; font-weight: 400; padding: em($gap-small) em($gap-smaller); &:hover:not([disabled]) { opacity: 0.6; } } .wc-block-mini-cart__amount { display: none; } .wc-block-mini-cart__tax-label { margin-right: em($gap-smaller); } @media screen and (min-width: 768px) { .wc-block-mini-cart__amount { display: initial; font-weight: 600; margin-right: $gap-smaller; } } .modal-open .wc-block-mini-cart__button { pointer-events: none; } // Reset font size so it doesn't depend on drawer's ancestors. .wc-block-mini-cart__drawer { font-size: 1rem; .components-modal__content { padding: 0; position: relative; } .components-modal__header { position: absolute; top: $gap-largest; right: $gap; button { color: inherit; z-index: 9999; } svg { fill: currentColor; } } } .wp-block-woocommerce-mini-cart-contents { box-sizing: border-box; height: 100vh; padding: 0; justify-content: center; } :where(.wp-block-woocommerce-mini-cart-contents) { background: #fff; } .wp-block-woocommerce-empty-mini-cart-contents-block, .wp-block-woocommerce-filled-mini-cart-contents-block { height: 100%; display: flex; flex-direction: column; } .wp-block-woocommerce-empty-mini-cart-contents-block { justify-content: center; } .wp-block-woocommerce-filled-mini-cart-contents-block { justify-content: space-between; } .wp-block-woocommerce-empty-mini-cart-contents-block .wc-block-mini-cart__empty-cart-wrapper { overflow-y: auto; padding: $gap-largest $gap $gap; } h2.wc-block-mini-cart__title { @include font-size(larger); margin: $gap-largest $gap 0; } .wc-block-mini-cart__items { display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; padding: $gap $gap 0; .wc-block-mini-cart__products-table { margin-bottom: auto; margin-right: -$gap; padding-right: $gap; .wc-block-cart-items__row { padding-top: $gap-smaller; padding-bottom: $gap-smaller; &:last-child::after { content: none; } } } } .wc-block-mini-cart__footer { border-top: 1px solid $gray-300; padding: $gap-large $gap; .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal { font-weight: 600; margin-bottom: $gap; .wc-block-components-totals-item__description { display: none; font-size: 0.75em; font-weight: 400; @media only screen and (min-width: 480px) { display: unset; } } } .wc-block-mini-cart__footer-actions { display: flex; gap: $gap; .wc-block-components-button { flex-grow: 1; font-weight: 600; } .wc-block-components-button.outlined { color: currentColor; display: none; &:not(:focus) { box-shadow: inset 0 0 0 1px currentColor; } &:hover, &:focus { color: $white; } @media only screen and (min-width: 480px) { display: inline-flex; } } } .wc-block-components-payment-method-icons { margin-top: $gap; } } .wc-block-mini-cart__shopping-button { display: flex; justify-content: center; a { border: 2px solid; color: currentColor; font-weight: 600; padding: $gap-small $gap-large; text-decoration: none; &:hover, &:focus { background-color: $gray-900; border-color: $gray-900; color: $white; } } }