/*
 * 6-treasures icons.
 * SVGs in icons/ are from Bootstrap Icons v1.13.1 (MIT licence), https://icons.getbootstrap.com
 * Drawn as CSS masks so they take the current text colour.
 */

.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.bi-fork-knife {
    -webkit-mask-image: url("icons/fork-knife.svg");
    mask-image: url("icons/fork-knife.svg");
}

.bi-person {
    -webkit-mask-image: url("icons/person.svg");
    mask-image: url("icons/person.svg");
}

.bi-basket {
    -webkit-mask-image: url("icons/basket.svg");
    mask-image: url("icons/basket.svg");
}

.bi-cart-check {
    -webkit-mask-image: url("icons/cart-check.svg");
    mask-image: url("icons/cart-check.svg");
}

.bi-house {
    -webkit-mask-image: url("icons/house.svg");
    mask-image: url("icons/house.svg");
}

.bi-box-arrow-in-right {
    -webkit-mask-image: url("icons/box-arrow-in-right.svg");
    mask-image: url("icons/box-arrow-in-right.svg");
}

.bi-box-arrow-left {
    -webkit-mask-image: url("icons/box-arrow-left.svg");
    mask-image: url("icons/box-arrow-left.svg");
}

/* Space between icon and label in the off-canvas menu */
.slideout-navigation .bi {
    margin-right: 0.6em;
}

/* Add-to-cart button basket (was in Customizer Additional CSS) */
.add_to_cart_button::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 18px;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("icons/basket3.svg") no-repeat center / contain;
    mask: url("icons/basket3.svg") no-repeat center / contain;
}

/* Cart block remove button (was inline in functions.php) */
.wc-block-cart-item__remove-link {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
}

.wc-block-cart-item__remove-link:hover {
    text-decoration: none !important;
}

/* WooCommerce 11 fixes the button at 24px; let it grow to fit its own SVG icon plus the label. */
.wc-block-cart-item__remove-link {
    width: auto !important;
    height: auto !important;
}

.wc-block-cart-item__remove-link svg {
    flex-shrink: 0;
}

.wc-block-cart-item__remove-link::after {
    content: "Remove this item";
    font-size: 14px !important;
    font-weight: 600;
}

.wc-block-cart-item__remove-link:hover {
    color: #dc3545 !important;
}