/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> */

/* =================== FA Icons ====================== */
/* Print | Download | Email Icons */
#plp-page-actions {
    & a.print, a.pdf, a.email {
    	position: relative;
    	background-image: none;
        &:before {
            font-family: "Font Awesome 6 Free";
            position: absolute;
            top: 0;
            left: 0;
            color: var(--color-primary);
        }
    }
    & a.print:before {
        content: "\f02f";
        font-weight: 900;
    }
    & a.pdf:before {
        content: "\f1c1";
        font-weight: 400;
    }
    & a.email:before {
        content: "\f0e0";
        font-weight: 400;
    }
}

/* Button Bar - Request | Compare | Search | Print | Print Cancel Icons | Apply | Clear | Cancel | CADCart | PDF Submittal */
#plp-buttonbar {
    & #plp-rfi, #plp-ci, #plp-si, #plp-prnt, #plp-prntcancel, #plp-advsi, #plp-clear, #plp-cancel, #plp-cadcart, #plp-pscart {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
        & .ui-icon {
            display: none;
        }
    }
    & #plp-rfi:before {
        content: "\f05a";
        font-weight: 900;
    }
    & #plp-ci:before {
        content: "\f24d";
        font-weight: 400;
    }
    & #plp-si:before {
        content: "\f002";
        font-weight: 900;
    }
    & #plp-prnt:before {
        content: "\f1c1";
        font-weight: 400;
    }
    & #plp-prntcancel:before {
        content: "\f104";
        font-weight: 900;
    }
    & #plp-advsi:before {
        content: "\f002";
        font-weight: 900;
    }
    & #plp-clear:before {
        content: "\f2f9";
        font-weight: 900;
    }
    & #plp-cancel:before {
        content: "\f00d";
        font-weight: 900;
    }
    & #plp-cadcart:before {
        content: "\f067";
        font-weight: 900;
    }
    & #plp-pscart:before {
        content: "\f067";
        font-weight: 900;
    }
}

/* Zoom sprite icon */
body:not(.invisible) #imageCarousel {
    & .plp-sprite-image-zoom {
        visibility: hidden;
        &:before {
            font-family: "Font Awesome 6 Free";
            content: "\f065";
            font-weight: 900;
            visibility: visible;
            position: absolute;
            right: 0;
            bottom: 0;
            line-height: initial;
        }   
    }
}

/* Button Bar - Configurator Page - Reset | Cancel | View Results Button Icons */
#plp-buttonbar-configure {
    & #plp-reset, #plp-cancel, #plp-result {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
        & .ui-icon {
            display: none;
        }
    }
    & #plp-reset:before {
        content: "\f2f9";
        font-weight: 900;
    }
    & #plp-cancel:before {
        content: "\f00d";
        font-weight: 900;
    }
    & #plp-result:before {
        content: "\f022";
        font-weight: 900;
    }
}

/* Sidebar Filter - Clear | Filter Icon */
#plp-sidebar {
    & #plp-clear, #plp-filter {
        & .ui-button-icon {
            display: none;
        }
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
    }
    & #plp-clear:before {
        content: "\f0e2";
        font-weight: 900;
    }
    & #plp-filter:before {
        content: "\f0b0";
        font-weight: 900;
    }
}
/* Pagination - Thumbnail | List view icons */
body:not(.invisible) #plp-page-pagination {
    & #thumbnailView, #tableView {
        visibility: hidden;
        &:before {
            font-family: "Font Awesome 6 Free";
            visibility: visible;
            color: lightgrey;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 20px;
            transform: translateY(-8px);
        }
        &:hover::before {
            color: white;
        }
    }
    & #thumbnailView {
        &:before {
            content: "\f0ce";
            font-weight: 900;
        }
        &.plp-sprite-grid-thumbnail-inactive:before {
            color: white;
        }
    }
    & #tableView {
        &:before {
            content: "\f022";
            font-weight: 500;
        }
        &.plp-sprite-grid-table-inactive:before {
            color: white;
        }
    }
}

/* PDF Icon in Downloads */
.plp-sprite-asset-pdf {
    background: none !important;
    &:before {
        content: "\f1c1";
        font-weight: 400;
        font-family: "Font Awesome 6 Free";
        color: var(--color-secondary);
    }
}
/* PDF icon after Sales Drawing */
#SalesDrawing:has(img[src="/plp/mm/pdf_icon.jpg"]) {
    & img {
        display: none;
    }
    &:after {
        content: "\f1c1";
        font-weight: 400;
        font-family: "Font Awesome 6 Free";
        color: var(--color-secondary);
    }
}

