/**
 * SVT bar marks
 *
 * Social logos are global.
 * Usability marks are per top-level product category.
 *
 * Edit the SVG, not this file, unless you are adding a new category:
 *   images/svt-marks/social/
 *   images/svt-marks/water-filtration/
 *   images/svt-marks/{next-top-level-slug}/
 *
 * Line marks use a mask so they pick up --svt-ink.
 * Brand marks (multi-color) use the SVG as a background.
 */

.svt-bar-logo.is-line {
	background-color: var(--svt-ink);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.svt-bar-logo.is-brand {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* --------------------------------------------------------------------------
   Social — global
   -------------------------------------------------------------------------- */

.svt-bar-logo[data-mark="reddit"] {
	background-image: url("../images/svt-marks/social/reddit.svg?v=4");
}

.svt-bar-logo[data-mark="google"] {
	background-image: url("../images/svt-marks/social/google.svg?v=4");
}

.svt-bar-logo[data-mark="youtube"] {
	background-image: url("../images/svt-marks/social/youtube.svg?v=4");
}

.svt-bar-logo[data-mark="amazon"] {
	background-image: url("../images/svt-marks/social/amazon.svg?v=4");
}

.svt-bar-logo[data-mark="user"] {
	background-image: url("../images/svt-marks/social/user.svg?v=4");
}

/* --------------------------------------------------------------------------
   Water Filtration (and every child: RO, Whole House, Under Sink, …)
   -------------------------------------------------------------------------- */

.svt-bar-logo[data-mark="droplet"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/contaminant-reduction.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/contaminant-reduction.svg?v=17");
}

.svt-bar-logo[data-mark="badge"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/certification-coverage.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/certification-coverage.svg?v=17");
}

.svt-bar-logo[data-mark="gauge"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/flow-rate.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/flow-rate.svg?v=17");
}

.svt-bar-logo[data-mark="calendar"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/filter-life.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/filter-life.svg?v=17");
}

.svt-bar-logo[data-mark="gear"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/gear.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/gear.svg?v=17");
}

.svt-bar-logo[data-mark="headset"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/warranty-support.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/warranty-support.svg?v=17");
}

.svt-bar-logo[data-mark="shield"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/warranty.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/warranty.svg?v=17");
}

.svt-bar-logo[data-mark="tools"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/ease-of-installation.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/ease-of-installation.svg?v=17");
}

.svt-bar-logo[data-mark="tag"] {
	-webkit-mask-image: url("../images/svt-marks/water-filtration/value.svg?v=17");
	mask-image: url("../images/svt-marks/water-filtration/value.svg?v=17");
}

/* --------------------------------------------------------------------------
   Next top-level category
   Add images/svt-marks/{slug}/*.svg and rules here.
   -------------------------------------------------------------------------- */

/* Water-filtration marks carry the bar colour, not ink: the mark and the bar
   are one unit and reading as two was the whole problem. Mask, so this is the
   only place the colour is set. */
.svt-bar-logo.is-line[data-mark-set="water-filtration"] {
    background-color: var(--svt-mark, #C8842B);
}