@phun-ky/speccer/dist/speccer.css

A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements

.ph-speccer.speccer {
  --ph-speccer-color-artificialStrawberry: #ff3aa8;
  --ph-speccer-color-venusSlipperOrchid: #db6fff;
  --ph-speccer-color-superBanana: #fff76f;
  --ph-speccer-color-white: #fff;
  --ph-speccer-color-carbon: #333;
  --ph-speccer-color-red: #f00;
  --ph-speccer-color-niuZaiSeDenim: #0074e8;
  --ph-speccer-color-beautifulBlue: #1868b2;
  --ph-speccer-color-fuchsiaBlue: #7e60c5;
  --ph-speccer-color-sangDeBoeuf: #7a1000;
  --ph-speccer-color-galacticPurple: #3f2f9b;
}

.ph-speccer.speccer{
  --ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
  --ph-speccer-spacing-color: var(--ph-speccer-base-color);
  --ph-speccer-spacing-padding-color: var(--ph-speccer-color-carbon);
  --ph-speccer-spacing-padding-color-background: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
  --ph-speccer-spacing-margin-color: var(--ph-speccer-color-red);
  --ph-speccer-spacing-margin-color-background: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
  --ph-speccer-spacing-line-width: var(--ph-speccer-line-width);
  --ph-speccer-typography-background-color: var(--ph-speccer-color-white);
  --ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
  --ph-speccer-typography-color-text: var(--ph-speccer-base-color);
  --ph-speccer-typography-color-value: var(--ph-speccer-base-color);
  --ph-speccer-mark-background-color: rgb(from var(--ph-speccer-base-color) r g b / var(--ph-speccer-opacity-20));
  --ph-speccer-mark-border-color: var(--ph-speccer-base-color);
  --ph-speccer-mark-border-width: 1.5px;
  --ph-speccer-mark-border-style: solid;
  --ph-speccer-measure-color: var(--ph-speccer-color-red);
  --ph-speccer-measure-line-width: 1.5px;
  --ph-speccer-measure-border-style: dotted;
  --ph-speccer-measure-size: 8px;
  --ph-speccer-a11y-color-background: var(--ph-speccer-color-beautifulBlue);
  --ph-speccer-a11y-landmark-color-background: var(--ph-speccer-color-fuchsiaBlue);
  --ph-speccer-a11y-autocomplete-color-background: var(--ph-speccer-color-sangDeBoeuf);
  --ph-speccer-a11y-headings-color-background: var(--ph-speccer-color-galacticPurple);
  --ph-speccer-color-text-light: var(--ph-speccer-color-white);
  --ph-speccer-color-text-dark: var(--ph-speccer-color-carbon);
  --ph-speccer-pin-color: var(--ph-speccer-base-color);
  --ph-speccer-pin-size: 24px;
  --ph-speccer-pin-space: 48px;
  --ph-speccer-line-height: 12px;
  --ph-speccer-line-width: 1.5px;
  --ph-speccer-line-width-negative: -1.5px;
  --ph-speccer-opacity-20: 0.2;
  --ph-speccer-opacity-40: 0.4;
  --ph-speccer-font-family: "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --ph-speccer-font-size: 12px;
  --ph-speccer-transition-default: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-speccer.speccer,
.ph-speccer.speccer::after,
.ph-speccer.speccer::before {
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.ph-speccer.speccer,
.ph-speccer.speccer::after,
.ph-speccer.speccer::before {
  font-family: var(--ph-speccer-font-family) !important;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  position: absolute;
  display: flex;
  font-size: 12px;
  line-height: 12px;
}
svg.ph-speccer {
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#ph-speccer-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
svg.ph-speccer .ph-speccer.path,
svg.ph-speccer .ph-speccer.circle {
  color: var(--ph-speccer-base-color, #ff3aa8);
}
[data-speccer="pin-area"] {
  counter-reset: type;
}
.ph-speccer.speccer.pin {
  font-family: var(--ph-speccer-font-family);
  height: var(--ph-speccer-pin-size);
  width: var(--ph-speccer-pin-size);
  display: flex;
  position: absolute;
  border-radius: 100%;
  background-color: var(--ph-speccer-pin-color);
  color: var(--ph-speccer-color-text-light);
  font-weight: 400;
  align-items: center;
  justify-content: center;
  line-height: 150%;
  font-size: 16px;
  z-index: 100000;
}
.ph-speccer.speccer.pin::after {
  content: "";
  position: absolute;
  height: var(--ph-speccer-pin-space);
  top: 100%;
  width: var(--ph-speccer-line-width);
  background-color: var(--ph-speccer-pin-color);
  z-index: 99999;
}
.ph-speccer.speccer.pin.svg::after,
.ph-speccer.speccer.pin.text::after,
.ph-speccer.speccer.pin.curly::after {
  content: none !important;
}
.ph-speccer.speccer.pin::after,
.ph-speccer.speccer.pin.top::after {
  height: var(--ph-speccer-pin-space);
  width: var(--ph-speccer-line-width);
  top: 100%;
  right: 50%;
}
.ph-speccer.speccer.pin.left::after {
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
  top: 50%;
  left: 100%;
  right: auto;
}
.ph-speccer.speccer.pin.right::after {
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
  top: 50%;
  left: auto;
  right: 100%;
}
.ph-speccer.speccer.pin.bottom::after {
  height: var(--ph-speccer-pin-space);
  width: var(--ph-speccer-line-width);
  top: calc(-100% - (var(--ph-speccer-pin-space) / 2));
  right: 50%;
}
.ph-speccer.speccer.pin.left::after {
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
  top: 50%;
  left: 100%;
}
.ph-speccer.speccer.pin.right::after {
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
  top: 50%;
  right: 100%;
}
.ph-speccer.path.speccer.text {
  color: var(--ph-speccer-color-text-dark);
}
.ph-speccer.speccer.pin.text {
  font-family: var(--ph-speccer-font-family);
  height: auto;
  min-height: var(--ph-speccer-pin-size);
  display: flex;
  position: absolute;
  border-radius: 0;
  background-color: transparent;
  color: var(--ph-speccer-color-text-dark);
  font-weight: 400;
  align-items: flex-start;
  justify-content: center;
  line-height: 130%;
  z-index: 100000;
  flex-direction: column;
  width: 250px;
  grid-gap: 2px;
}
.ph-speccer.speccer.pin.text.right {
  padding-left: 1rem;
}
.ph-speccer.speccer.pin.text.left {
  padding-right: 1rem;
  width: 170px;
}
.ph-speccer.speccer.pin.text.top {
  padding-bottom: 1rem;
}
.ph-speccer.speccer.pin.text.bottom {
  padding-top: 1rem;
}
.ph-speccer.speccer.pin.text .ph-speccer.title {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
}
.ph-speccer.speccer.pin.text .ph-speccer.description {
  line-height: 130%;
  position: relative;
  font-weight: 600;
  font-size: 0.875rem;
}
.ph-speccer.speccer.pin.text .ph-speccer.heading {
  line-height: 130%;
  position: relative;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--ph-speccer-base-color);
}
.ph-speccer.speccer.pin.enclose {
  border-radius: 0;
  background-color: transparent;
  color: var(--ph-speccer-measure-color);
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.enclose::after {
  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
  bottom: auto;
}
.ph-speccer.speccer.pin.enclose::before {
  bottom: 100%;
  top: auto;
}
.ph-speccer.speccer.pin.enclose.right::after {
  left: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
  right: auto;
}
.ph-speccer.speccer.pin.enclose.right::before {
  left: 100%;
  right: auto;
}
.ph-speccer.speccer.pin.enclose.left::after {
  left: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
  right: auto;
}
.ph-speccer.speccer.pin.enclose.left::before {
  right: 100%;
  left: auto;
}
.ph-speccer.speccer.pin.enclose.top::after {
  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
  bottom: auto;
}
.ph-speccer.speccer.pin.enclose.top::before {
  bottom: 100%;
  top: auto;
}
.ph-speccer.speccer.pin.enclose.bottom::after {
  top: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
  bottom: auto;
}
.ph-speccer.speccer.pin.enclose.bottom::before {
  top: 100%;
  bottom: auto;
}
.ph-speccer.speccer.pin.enclose.right,
.ph-speccer.speccer.pin.enclose.left {
  width: 8px;
}
.ph-speccer.speccer.pin.enclose,
.ph-speccer.speccer.pin.enclose.top,
.ph-speccer.speccer.pin.enclose.bottom {
  height: 8px;
}
.ph-speccer.speccer.pin.enclose::after,
.ph-speccer.speccer.pin.enclose.right::after,
.ph-speccer.speccer.pin.enclose.left::after,
.ph-speccer.speccer.pin.enclose.top::after,
.ph-speccer.speccer.pin.enclose.bottom::after {
  content: attr(data-pin-counter);
  height: var(--ph-speccer-pin-size);
  width: var(--ph-speccer-pin-size);
  display: flex;
  position: absolute;
  border-radius: 100%;
  background-color: var(--ph-speccer-pin-color);
  color: var(--ph-speccer-color-text-light);
  align-items: center;
  justify-content: center;
  line-height: 150%;
  font-size: 16px;
  z-index: 100000;
}
.ph-speccer.speccer.pin.enclose.right::after,
.ph-speccer.speccer.pin.enclose.left::after {
  top: 50%;
  transform: translateY(-50%);
}
.ph-speccer.speccer.pin.enclose::after,
.ph-speccer.speccer.pin.enclose.top::after,
.ph-speccer.speccer.pin.enclose.bottom::after {
  left: 50%;
  transform: translateX(-50%);
}
.ph-speccer.speccer.pin.enclose::before,
.ph-speccer.speccer.pin.enclose.right::before,
.ph-speccer.speccer.pin.enclose.left::before,
.ph-speccer.speccer.pin.enclose.top::before,
.ph-speccer.speccer.pin.enclose.bottom::before {
  content: "";
  position: absolute;
  background-color: var(--ph-speccer-pin-color);
  z-index: 100000;
  display: block;
}
.ph-speccer.speccer.pin.enclose.right::before,
.ph-speccer.speccer.pin.enclose.left::before {
  top: 50%;
  transform: translateY(-50%);
  height: var(--ph-speccer-line-width);
  width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
}
.ph-speccer.speccer.pin.enclose::before,
.ph-speccer.speccer.pin.enclose.top::before,
.ph-speccer.speccer.pin.enclose.bottom::before {
  left: 50%;
  transform: translateX(-50%);
  width: var(--ph-speccer-line-width);
  height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
}
.ph-speccer.speccer.pin.bracket:not(.curly) {
  border-radius: 0;
  background-color: transparent;
  color: var(--ph-speccer-measure-color);
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  border-bottom: none;
}
.ph-speccer.speccer.pin.bracket:not(.curly)::after {
  top: calc(-8px - var(--ph-speccer-pin-space));
}
.ph-speccer.speccer.pin.bracket:not(.curly)::before {
  bottom: 100%;
}
.ph-speccer.speccer.pin.bracket:not(.curly).right {
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  border-left: none;
}
.ph-speccer.speccer.pin.bracket:not(.curly).right::after {
  left: calc(8px + var(--ph-speccer-pin-space));
}
.ph-speccer.speccer.pin.bracket:not(.curly).right::before {
  left: 100%;
  right: auto;
}
.ph-speccer.speccer.pin.bracket:not(.curly).left {
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  border-right: none;
}
.ph-speccer.speccer.pin.bracket:not(.curly).left::after {
  left: calc(-8px - var(--ph-speccer-pin-space));
}
.ph-speccer.speccer.pin.bracket:not(.curly).left::before {
  right: 100%;
  left: auto;
}
.ph-speccer.speccer.pin.bracket:not(.curly).top {
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  border-bottom: none;
}
.ph-speccer.speccer.pin.bracket:not(.curly).top::after {
  top: calc(-8px - var(--ph-speccer-pin-space));
}
.ph-speccer.speccer.pin.bracket:not(.curly).top::before {
  bottom: 100%;
}
.ph-speccer.speccer.pin.bracket:not(.curly).bottom {
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  border-top: none;
}
.ph-speccer.speccer.pin.bracket:not(.curly).bottom::after {
  top: calc(8px + var(--ph-speccer-pin-space));
}
.ph-speccer.speccer.pin.bracket:not(.curly).bottom::before {
  top: 100%;
}
.ph-speccer.speccer.pin.bracket.right:not(.curly),
.ph-speccer.speccer.pin.bracket.left:not(.curly) {
  width: 8px;
}
.ph-speccer.speccer.pin.bracket:not(.curly),
.ph-speccer.speccer.pin.bracket.top:not(.curly),
.ph-speccer.speccer.pin.bracket.bottom:not(.curly) {
  height: 8px;
}
.ph-speccer.speccer.pin.bracket:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.right:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.left:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.top:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.bottom:not(.curly)::after {
  content: attr(data-pin-counter);
  height: var(--ph-speccer-pin-size);
  width: var(--ph-speccer-pin-size);
  display: flex;
  position: absolute;
  border-radius: 100%;
  background-color: var(--ph-speccer-pin-color);
  color: var(--ph-speccer-color-text-light);
  align-items: center;
  justify-content: center;
  line-height: 150%;
  font-size: 16px;
  z-index: 100000;
}
.ph-speccer.speccer.pin.bracket.right:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.left:not(.curly)::after {
  top: 50%;
  transform: translateY(-50%);
}
.ph-speccer.speccer.pin.bracket:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.top:not(.curly)::after,
.ph-speccer.speccer.pin.bracket.bottom:not(.curly)::after {
  left: 50%;
  transform: translateX(-50%);
}
.ph-speccer.speccer.pin.bracket:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.right:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.left:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.top:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.bottom:not(.curly)::before {
  content: "";
  position: absolute;
  background-color: var(--ph-speccer-pin-color);
  z-index: 100000;
  display: block;
}
.ph-speccer.speccer.pin.bracket.right:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.left:not(.curly)::before {
  top: 50%;
  transform: translateY(-50%);
  height: var(--ph-speccer-line-width);
  width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
}
.ph-speccer.speccer.pin.bracket:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.top:not(.curly)::before,
.ph-speccer.speccer.pin.bracket.bottom:not(.curly)::before {
  left: 50%;
  transform: translateX(-50%);
  width: var(--ph-speccer-line-width);
  height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
}
.ph-speccer.speccer.pin.subtle {
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  background-color: var(--ph-speccer-color-text-light);
  color: var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.subtle.top::after,
.ph-speccer.speccer.pin.subtle.bottom::after {
  width: 0;
  background-color: transparent;
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.subtle.right::after,
.ph-speccer.speccer.pin.subtle.left::after {
  height: 0;
  background-color: transparent;
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.enclose.subtle {
  background-color: transparent;
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly) {
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
  background-color: transparent;
  border-bottom: none;
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top {
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
  border-bottom: none;
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom {
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
  border-top: none;
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right {
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
  border-left: none;
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left {
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
  border-right: none;
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly)::after {
  height: var(--ph-speccer-pin-size);
  width: var(--ph-speccer-pin-size);
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  background-color: var(--ph-speccer-color-text-light);
  color: var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top::before,
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom::before {
  width: 0;
  background-color: transparent;
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right::before,
.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left::before {
  height: 0;
  background-color: transparent;
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.enclose.subtle {
  border-style: dashed;
}
.ph-speccer.speccer.pin.enclose.subtle::after {
  height: var(--ph-speccer-pin-size);
  width: var(--ph-speccer-pin-size);
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
  background-color: var(--ph-speccer-color-text-light);
  color: var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.enclose.subtle.top::before,
.ph-speccer.speccer.pin.enclose.subtle.bottom::before {
  width: 0;
  background-color: transparent;
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.pin.enclose.subtle.right::before,
.ph-speccer.speccer.pin.enclose.subtle.left::before {
  height: 0;
  background-color: transparent;
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.a11y.landmark {
  position: absolute;
  background-color: var(--ph-speccer-a11y-landmark-color-background);
  color: var(--ph-speccer-color-text-light);
  font-family: var(--ph-speccer-font-family);
  justify-content: center;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  align-items: center;
  padding: 0 0.5rem;
  pointer-events: auto;
}
.ph-speccer.speccer.a11y.landmark::after {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(126,96,197,0);
  border-width: 14.2px;
}
.ph-speccer.speccer.a11y.landmark::after,
.ph-speccer.speccer.a11y.landmark.left::after {
  top: 50%;
  left: 100%;
  border-left-color: var(--ph-speccer-a11y-landmark-color-background);
  transform: translateY(-50%);
}
.ph-speccer.speccer.a11y.landmark.top::after {
  top: 0%;
  left: 50%;
  border-bottom-color: var(--ph-speccer-a11y-landmark-color-background);
  transform: translateX(-50%);
}
.ph-speccer.speccer.a11y.landmark.right::after {
  top: 50%;
  left: 0%;
  border-right-color: var(--ph-speccer-a11y-landmark-color-background);
  transform: translateY(-50%);
}
.ph-speccer.speccer.a11y.landmark.bottom::after {
  top: 0%;
  left: 50%;
  border-top-color: var(--ph-speccer-a11y-landmark-color-background);
  transform: translateX(-50%);
}
.ph-speccer.speccer.a11y.region {
  position: absolute;
  outline: 2px solid var(--ph-speccer-a11y-landmark-color-background);
  outline-offset: 2px;
}
.ph-speccer.speccer.a11y.tabstops {
  position: absolute;
  font-family: var(--ph-speccer-font-family);
  height: var(--ph-speccer-pin-size);
  width: var(--ph-speccer-pin-size);
  background-color: var(--ph-speccer-a11y-color-background);
  border-radius: 50%;
  color: var(--ph-speccer-color-text-light);
  font-weight: 400;
  align-items: center;
  justify-content: center;
  line-height: 150%;
  font-size: 16px;
  display: flex;
}
.ph-speccer.speccer.a11y.tabstops::before {
  position: static;
  content: attr(data-speccer-a11y-tabstops);
  text-align: center;
}
.ph-speccer.speccer.a11y.shortcut-holder {
  position: absolute;
  min-width: 120px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 0.5rem;
}
.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut {
  flex-shrink: 0;
  position: relative;
  background-color: var(--ph-speccer-a11y-color-background);
  border-radius: 0.5rem;
  color: var(--ph-speccer-color-text-light);
  font-family: var(--ph-speccer-font-family);
  display: inline-flex;
  text-transform: uppercase;
  border: 1pt solid var(--ph-speccer-a11y-color-background);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.75rem;
  text-transform: lowercase;
}
.ph-speccer.speccer.a11y.autocomplete {
  position: absolute;
  background-color: var(--ph-speccer-a11y-autocomplete-color-background);
  color: var(--ph-speccer-color-text-light);
  font-family: var(--ph-speccer-font-family);
  justify-content: center;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  align-items: center;
  padding: 0 0.5rem;
  pointer-events: auto;
}
.ph-speccer.speccer.a11y.autocomplete::after {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(126,96,197,0);
  border-width: 14.2px;
}
.ph-speccer.speccer.a11y.autocomplete::after,
.ph-speccer.speccer.a11y.autocomplete.left::after {
  top: 50%;
  left: 100%;
  border-left-color: var(--ph-speccer-a11y-autocomplete-color-background);
  transform: translateY(-50%);
}
.ph-speccer.speccer.a11y.autocomplete.top::after {
  top: 0%;
  left: 50%;
  border-bottom-color: var(--ph-speccer-a11y-autocomplete-color-background);
  transform: translateX(-50%);
}
.ph-speccer.speccer.a11y.autocomplete.right::after {
  top: 50%;
  left: 0%;
  border-right-color: var(--ph-speccer-a11y-autocomplete-color-background);
  transform: translateY(-50%);
}
.ph-speccer.speccer.a11y.autocomplete.bottom::after {
  top: 0%;
  left: 50%;
  border-top-color: var(--ph-speccer-a11y-autocomplete-color-background);
  transform: translateX(-50%);
}
.ph-speccer.speccer.a11y.headings {
  position: absolute;
  background-color: var(--ph-speccer-a11y-headings-color-background);
  color: var(--ph-speccer-color-text-light);
  font-family: var(--ph-speccer-font-family);
  justify-content: center;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  align-items: center;
  padding: 0 0.5rem;
  pointer-events: auto;
}
.ph-speccer.speccer.a11y.headings::after {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(126,96,197,0);
  border-width: 14.2px;
}
.ph-speccer.speccer.a11y.headings::after,
.ph-speccer.speccer.a11y.headings.left::after {
  top: 50%;
  left: 100%;
  border-left-color: var(--ph-speccer-a11y-headings-color-background);
  transform: translateY(-50%);
}
.ph-speccer.speccer.a11y.headings.top::after {
  top: 0%;
  left: 50%;
  border-bottom-color: var(--ph-speccer-a11y-headings-color-background);
  transform: translateX(-50%);
}
.ph-speccer.speccer.a11y.headings.right::after {
  top: 50%;
  left: 0%;
  border-right-color: var(--ph-speccer-a11y-headings-color-background);
  transform: translateY(-50%);
}
.ph-speccer.speccer.a11y.headings.bottom::after {
  top: 0%;
  left: 50%;
  border-top-color: var(--ph-speccer-a11y-headings-color-background);
  transform: translateX(-50%);
}
.ph-speccer.speccer.typography {
  background-color: var(--ph-speccer-typography-background-color);
  color: var(--ph-speccer-typography-color-text);
  font-size: 10px;
  padding: 8px;
  max-width: 320px;
  width: auto;
  display: block;
  text-align: left;
  line-height: 140%;
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.typography:hover {
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
}
.ph-speccer.speccer.typography::after {
  content: "";
  position: absolute;
  display: block;
  background-color: var(--ph-speccer-pin-color);
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
}
.ph-speccer.speccer.typography.left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
}
.ph-speccer.speccer.typography.right::after {
  left: auto;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: var(--ph-speccer-line-width);
  width: var(--ph-speccer-pin-space);
}
.ph-speccer.speccer.typography.top::after {
  left: 50%;
  right: auto;
  top: 100%;
  transform: translateX(-50%);
  height: var(--ph-speccer-pin-space);
  width: var(--ph-speccer-line-width);
}
.ph-speccer.speccer.typography.bottom::after {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 100%;
  transform: translateX(-50%);
  height: var(--ph-speccer-pin-space);
  width: var(--ph-speccer-line-width);
}
.ph-speccer.speccer.typography .speccer-styles {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 140%;
  padding-left: 8px;
  font-size: 10px;
}
.ph-speccer.speccer.typography .speccer-styles .property {
  font-weight: normal;
  color: var(--ph-speccer-typography-color-property);
  text-align: left;
  padding: 0;
  font-size: 10px;
  margin: 0;
}
.ph-speccer.speccer.typography .speccer-styles > li {
  font-weight: normal;
  color: var(--ph-speccer-typography-color-value);
  text-align: left;
  padding: 0;
  font-size: 10px;
  margin: 0;
  list-style: none;
  border: none;
}
.ph-speccer.speccer.typography.syntax > pre {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--ph-speccer-font-family);
  color: var(--ph-speccer-color-text-light);
  background: transparent;
  border-radius: 0;
}
.ph-speccer.speccer.typography.syntax {
  --ph-speccer-color-code-color-1: #737373;
  --ph-speccer-color-code-color-2: #ff3aa8;
  --ph-speccer-color-code-color-3: #38383d;
  --ph-speccer-color-code-color-4: #ff3aa8;
  --ph-speccer-color-code-color-5: #ff3aa8;
  --ph-speccer-color-code-color-6: #0074e8;
  --ph-speccer-color-code-color-7: #000;
  --ph-speccer-color-code-color-8: #cd0404;
}
.ph-speccer.speccer.typography.syntax .namespace {
  opacity: 0.7;
}
.ph-speccer.speccer.typography.syntax .token.comment,
.ph-speccer.speccer.typography.syntax .token.prolog,
.ph-speccer.speccer.typography.syntax .token.doctype,
.ph-speccer.speccer.typography.syntax .token.cdata {
  color: var(--ph-speccer-color-code-color-1);
}
.ph-speccer.speccer.typography.syntax .token.null,
.ph-speccer.speccer.typography.syntax .token.operator,
.ph-speccer.speccer.typography.syntax .token.boolean,
.ph-speccer.speccer.typography.syntax .token.number {
  color: var(--ph-speccer-color-code-color-5);
}
.ph-speccer.speccer.typography.syntax .token.attr-name {
  color: var(--ph-speccer-color-code-color-2);
}
.ph-speccer.speccer.typography.syntax .token.entity,
.ph-speccer.speccer.typography.syntax .token.url,
.ph-speccer.speccer.typography.syntax .token.string {
  color: var(--ph-speccer-color-code-color-3);
}
.ph-speccer.speccer.typography.syntax .token.selector {
  color: var(--ph-speccer-color-code-color-3);
}
.ph-speccer.speccer.typography.syntax .token.atrule,
.ph-speccer.speccer.typography.syntax .token.attr-value,
.ph-speccer.speccer.typography.syntax .token.keyword,
.ph-speccer.speccer.typography.syntax .token.control,
.ph-speccer.speccer.typography.syntax .token.directive,
.ph-speccer.speccer.typography.syntax .token.important,
.ph-speccer.speccer.typography.syntax .token.unit {
  color: var(--ph-speccer-color-code-color-4);
}
.ph-speccer.speccer.typography.syntax .token.regex,
.ph-speccer.speccer.typography.syntax .token.statement {
  color: var(--ph-speccer-color-code-color-3);
}
.ph-speccer.speccer.typography.syntax .token.placeholder,
.ph-speccer.speccer.typography.syntax .token.variable {
  color: var(--ph-speccer-color-code-color-6);
}
.ph-speccer.speccer.typography.syntax .token.property,
.ph-speccer.speccer.typography.syntax .token.tag {
  color: var(--ph-speccer-color-code-color-6);
}
.ph-speccer.speccer.typography.syntax .token.important,
.ph-speccer.speccer.typography.syntax .token.statement {
  font-weight: bold;
}
.ph-speccer.speccer.typography.syntax .token.punctuation {
  color: var(--ph-speccer-color-code-color-7);
}
.ph-speccer.speccer.typography.syntax .token.entity {
  cursor: help;
}
.ph-speccer.speccer.typography.syntax .token.debug {
  color: var(--ph-speccer-color-code-color-8);
}
.ph-speccer.speccer.speccer-grid-container {
  justify-content: initial;
  transition: var(--ph-speccer-transition-default);
  display: grid;
  position: absolute;
  counter-reset: column-gap;
  column-gap: var(--ph-speccer-grid-gap-original);
  justify-content: initial;
  transition: var(--ph-speccer-transition-default);
  display: grid;
  position: absolute;
}
.ph-speccer.speccer.speccer-grid-row-container {
  justify-content: initial;
  transition: var(--ph-speccer-transition-default);
  display: grid;
  position: absolute;
  counter-reset: row-gap;
  row-gap: var(--ph-speccer-grid-row-gap-original);
}
.ph-speccer.speccer.speccer-grid-item {
  transition: var(--ph-speccer-transition-default);
  position: relative;
  height: 100%;
  border-left: 1px solid var(--ph-speccer-base-color);
  border-right: 1px solid var(--ph-speccer-base-color);
}
.ph-speccer.speccer.speccer-grid-row-item {
  transition: var(--ph-speccer-transition-default);
  position: relative;
  height: 100%;
  border-top: 1px solid var(--ph-speccer-base-color);
  border-bottom: 1px solid var(--ph-speccer-base-color);
  width: 100%;
}
.ph-speccer.speccer.speccer-grid-item::before {
  transition: var(--ph-speccer-transition-default);
  font-family: var(--ph-speccer-font-family) !important;
  font-size: 16px;
  position: absolute;
  background-color: var(--ph-speccer-base-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ph-speccer-color-text-light);
  counter-increment: column-gap;
  content: counter(column-gap);
  top: -32px;
  left: 100%;
  height: 32px;
  width: calc(var(--ph-speccer-grid-gap) + 2px);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.ph-speccer.speccer.speccer-grid-row-item::before {
  transition: var(--ph-speccer-transition-default);
  font-family: var(--ph-speccer-font-family) !important;
  font-size: 16px;
  position: absolute;
  background-color: var(--ph-speccer-base-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ph-speccer-color-text-light);
  counter-increment: row-gap;
  content: counter(row-gap);
  left: -32px;
  top: 100%;
  width: 32px;
  height: calc(var(--ph-speccer-grid-row-gap) + 2px);
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.ph-speccer.speccer.speccer-grid-item:first-child::after {
  transition: var(--ph-speccer-transition-default);
  font-family: var(--ph-speccer-font-family) !important;
  font-size: 16px;
  position: absolute;
  background-color: var(--ph-speccer-base-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ph-speccer-color-text-light);
  counter-increment: column-gap;
  content: counter(column-gap);
  top: -32px;
  left: 100%;
  height: 32px;
  width: calc(var(--ph-speccer-grid-gap) + 2px);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.ph-speccer.speccer.speccer-grid-row-item:first-child::after {
  transition: var(--ph-speccer-transition-default);
  font-family: var(--ph-speccer-font-family) !important;
  font-size: 16px;
  position: absolute;
  background-color: var(--ph-speccer-base-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ph-speccer-color-text-light);
  counter-increment: row-gap;
  content: counter(row-gap);
  left: -32px;
  top: 100%;
  width: 32px;
  height: calc(var(--ph-speccer-grid-row-gap) + 2px);
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item::before,
.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child::after {
  left: calc(100% - ((var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original)) / 2));
}
.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item::before,
.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child::after {
  top: calc(100% - ((var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original)) / 2));
}
.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child::before {
  position: absolute;
  top: -32px;
  right: auto;
  left: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
}
.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child::before {
  position: absolute;
  left: -32px;
  bottom: auto;
  top: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
}
.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child::before {
  position: absolute;
  top: -32px;
  left: auto;
  right: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
}
.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child::before {
  position: absolute;
  left: -32px;
  top: auto;
  bottom: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
}
.ph-speccer.speccer.spacing {
  pointer-events: none;
  transition: none;
  white-space: nowrap;
}
.ph-speccer.speccer.spacing.padding {
  background-color: var(--ph-speccer-spacing-padding-color-background);
  color: var(--ph-speccer-spacing-padding-color);
}
.ph-speccer.speccer.spacing.padding::after,
.ph-speccer.speccer.spacing.padding::before {
  transition: none;
  content: "";
  position: absolute;
}
.ph-speccer.speccer.spacing.padding.bottom,
.ph-speccer.speccer.spacing.padding.top {
  display: flex;
  justify-content: flex-start;
  padding-left: 4px;
}
.ph-speccer.speccer.spacing.padding.bottom::after,
.ph-speccer.speccer.spacing.padding.top::after {
  left: calc(6ch - 5px);
  height: 100%;
  width: 10px;
  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
  border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
}
.ph-speccer.speccer.spacing.padding.bottom::before,
.ph-speccer.speccer.spacing.padding.top::before {
  left: 6ch;
  height: 100%;
  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
  width: 0;
}
.ph-speccer.speccer.spacing.padding.left,
.ph-speccer.speccer.spacing.padding.right {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding-bottom: 4px;
}
.ph-speccer.speccer.spacing.padding.left::after,
.ph-speccer.speccer.spacing.padding.right::after {
  top: calc(100% - 24px - 10px);
  height: 10px;
  width: 100%;
  border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
}
.ph-speccer.speccer.spacing.padding.left::before,
.ph-speccer.speccer.spacing.padding.right::before {
  top: calc(100% - 24px - 5px);
  height: 0;
  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
  width: 100%;
}
.ph-speccer.speccer.spacing.margin {
  background-color: var(--ph-speccer-spacing-margin-color-background);
  color: var(--ph-speccer-spacing-margin-color);
}
.ph-speccer.speccer.spacing.margin.bottom,
.ph-speccer.speccer.spacing.margin.top {
  display: flex;
  justify-content: flex-start;
  padding-left: 4px;
}
.ph-speccer.speccer.spacing.margin.right,
.ph-speccer.speccer.spacing.margin.left {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding-bottom: 4px;
}
.ph-speccer.speccer.spacing.margin::after,
.ph-speccer.speccer.spacing.margin::before {
  transition: none;
  content: "";
  position: absolute;
}
.ph-speccer.speccer.spacing.margin.bottom::after,
.ph-speccer.speccer.spacing.margin.top::after {
  left: calc(6ch - 5px);
  height: 100%;
  width: 10px;
  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
  border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
}
.ph-speccer.speccer.spacing.margin.bottom::before,
.ph-speccer.speccer.spacing.margin.top::before {
  left: 6ch;
  height: 100%;
  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
  width: 0;
}
.ph-speccer.speccer.spacing.margin.left::after,
.ph-speccer.speccer.spacing.margin.right::after {
  height: 10px;
  border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
  width: 100%;
  top: calc(100% - 24px - 10px);
}
.ph-speccer.speccer.spacing.margin.left::before,
.ph-speccer.speccer.spacing.margin.right::before {
  height: 0;
  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
  width: 100%;
  top: calc(100% - 24px - 5px);
}
.ph-speccer.speccer.spacing.bound.padding.bottom,
.ph-speccer.speccer.spacing.bound.margin.bottom,
.ph-speccer.speccer.spacing.bound.padding.top,
.ph-speccer.speccer.spacing.bound.margin.top,
.ph-speccer.speccer.spacing.bound.padding.right,
.ph-speccer.speccer.spacing.bound.margin.right,
.ph-speccer.speccer.spacing.bound.padding.left,
.ph-speccer.speccer.spacing.bound.margin.left {
  justify-content: center;
  align-items: center;
  padding: 0;
}
.ph-speccer.speccer.measure {
  display: flex;
}
.ph-speccer.speccer.measure.height {
  color: var(--ph-speccer-measure-color);
  border-top: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
  border-bottom: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
}
.ph-speccer.speccer.measure.height.left::before {
  content: '';
  display: block;
  height: calc(100% + var(--ph-speccer-measure-line-width));
  background: transparent;
  position: absolute;
  left: calc(64px - 5px);
  width: 10px;
  border-top: var(--ph-speccer-measure-line-width) solid;
  border-bottom: var(--ph-speccer-measure-line-width) solid;
}
.ph-speccer.speccer.measure.height.left::after {
  position: static;
  content: attr(data-measure);
  display: flex;
  width: 64px;
  height: 100%;
  line-height: 100%;
  margin-right: auto;
  border-right: var(--ph-speccer-measure-line-width) solid;
  justify-content: flex-end;
  padding-right: 8px;
}
.ph-speccer.speccer.measure.height.right::before {
  content: '';
  display: block;
  height: calc(100% + var(--ph-speccer-measure-line-width));
  background: transparent;
  position: absolute;
  left: calc(100% - 64px - 5px);
  width: 10px;
  border-top: var(--ph-speccer-measure-line-width) solid;
  border-bottom: var(--ph-speccer-measure-line-width) solid;
}
.ph-speccer.speccer.measure.height.right::after {
  position: static;
  content: attr(data-measure);
  display: flex;
  width: 64px;
  height: 100%;
  line-height: 100%;
  margin-left: auto;
  border-left: var(--ph-speccer-measure-line-width) solid;
  justify-content: flex-start;
  padding-left: 8px;
}
.ph-speccer.speccer.measure.width {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--ph-speccer-measure-color);
  border-left: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
  border-right: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
}
.ph-speccer.speccer.measure.width.top::before {
  content: '';
  display: block;
  width: calc(100% + var(--ph-speccer-measure-line-width));
  background: transparent;
  position: absolute;
  top: calc(36px - 5px);
  height: 10px;
  border-left: var(--ph-speccer-measure-line-width) solid;
  border-right: var(--ph-speccer-measure-line-width) solid;
}
.ph-speccer.speccer.measure.width.top::after {
  position: static;
  content: attr(data-measure);
  display: flex;
  flex-direction: column;
  height: 36px;
  width: 100%;
  line-height: 18px;
  margin-bottom: auto;
  border-bottom: var(--ph-speccer-measure-line-width) solid;
  justify-content: flex-end;
  padding-bottom: 4px;
}
.ph-speccer.speccer.measure.width.bottom::before {
  content: '';
  display: block;
  width: calc(100% + var(--ph-speccer-measure-line-width));
  background: transparent;
  position: absolute;
  top: calc(100% - 36px - 5px);
  height: 10px;
  border-left: var(--ph-speccer-measure-line-width) solid;
  border-right: var(--ph-speccer-measure-line-width) solid;
}
.ph-speccer.speccer.measure.width.bottom::after {
  position: static;
  content: attr(data-measure);
  display: flex;
  height: 36px;
  width: 100%;
  line-height: 18px;
  margin-top: auto;
  flex-direction: column;
  border-top: var(--ph-speccer-measure-line-width) solid;
  justify-content: flex-start;
  padding-top: 4px;
}
.ph-speccer.speccer.measure.slim.height {
  width: var(--ph-speccer-measure-size);
}
.ph-speccer.speccer.measure.slim.height::before {
  content: none !important;
}
.ph-speccer.speccer.measure.slim.height.left {
  color: var(--ph-speccer-measure-color);
  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
  border-right: none;
}
.ph-speccer.speccer.measure.slim.height.right {
  color: var(--ph-speccer-measure-color);
  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
  border-left: none;
}
.ph-speccer.speccer.measure.slim.height.left::after {
  position: absolute;
  top: 50%;
  width: auto;
  height: auto;
  margin: 0;
  white-space: nowrap;
  padding: 0;
  border: none;
  left: calc(-100% - 20px - var(--ph-speccer-line-width));
  transform: translateY(-50%) rotate(-90deg);
}
.ph-speccer.speccer.measure.slim.height.right::after {
  position: absolute;
  width: auto;
  height: auto;
  border: none;
  padding: 0;
  margin: 0;
  top: 50%;
  white-space: nowrap;
  left: calc(100% - var(--ph-speccer-measure-size));
  transform: translateY(-50%) rotate(90deg);
}
.ph-speccer.speccer.measure.slim.width {
  height: var(--ph-speccer-measure-size);
}
.ph-speccer.speccer.measure.slim.width::before {
  content: none !important;
}
.ph-speccer.speccer.measure.slim.width.bottom {
  color: var(--ph-speccer-measure-color);
  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
  border-top: none;
}
.ph-speccer.speccer.measure.slim.width.top {
  color: var(--ph-speccer-measure-color);
  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
  border-bottom: none;
}
.ph-speccer.speccer.measure.slim.width.top::after {
  position: absolute;
  bottom: calc(100% + 5px);
  padding: 0;
  border: none;
  height: auto;
}
.ph-speccer.speccer.measure.slim.width.bottom::after {
  position: absolute;
  top: calc(100% + 5px);
  padding: 0;
  border: none;
  height: auto;
}
.ph-speccer.speccer.measure.slim.subtle.width.top,
.ph-speccer.speccer.measure.slim.subtle.width.bottom,
.ph-speccer.speccer.measure.slim.subtle.height.right,
.ph-speccer.speccer.measure.slim.subtle.height.left {
  border-style: dashed;
}
.ph-speccer.speccer.measure.slim.subtle.width.top {
  border-bottom: none;
}
.ph-speccer.speccer.measure.slim.subtle.width.bottom {
  border-top: none;
}
.ph-speccer.speccer.measure.slim.subtle.height.right {
  border-left: none;
}
.ph-speccer.speccer.measure.slim.subtle.height.left {
  border-right: none;
}
.ph-speccer.speccer.mark {
  background-color: var(--ph-speccer-mark-background-color);
  border-color: var(--ph-speccer-mark-border-color);
  border-width: var(--ph-speccer-mark-border-width);
  border-style: var(--ph-speccer-mark-border-style);
  position: absolute;
}