@layer components {
/* Every icon is a square background-image. Sizing is a shared rule so a
parent can scale its icons by setting --icon-size (custom properties
inherit) instead of each parent repeating an icon descendant rule;
--icon-intrinsic is an icon's own size where it is not the 24px default.
Icons never shrink: they are flex items in chips, rows, and nav links,
and a squashed glyph is always a bug.
The selector pair matches the class anywhere in the attribute, not only
first: [class^=] tests the raw attribute string, so the ^= half alone
would silently drop the box from `class="ws-thing icon-mail"`. */
[class^="icon-"],
[class*=" icon-"] {
width: var(--icon-size, var(--icon-intrinsic, 24px));
height: var(--icon-size, var(--icon-intrinsic, 24px));
flex-shrink: 0;
background: no-repeat center / contain;
}
.icon-star {
--icon-intrinsic: 20px;
display: inline-block;
background-image: url("data:image/svg+xml,");
}
.icon-clock {
--icon-intrinsic: 20px;
display: inline-block;
background-image: url("data:image/svg+xml,");
}
.icon-checkmark {
--icon-mask: url("data:image/svg+xml,");
--icon-intrinsic: 20px;
display: inline-block;
background-image: url("data:image/svg+xml,");
}
.icon-ring { --icon-intrinsic: 20px; --icon-mask: url("data:image/svg+xml,"); display: inline-block; background-image: url("data:image/svg+xml,"); }
.icon-reverse { --icon-intrinsic: 20px; --icon-mask: url("data:image/svg+xml,"); display: inline-block; background-image: url("data:image/svg+xml,"); }
.icon-caution { --icon-intrinsic: 20px; --icon-mask: url("data:image/svg+xml,"); display: inline-block; background-image: url("data:image/svg+xml,"); }
.icon-lock { --icon-intrinsic: 20px; --icon-mask: url("data:image/svg+xml,"); display: inline-block; background-image: url("data:image/svg+xml,"); }
.icon-burst {
--icon-intrinsic: 20px;
display: inline-block;
background-image: url("data:image/svg+xml,");
}
.icon-checkmark-filled {
background-image: url("data:image/svg+xml,");
}
.icon-document {
background-image: url("data:image/svg+xml,");
}
.icon-shield {
background-image: url("data:image/svg+xml,");
}
.icon-people {
background-image: url("data:image/svg+xml,");
}
.icon-dollar {
background-image: url("data:image/svg+xml,");
}
.icon-briefcase {
background-image: url("data:image/svg+xml,");
}
.icon-liability {
background-image: url("data:image/svg+xml,");
}
.icon-property {
background-image: url("data:image/svg+xml,");
}
.icon-cyber {
background-image: url("data:image/svg+xml,");
}
.icon-employment {
background-image: url("data:image/svg+xml,");
}
.icon-directors {
background-image: url("data:image/svg+xml,");
}
.icon-workers-comp {
background-image: url("data:image/svg+xml,");
}
.icon-check-green {
--icon-intrinsic: 12px;
background-image: url("data:image/svg+xml,");
}
.icon-globe {
background-image: url("data:image/svg+xml,");
}
.icon-bolt {
background-image: url("data:image/svg+xml,");
}
.icon-mail {
background-image: url("data:image/svg+xml,");
}
.icon-phone {
background-image: url("data:image/svg+xml,");
}
.icon-location {
background-image: url("data:image/svg+xml,");
}
}