/* CAD - Download | Email icons */
#plp-cad-emaildownload {
    & #plp-lnkDownload, #plp-lnkEmail {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 5px;
        }
    }
    & #plp-lnkDownload:before {
        content: "\f019";
        font-weight: 900;
    }
    & #plp-lnkEmail:before {
        content: "\f0e0";
        font-weight: 900;
    }
}

/* Search Page Icons */
body[data-pagetype=Keyword] {
    /* View All Items Arrows */
    & .plp-sprite-tableArrowDown, .plp-sprite-tableArrowUp {
        visibility:hidden;
        &:before {
            font-family: "Font Awesome 6 Free";
        	visibility: visible;
        	position: absolute;
        	left: 0;
        	top: 0;
        	text-indent: 0px;
        	margin: 0px 1px;
        }
    }
    & .plp-sprite-tableArrowDown:before {
        content: "\f107";
        font-weight: 900;
    }
    & .plp-sprite-tableArrowUp:before {
        content: "\f106";
        font-weight: 900;
    }
    /* Checkbox Icons */
    & .ui-checkboxradio-label {
        & .ui-checkboxradio-icon {
            visibility: hidden;
            border-radius: 0px;
            height: 18px;
            &:before {
                content: "\f0c8";
                font-weight: 500;

                font-family: "Font Awesome 6 Free";
                text-indent: 0;
            	position: absolute;
            	top:0;
            	left:1px;
            	color: black;
            	visibility:visible;
            }
        }
        &.ui-state-active {
            & .ui-checkboxradio-icon:before {
                content: "\f14a";
                font-weight: 900;
            }
        }
    }
}

/* Request Page - Attach | Cancel | Submit icons */
#plp-request-info, #plp-udc-form-direct {
    & .fileinput-button, .buttonBar.plp-form-button button {
        &:before, &:after {
            font-family: "Font Awesome 6 Free";
        }
    }
    & .fileinput-button:before {
        content: "\f574";
        font-weight: 900;
        margin-right: 10px;
    }
    & .buttonBar.plp-form-button button.plp-form-cancel:before {
        content: "\f00d";
        font-weight: 900;
        margin-right: 10px;
    }
    & .buttonBar.plp-form-button button.plp-form-submit:after {
        content: "\f101";
        font-weight: 900;
        margin-left: 10px;
    }
}

/* Cart Pop Up window - Continue | View Cart */
#plp-cart-dialog {
    #edit-attr-continueshopping, #edit-attr-view-cart {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
    }
    & #edit-attr-continueshopping:before {
        content: "\f053";
        font-weight: 900;
    }
    & #edit-attr-view-cart:before {
        content: "\f07a";
        font-weight: 900;
    }
}
/* Header links pop-up windows */
#ecomm-cart-info #ecomm-view-cart:before,
#rfq-cart-info #rfq-view-cart:before {
    font-family: "Font Awesome 6 Free";
    content: "\f07a";
    font-weight: 900;
    margin-right: 10px;
    display: inline-block;
}
/* CAD Cart Pop Up window */
#plp-cad-cartbench .plp-cadqueue + ol.all-container > li > .close > a {
    &:before {
        font-family: "Font Awesome 6 Free";
        content: "\f15b";
        font-weight: 900;
        margin-right: 10px;
    }
}

