/**
 * Copyright (©) 2023 Pinpoint Designs LTD. All right's reserved.
 *
 * @category    Pinpoint
 * @copyright   Copyright (c) 2023 Pinpoint Designs. (https://www.pinpointdesigns.co.uk)
 * @author      Ricky Goacher <ricky.goacher@pinpointdesigns.co.uk>
 */

/*
 * Icon list - New icons should be added to this section to load on the FE
*/

[data-content-type="pinpoint_pagebuilderuspitemicon"] {
    --pagebuilder-usp-icon-one: url('../css/images/award-solid.svg');
    --pagebuilder-usp-icon-two: url('../css/images/box-solid.svg');
    --pagebuilder-usp-icon-three: url('../css/images/boxes-stacked-solid.svg');
    --pagebuilder-usp-icon-four: url('../css/images/check-solid.svg');
    --pagebuilder-usp-icon-five: url('../css/images/dollar-sign-solid.svg');
    --pagebuilder-usp-icon-six: url('../css/images/euro-sign-solid.svg');
    --pagebuilder-usp-icon-seven: url('../css/images/sterling-sign-solid.svg');
    --pagebuilder-usp-icon-eight: url('../css/images/gift-solid.svg');
    --pagebuilder-usp-icon-nine: url('../css/images/handshake-solid.svg');
    --pagebuilder-usp-icon-ten: url('../css/images/heart-solid.svg');
    --pagebuilder-usp-icon-eleven: url('../css/images/location-dot-solid.svg');
    --pagebuilder-usp-icon-twelve: url('../css/images/message-solid.svg');
    --pagebuilder-usp-icon-thirteen: url('../css/images/percent-solid.svg');
    --pagebuilder-usp-icon-fourteen: url('../css/images/tag-solid.svg');
    --pagebuilder-usp-icon-fifteen: url('../css/images/tags-solid.svg');
    --pagebuilder-usp-icon-sixteen: url('../css/images/truck-fast-solid.svg');
    --pagebuilder-usp-icon-seventeen: url('../css/images/truck-solid.svg');
    --pagebuilder-usp-icon-eighteen: url('../css/images/british-made.svg');
    --pagebuilder-usp-icon-nineteen: url('../css/images/hand.svg');
    --pagebuilder-usp-icon-twenty: url('../css/images/10-year.svg');
    --pagebuilder-usp-icon-twentyone: url('../css/images/star-hollow.svg');
    --pagebuilder-usp-icon-twentytwo: url('../css/images/5-year.svg');
    --pagebuilder-usp-icon-twentythree: url('../css/images/bradstone-icon.svg');
    --pagebuilder-usp-icon-twentyfour: url('../css/images/heart-hands.svg');
    --pagebuilder-usp-icon-twentyfive: url('../css/images/anti-slip.svg');
    --pagebuilder-usp-icon-twentysix: url('../css/images/scratch-resistant.svg');
    --pagebuilder-usp-icon-twentyseven: url('../css/images/low.svg');
    --pagebuilder-usp-icon-twentyeight: url('../css/images/shield-tick.svg');
    --pagebuilder-usp-icon-twentynine: url('../css/images/lawsons-wheelbarrow.svg');
    --pagebuilder-usp-icon-thirty: url('../css/images/icon-star.svg');
    --pagebuilder-usp-icon-thirtyone: url('../css/images/icon-star-filled.svg');

    /* --pagebuilder-usp-icon-twentysix: url('../css/images/your-svg-file.svg'); */
}

[data-content-type="pinpoint_pagebuilderuspitem"] {
    --pagebuilder-usp-icon-chevron: url('../css/images/chevron-right-solid.svg');
}

[data-content-type='pinpoint_pagebuilderuspitemicon'] [data-icon-mask="false"] {
    background-color: unset;
}

.pagebuilder-usp-icon-one[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-one);
    mask-image: var(--pagebuilder-usp-icon-one);
}
.pagebuilder-usp-icon-one[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-one);
}

.pagebuilder-usp-icon-two[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-two);
    mask-image: var(--pagebuilder-usp-icon-two);
}
.pagebuilder-usp-icon-two[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-two);
}

