:root {
  --inspx-margin-color: #f24822;
  --inspx-padding-color: #0bb658;
  --inspx-size-color: #0070f3;
  --inspx-active-color: #0070f330;
}

inspx {
  box-sizing: border-box;
  height: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
  color: white;
  padding: 0 4px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1337;
}

[data-inspx-active] {
  background: var(--inspx-active-color) !important;
}

margin {
  background: var(--inspx-margin-color);
  opacity: 0.4;
}

padding {
  border-color: var(--inspx-padding-color);
  border-style: solid;
  opacity: 0.4;
}

inspx[type='margin'] {
  background: var(--inspx-margin-color);
}

inspx[type='padding'] {
  background: var(--inspx-padding-color);
}

inspx[type='size'] {
  background: var(--inspx-size-color);
}