:root {
  --assignment-inherited: #26965a;
  --assignment-inherited-bg: #eaf8f0;
  --assignment-explicit: #3f8fd2;
  --assignment-explicit-bg: #edf6ff;
  --assignment-removed: #cf5362;
  --assignment-removed-bg: #fff0f2;
}

#component-utilities [data-assignment-status="explicit"] {
  color: #263340;
  background-color: var(--assignment-explicit-bg);
  border-color: var(--assignment-explicit);
  box-shadow: inset 3px 0 var(--assignment-explicit);
}
#component-utilities [data-assignment-status="removed"] {
  color: #263340;
  background-color: var(--assignment-removed-bg);
  border-color: var(--assignment-removed);
  box-shadow: inset 3px 0 var(--assignment-removed);
}
#component-utilities [data-assignment-status="baseline"],
#component-utilities [data-assignment-status="inherited"] {
  color: #263340;
  background-color: var(--assignment-inherited-bg);
  border-color: var(--assignment-inherited);
  box-shadow: inset 3px 0 var(--assignment-inherited);
}
#component-utilities [data-assignment-status="baseline"] select,
#component-utilities [data-assignment-status="inherited"] select {
  background-color: var(--assignment-inherited-bg);
  border-color: var(--assignment-inherited);
}
#component-utilities [data-assignment-status="explicit"] select {
  background-color: var(--assignment-explicit-bg);
  border-color: var(--assignment-explicit);
}
#component-utilities [data-assignment-status="removed"] select {
  background-color: var(--assignment-removed-bg);
  border-color: var(--assignment-removed);
}
#component-utilities [data-assignment-status="baseline"] > input,
#component-utilities [data-assignment-status="inherited"] > input {
  outline: 2px solid var(--assignment-inherited);
  outline-offset: 1px;
}
#component-utilities [data-assignment-status="explicit"] > input {
  outline: 2px solid var(--assignment-explicit);
  outline-offset: 1px;
}
#component-utilities [data-assignment-status="removed"] > input {
  outline: 2px solid var(--assignment-removed);
  outline-offset: 1px;
}
#component-props [data-prop-assignment-status="baseline"] {
  color: #263340;
  background-color: var(--assignment-inherited-bg);
  border-color: var(--assignment-inherited);
  box-shadow: inset 3px 0 var(--assignment-inherited);
}
#component-props [data-prop-assignment-status="explicit"] {
  color: #263340;
  background-color: var(--assignment-explicit-bg);
  border-color: var(--assignment-explicit);
  box-shadow: inset 3px 0 var(--assignment-explicit);
}
#component-props [data-prop-assignment-status="removed"] {
  color: #263340;
  background-color: var(--assignment-removed-bg);
  border-color: var(--assignment-removed);
  box-shadow: inset 3px 0 var(--assignment-removed);
}
#component-props [data-prop-assignment-status="baseline"] select {
  background-color: var(--assignment-inherited-bg);
  border-color: var(--assignment-inherited);
}
#component-props [data-prop-assignment-status="explicit"] select {
  background-color: var(--assignment-explicit-bg);
  border-color: var(--assignment-explicit);
}
#component-props [data-prop-assignment-status="removed"] select {
  background-color: var(--assignment-removed-bg);
  border-color: var(--assignment-removed);
}
#component-props [data-prop-assignment-status="baseline"] input:is([type="checkbox"], [type="radio"]) {
  outline: 2px solid var(--assignment-inherited);
  outline-offset: 1px;
}
#component-props [data-prop-assignment-status="explicit"] input:is([type="checkbox"], [type="radio"]) {
  outline: 2px solid var(--assignment-explicit);
  outline-offset: 1px;
}
#component-props [data-prop-assignment-status="removed"] input:is([type="checkbox"], [type="radio"]) {
  outline: 2px solid var(--assignment-removed);
  outline-offset: 1px;
}