.pagebuilder-usp-icon-three[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-three);
    mask-image: var(--pagebuilder-usp-icon-three);
}
.pagebuilder-usp-icon-three[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-four);
}

.pagebuilder-usp-icon-four[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-four);
    mask-image: var(--pagebuilder-usp-icon-four);
}
.pagebuilder-usp-icon-four[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-four);
}

.pagebuilder-usp-icon-five[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-five);
    mask-image: var(--pagebuilder-usp-icon-five);
}
.pagebuilder-usp-icon-five[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-five);
}

.pagebuilder-usp-icon-six[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-six);
    mask-image: var(--pagebuilder-usp-icon-six);
}
.pagebuilder-usp-icon-six[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-six);
}

.pagebuilder-usp-icon-seven[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-seven);
    mask-image: var(--pagebuilder-usp-icon-seven);
}
.pagebuilder-usp-icon-seven[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-seven);
}

.pagebuilder-usp-icon-eight[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-eight);
    mask-image: var(--pagebuilder-usp-icon-eight);
}
.pagebuilder-usp-icon-eight[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-eight);
}

.pagebuilder-usp-icon-nine[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-nine);
    mask-image: var(--pagebuilder-usp-icon-nine);
}
.pagebuilder-usp-icon-nine[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-nine);
}

.pagebuilder-usp-icon-ten[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-ten);
    mask-image: var(--pagebuilder-usp-icon-ten);
}
.pagebuilder-usp-icon-ten[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-ten);
}

.pagebuilder-usp-icon-eleven[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-eleven);
    mask-image: var(--pagebuilder-usp-icon-eleven);
}
.pagebuilder-usp-icon-eleven[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-eleven);
}

.pagebuilder-usp-icon-twelve[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twelve);
    mask-image: var(--pagebuilder-usp-icon-twelve);
}
.pagebuilder-usp-icon-twelve[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twelve);
}

.pagebuilder-usp-icon-thirteen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-thirteen);
    mask-image: var(--pagebuilder-usp-icon-thirteen);
}
.pagebuilder-usp-icon-thirteen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-thirteen);
}

.pagebuilder-usp-icon-fourteen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-fouteen);
    mask-image: var(--pagebuilder-usp-icon-fourteen);
}
.pagebuilder-usp-icon-fourteen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-fouteen);
}

.pagebuilder-usp-icon-fifteen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-fifteen);
    mask-image: var(--pagebuilder-usp-icon-fifteen);
}
.pagebuilder-usp-icon-fifteen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-fifteen);
}

.pagebuilder-usp-icon-sixteen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-sixteen);
    mask-image: var(--pagebuilder-usp-icon-sixteen);
}
.pagebuilder-usp-icon-sixteen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-sixteen);
}

.pagebuilder-usp-icon-seventeen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-seventeen);
    mask-image: var(--pagebuilder-usp-icon-seventeen);
}
.pagebuilder-usp-icon-seventeen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-seventeen);
}

.pagebuilder-usp-icon-eighteen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-eighteen);
    mask-image: var(--pagebuilder-usp-icon-eighteen);
}
.pagebuilder-usp-icon-eighteen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-eighteen);
}

.pagebuilder-usp-icon-nineteen[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-nineteen);
    mask-image: var(--pagebuilder-usp-icon-nineteen);
}
.pagebuilder-usp-icon-nineteen[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-nineteen);
}

.pagebuilder-usp-icon-twenty[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twenty);
    mask-image: var(--pagebuilder-usp-icon-twenty);
}
.pagebuilder-usp-icon-twenty[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twenty);
}

.pagebuilder-usp-icon-twentyone[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentyone);
    mask-image: var(--pagebuilder-usp-icon-twentyone);
}
.pagebuilder-usp-icon-twentyone[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentyone);
}

.pagebuilder-usp-icon-twenttwo[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentytwo);
    mask-image: var(--pagebuilder-usp-icon-twentytwo);
}
.pagebuilder-usp-icon-twenttwo[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentytwo);
}

.pagebuilder-usp-icon-twentthree[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentythree);
    mask-image: var(--pagebuilder-usp-icon-twentythree);
}
.pagebuilder-usp-icon-twentthree[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentythree);
}

