/**
 * 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/pinpoint-logo.svg');
    --pagebuilder-usp-icon-nineteen: url('../css/images/usp-icon-1.png');
    --pagebuilder-usp-icon-twenty: url('../css/images/usp-icon-2.svg');
    --pagebuilder-usp-icon-twentyone: url('../css/images/usp-icon-3.svg');
    --pagebuilder-usp-icon-twentytwo: url('../css/images/careers-icon.svg');
    --pagebuilder-usp-icon-twentythree: url('../css/images/email-icon.svg');
    --pagebuilder-usp-icon-twentyfour: url('../css/images/phone-icon.svg');
    --pagebuilder-usp-icon-twentyfive: url('../css/images/trade-icon.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-twentytwo[data-icon-mask="true"]::after {
    -webkit-mask-image: var(--pagebuilder-usp-icon-twentytwo);
    mask-image: var(--pagebuilder-usp-icon-twentytwo);
}
.pagebuilder-usp-icon-twentytwo[data-icon-mask="false"]::after {
    background-image: var(--pagebuilder-usp-icon-twentytwo);
}

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

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

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

/*
.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_pagebuilderuspitemtext"] {
    display: flex;
    flex-direction: column;
}

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

[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: 50px;
     height: 50px;
 }

[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;
 }