/* FontAwesome Pro 6.7.2 icons as local SVG masks (replaces the FA Kit).
   To add an icon: save the SVG in ../images/icons/{weight}-{name}.svg and add a
   rule below with width = viewBox width / viewBox height (em). */
i.fa, i.fas, i.far, i.fal, i.fat, i.fad, i.fab,
i[class*="fa-solid"], i[class*="fa-regular"], i[class*="fa-light"],
i[class*="fa-thin"], i[class*="fa-brands"], i[class*="fa-sharp"] {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: -0.125em;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: contain;      mask-size: contain;
}

i.fa-arrow-right {
    width: 0.875em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-arrow-right.svg");
            mask-image: url("../images/icons/light-arrow-right.svg");
}

i.fa-square-arrow-right {
    width: 0.875em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-square-arrow-right.svg");
            mask-image: url("../images/icons/light-square-arrow-right.svg");
}

i.fa-circle-arrow-down {
    width: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-circle-arrow-down.svg");
            mask-image: url("../images/icons/light-circle-arrow-down.svg");
}

i.fa-circle-arrow-right {
    width: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/thin-circle-arrow-right.svg");
            mask-image: url("../images/icons/thin-circle-arrow-right.svg");
}

i.fa-circle-arrow-left {
    width: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/thin-circle-arrow-left.svg");
            mask-image: url("../images/icons/thin-circle-arrow-left.svg");
}

/* Swiper sizes the navigation icon to the whole button
   (.swiper-button-next svg {width:100%;height:100%}): same for the <i>. */
.swiper-button-next i[class*="fa-"],
.swiper-button-prev i[class*="fa-"] {
    width: 100%;
    height: 100%;
}
