#PosCart { --sidebar-width: 480px; } #PosCart .public-page-wrap { padding: 0 0 var(--btcpay-space-l); } #PosCart .offcanvas-backdrop { top: var(--mobile-header-height); transition-duration: var(--btcpay-transition-duration-fast); } .cart-toggle-btn { --button-width: 40px; --button-height: 40px; --button-padding: 7px; --icon-size: 1rem; position: absolute; top: calc(50% - var(--button-height) / 2); right: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--button-width); height: var(--button-height); padding: var(--button-padding); background: transparent; border: none; cursor: pointer; outline: none; } header .cart-toggle-btn { --icon-size: 32px; } .cart-toggle-btn .icon-pos-cart { width: var(--icon-size); height: var(--icon-size); color: var(--btcpay-header-link); } .cart-toggle-btn:disabled svg { color: var(--btcpay-body-text-muted); } .cart-toggle-btn:not(:disabled):hover svg { color: var(--btcpay-header-link-accent); } #SearchTerm { max-width: 47em; margin: 0 auto; } #cart { position: fixed; top: 0; bottom: 0; right: 0; z-index: 1045; height: 100vh; overflow-y: auto; color: var(--btcpay-body-text); background-color: var(--btcpay-bg-tile); } #cart .quantity .btn { width: 2rem; height: 2rem; } #cart .quantity .btn .icon{ --btn-icon-size: .75rem; } #CartBadge { position: absolute; top: 0; right: 0; min-width: 1.75em; } @media (max-width: 991px) { #cart { left: 0; transform: translateX(100%); transition: transform var(--btcpay-transition-duration-fast) ease-in-out; } #cart.show { transform: none; } #CartClose { color: var(--btcpay-body-text); } } @media (min-width: 992px) { #content { margin-right: var(--sidebar-width); } #cart { width: var(--sidebar-width); border-left: 1px solid var(--btcpay-body-border-light); } .cart-toggle-btn { display: none; } }