icon.css

/* TRUMPS: Icons */
@import url('./icon.fonts.css');

/* To overwrite `icon.fonts.css` icon sizes */
/* relative units */
.icon-sm,
.icon-lg {
  /* To disallow new icon size method (relative, by class) */
  /* FAQ: Avoid new solutions until icons are solely managed by <Icon> */
  font-size: unset;
}
/* absolute units */
/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
.icon-16,
.icon-32 {
  /* To disallow unsupported font sizes */
  font-size: unset;
}
.icon-18 {
  font-size: 18px;
}
.icon-24 {
  font-size: 24px;
}
.icon-64 {
  font-size: 64px;
}

/* To tweak icon size and support `.icon-set` */
.icon,
.icon-set {
  width: 1em;
  height: 1em;
  font-size: 1.125rem; /* ~18px (16px design * 1.2 design-to-app ratio) (rounded) */
  vertical-align: middle;
  display: inline-flex; /* `flex` to align `::before`; `inline` to not trigger new line */
  /* a modern slimmer alternative to `&::before { display: block; }` */
}

/* To layer multiple icons atop each other, wrap them in this */
.icon-set {
  position: relative;
}
.icon-set > .icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* To remove support for extra icons that should not be used */
.icon-jobs-history::before {
  content: unset;
}

/* Aliases */
.icon-collapse/* aka .icon-contract */::before {
  content: '\ea15';
}

/* Overrides */

/* Align wrapped button text in buttons that have icons */
/* HACK: Placeholder style until UI is finalized and componetized */
.btn .icon + span,
.btn .loading-icon + span {
  vertical-align: middle;
}

/* Placeholders */
/* FAQ: Some icons do not exist, but can be faked (with caveats) */

/* To create a small "chevron" */
/* CAVEAT: Use `--color` to set color */
[class*='icon-nav-'] {
  border: solid var(--color, var(--global-color-primary--xx-dark));
  border-width: 0 0.25em 0.25em 0;
  font-size: 8px; /* thus 1px = 0.125em */
  /* display: inline-block; */ /* let `.icon`'s `display: inline-flex;` do it */
  /* padding: var(--size); */ /* let `.icon`'s equal `width` & `height` do it */
}
/* To rotate icon each direction and move graphic to stay within icon box */
/* NOTE: For '-up' and '-down':
         - translate gave (sub-pixel) better horz. align than relative position
         - relative position gave  easier vertical alignment
         So 'left' and 'right' (for consistency) use translate for horz. move */
.icon-nav-up {
  position: relative;
  top: 2px;
  transform: rotate(-135deg) translate(-1px, 1px);
}
.icon-nav-left {
  transform: rotate(135deg) translate(-1px, -1px);
}
.icon-nav-down {
  position: relative;
  top: -2px;
  transform: rotate(45deg) translate(1px, -1px);
}
.icon-nav-right {
  transform: rotate(-45deg) translate(-1px, -1px);
}