.pagebuilder-usp-icon-twentfour[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentyfour);
    mask-image: var(--pagebuilder-usp-icon-twentyfour);
}
.pagebuilder-usp-icon-twentfour[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentyfour);
}

.pagebuilder-usp-icon-twentfive[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentyfive);
    mask-image: var(--pagebuilder-usp-icon-twentyfive);
}
.pagebuilder-usp-icon-twentfive[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentyfive);
}

.pagebuilder-usp-icon-twentsix[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentysix);
    mask-image: var(--pagebuilder-usp-icon-twentysix);
}
.pagebuilder-usp-icon-twentsix[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentysix);
}

.pagebuilder-usp-icon-twentseven[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentyseven);
    mask-image: var(--pagebuilder-usp-icon-twentyseven);
}
.pagebuilder-usp-icon-twentseven[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentyseven);
}

.pagebuilder-usp-icon-twenteight[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentyeight);
    mask-image: var(--pagebuilder-usp-icon-twentyeight);
}
.pagebuilder-usp-icon-twenteight[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentyeight);
}

.pagebuilder-usp-icon-twentnine[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentynine);
    mask-image: var(--pagebuilder-usp-icon-twentynine);
}
.pagebuilder-usp-icon-twentynine[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentynine);
}
.pagebuilder-usp-icon-thirty[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-thirty);
    mask-image: var(--pagebuilder-usp-icon-thirty);
}
.pagebuilder-usp-icon-thirty[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-thirty);
}

.pagebuilder-usp-icon-thirtyone[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-thirtyone);
    mask-image: var(--pagebuilder-usp-icon-thirtyone);
}
.pagebuilder-usp-icon-thirtyone[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-thirtyone);
}

/* .pagebuilder-usp-icon-thirtyone[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-thirtyone);
    mask-image: var(--pagebuilder-usp-icon-thirtyone);
}
.pagebuilder-usp-icon-thirtyone[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-thirtyone);
} */

/*
.pagebuilder-usp-icon-thirty[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-thirty);
    mask-image: var(--pagebuilder-usp-icon-twentysix);
}
.pagebuilder-usp-icon-thirty[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-thirty);
}
*/

[data-content-type="pinpoint_pagebuilderuspbar"] {
    display: grid;
    gap: 0;
    grid-template-columns: auto;
}

[data-content-type="pinpoint_pagebuilderuspitem"],
[data-content-type="pinpoint_pagebuilderuspitem"] a
{
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 12px;
    grid-row: 1;
}

[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="center"],
[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="center"] a {
    justify-content: center;
}

[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="left"],
[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="left"] a {
    justify-content: flex-start;
}

[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="left"] [data-content-type="pinpoint_pagebuilderuspitemtext"],
[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="left"] a [data-content-type="pinpoint_pagebuilderuspitemtext"] {
    flex: 1;
}

[data-content-type="pinpoint_pagebuilderuspitem"][data-enable-chevron="yes"]::after {
    content: "";
    min-width: 12px;
    min-height: 12px;
    -webkit-mask-image: var(--pagebuilder-usp-icon-chevron);
    mask-image: var(--pagebuilder-usp-icon-chevron);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #000;
}

[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="right"],
[data-content-type="pinpoint_pagebuilderuspitem"][data-align-type="right"] a {
    justify-content: flex-end;
}

[data-content-type='pinpoint_pagebuilderuspitemicon'] {
    min-height: 16px;
    min-width: 16px;
}

[data-content-type='pinpoint_pagebuilderuspitemicon'] [data-element="usp_icon_element"][data-icon-mask="true"] {
    height: 0;
    background-color: black;
}

[data-content-type="pinpoint_pagebuilderuspitemicon"] [data-element="usp_icon_element"]::after {
     content: "";
     display: inline-flex;
     width: 16px;
     height: 16px;
 }

[data-content-type="pinpoint_pagebuilderuspitemicon"] [data-element="usp_icon_element"][data-icon-mask="true"]::after {
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: inherit;
}

[data-content-type="pinpoint_pagebuilderuspitemicon"] [data-element="usp_icon_element"][data-icon-mask="false"]::after {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
 }