/* Cart Page - Remove | Edit | Estimate Shipping Item Icons */
#ecomm-review-order {
    & .ecomm-remove-item-link {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 5px;
            margin-left: 5px;
            display: inline-block;
        }
        &[data-action="remove"]:before {
            content: "\f1f8";
            font-weight: 900;
        }
        &[data-action="edit"]:before {
            content: "\f044";
            font-weight: 900;
        }
    }
}
#ecomm-shipping-estimate-button:before {
    font-family: "Font Awesome 6 Free";
    content: "\f1ec";
    font-weight: 900;
    margin-right: 10px;
}
/* Cart Page Button Bar - Continue Shopping | Save | Checkout Icons */
.ecomm-buttonbar {
    & > .ui-button:first-child::before {
        font-family: "Font Awesome 6 Free";
        content: "\f053";
        font-weight: 900;
        margin-right: 10px;
    }
    & .ecomm-button-save-cart:before {
        font-family: "Font Awesome 6 Free";
        content: "\f0c7";
        font-weight: 900;
        margin-right: 10px;
    }
    & .ecomm-proceed-checkout-button:after {
        font-family: "Font Awesome 6 Free";
        content: "\f054";
        font-weight: 900;
        margin-left: 10px;
    }
}
/* Email Cart Page - Cancel | Send Email icons */
#plp-cart-emailpage {
    & a.plp-form-cancel:before {
        font-family: "Font Awesome 6 Free";
        content: "\f00d";
        font-weight: 900;
        margin-right: 10px;
    }
    & button.plp-form-submit:before {
        font-family: "Font Awesome 6 Free";
        content: "\f0e0";
        font-weight: 900;
        margin-right: 10px;
    }
}
/* Print Cart Page - Cancel | Print icons */
#scope-ecomm-cancel-print a:before {
    font-family: "Font Awesome 6 Free";
    content: "\f00d";
    font-weight: 900;
    margin-right: 10px;
}
#scope-ecomm-print button:before {
    font-family: "Font Awesome 6 Free";
    content: "\f02f";
    font-weight: 900;
    margin-right: 10px;
}
/* Printable Cart Page - Cancel | Print Icons */
body[data-pagetype="CartPrint"] {
    & button.ecomm-print-btn:before {
        font-family: "Font Awesome 6 Free";
        content: "\f02f";
        font-weight: 900;
        margin-right: 10px;
    }
    & .ui-button.ecomm-cancel-print-btn:before {
        font-family: "Font Awesome 6 Free";
        content: "\f00d";
        font-weight: 900;
        margin-right: 10px;
    }
}

/* Express Ordering - Search | Add To Cart | View Cart | Remove Icons */
#plp-expressorder {
    & #plp-express-search-go, #plp-express-add-btn, a.plp-expresscart-remove {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
    }
    & #plp-express-search-go:before {
        content: "\f002";
        font-weight: 900;
    }
    & #plp-express-add-btn:before {
        content: "\f217";
        font-weight: 900;
    }
    & a.plp-expresscart-remove:before {
        content: "\f1f8";
        font-weight: 900;
        margin-left: 5px;
        margin-right: 5px !important;
    }
}
#plp-express-viewcart:before {
    font-family: "Font Awesome 6 Free";
    content: "\f07a";
    font-weight: 900;
    margin-right: 10px;    
}

/* CAD Cart - Search | Remove | Remove All */
#plp-cadcartmanageitems {
    & #plp-cadpart-searchbtn, #plp-removecadcart, #plp-cadcart-removeall {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
    }
    & #plp-cadpart-searchbtn:before {
        content: "\f002";
        font-weight: 900;
    }
    & #plp-removecadcart:before {
        content: "\f068";
        font-weight: 900;
    }
    & #plp-cadcart-removeall:before {
        content: "\f1f8";
        font-weight: 900;
    }
}
/* Cancel | Submit (Request CAD files) buttons*/
#plp-cadcartuserinfo {
     & #plp-cadcart-cancel, #plp-cadcart-submit {
        &:before {
            font-family: "Font Awesome 6 Free";
            margin-right: 10px;
        }
    }
    & #plp-cadcart-cancel:before {
        content: "\f00d";
        font-weight: 900;
    }
    & #plp-cadcart-submit:before {
        content: "\f0e0";
        font-weight: 900;
    }
}

/* Highlight message Info icon (too many items on category result, rfi confirmation) */
body:not(.invisible) .ui-state-highlight {
    .ui-icon.ui-icon-info {
        visibility: hidden;
        height: auto;
        &:before {
            font-family: "Font Awesome 6 Free";
            content: "\f05a";
            font-weight: 900;
            text-indent: 0px;
            visibility: visible;
        }
    }
}

/* Notification message Warning | Check | Close | Pin | Unpin icon (top right corner message pop-up) */
body:not(.invisible) .ui-pnotify {
    div .ui-icon {
        visibility: hidden;
        height: 20px;
        &:before {
            font-family: "Font Awesome 6 Free";
            text-indent: 0px;
            visibility: visible;
            left: 0px;
            position: absolute;
        }
        &.ui-icon-alert:before {
            content: "\f071";
            font-weight: 900;
        }
        &.ui-icon-circle-check:before {
            content: "\f058";
            font-weight: 900;
        }
        &.ui-icon-close:before {
            content: "\f00d";
            font-weight: 900;
            margin-left: 3px;
        }
        &.ui-icon-pin-w:before {
            content: "\f08d";
            font-weight: 900;
        }
        &.ui-icon-pin-s:before {
            content: "\e68f";
            font-weight: 900;
            margin-right: 3px;
        }
    }
}