.dimension-mapping-diagram {
  --mapping-count: 1;
  --border-filter: 
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black)
    drop-shadow(0px -1px 0px black);
  --bottom-border-filter: 
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black);
  --left-right-border-filter:
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black);
  --row-height: 5rem;
  --row-count: calc(var(--mapping-count, 1) * 2);
  --middle-row-start: var(--mapping-count);
  --middle-row-end: calc(var(--mapping-count) + 2);
  display: grid;
  min-width: 100%;
  grid-template-columns: [mapping-type] 100px [fact-table] 1fr [fact-table-arrow] 20px [fact-field] 1fr [fact-field-arrow] 20px [join-type] 8ch [to-lookup-arrows] 30px [lookup-table] 1fr [lookup-table-arrow] 20px [lookup-field] 1fr [lookup-field-arrow] 20px [result] 1fr [context-menu] 20px;
  grid-template-rows: repeat(var(--row-count), calc(var(--row-height) / 2));
  font-size: var(--text-size-small);
  line-height: var(--text-line-height-small); }
  .dimension-mapping-diagram code {
    padding: 0.3rem; }
  .dimension-mapping-diagram .mapping-type {
    grid-row: 1/span var(--row-count);
    grid-column: mapping-type; }
  .dimension-mapping-diagram .fact-table {
    --bg: var(--confirm-light);
    padding: 0;
    margin: 0;
    grid-row: span 2;
    grid-column: fact-table;
    filter: var(--border-filter); }
    .dimension-mapping-diagram .fact-table pre {
      margin-top: -5px;
      margin-bottom: -5px;
      padding: 0.6rem;
      width: 100%;
      text-align: center;
      background: var(--bg); }
    .dimension-mapping-diagram .fact-table::before {
      content: '';
      filter: var(--bottom-border-filter);
      transform: translateY(1px);
      display: block;
      height: 12px;
      width: calc(100% - 2px);
      border-radius: 100%;
      background: var(--bg); }
    .dimension-mapping-diagram .fact-table::after {
      content: '';
      transform: translateY(-1px);
      display: block;
      height: 12px;
      width: 100%;
      border-radius: 100%;
      background: var(--bg); }
  .dimension-mapping-diagram .fact-table-arrow {
    grid-row: span 2;
    grid-column: fact-table-arrow; }
  .dimension-mapping-diagram .fact-field {
    --bg: var(--confirm-lighter);
    grid-row: span 2;
    grid-column: fact-field; }
    .dimension-mapping-diagram .fact-field pre {
      background: var(--bg);
      padding: 0.6rem;
      border: 1px solid black;
      width: 100%; }
  .dimension-mapping-diagram .fact-field-arrow {
    grid-row: span 2;
    grid-column: fact-field-arrow; }
  .dimension-mapping-diagram .join-type {
    --bg: var(--highlight-lighter);
    grid-row: span 2;
    grid-column: join-type;
    filter: var(--border-filter); }
    .dimension-mapping-diagram .join-type pre {
      width: 6ch;
      height: 6ch;
      clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
      background-color: var(--bg);
      text-align: center;
      text-wrap: wrap;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
  .dimension-mapping-diagram .to-lookup-arrows {
    grid-row: 1/span var(--row-count);
    grid-column: to-lookup-arrows; }
  .dimension-mapping-diagram .lookup-table {
    --bg: var(--highlight-light);
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: lookup-table;
    filter: var(--border-filter); }
    .dimension-mapping-diagram .lookup-table pre {
      margin-top: -5px;
      margin-bottom: -5px;
      padding: 0.6rem;
      width: 100%;
      text-align: center;
      background: var(--bg); }
    .dimension-mapping-diagram .lookup-table::before {
      filter: var(--bottom-border-filter);
      transform: translateY(1px);
      content: '';
      display: block;
      height: 12px;
      width: calc(100% - 2px);
      border-radius: 100%;
      background: var(--bg); }
    .dimension-mapping-diagram .lookup-table::after {
      content: '';
      transform: translateY(-1px);
      display: block;
      height: 12px;
      width: 100%;
      border-radius: 100%;
      background: var(--bg); }
  .dimension-mapping-diagram .lookup-table-arrow {
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: lookup-table-arrow; }
  .dimension-mapping-diagram .lookup-field {
    --bg: var(--highlight);
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: lookup-field; }
    .dimension-mapping-diagram .lookup-field pre {
      padding: 0.6rem;
      background: var(--bg);
      border: 1px solid black;
      width: 100%; }
  .dimension-mapping-diagram .lookup-field-arrow {
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: lookup-field-arrow; }
  .dimension-mapping-diagram .direct-arrow,
  .dimension-mapping-diagram .text-arrow {
    grid-column: fact-table-arrow / result;
    grid-row: 1/span var(--row-count); }
  .dimension-mapping-diagram .result-field {
    --bg: var(--warning-light);
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: result;
    padding: 0.6rem;
    background: var(--bg);
    border: 1px solid black;
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; }
    .dimension-mapping-diagram .result-field > * {
      margin: 0; }
  .dimension-mapping-diagram .context-menu {
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: context-menu;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
  .dimension-mapping-diagram .direct-result-field {
    --bg: var(--warning-light); }
  .dimension-mapping-diagram .text-result {
    --bg: palegoldenrod; }
    .dimension-mapping-diagram .text-result b {
      font-size: 1.4rem;
      line-height: 0.5rem;
      transform: translateY(0.7rem); }
  .dimension-mapping-diagram .text-result,
  .dimension-mapping-diagram .direct-result-field {
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: result; }
    .dimension-mapping-diagram .text-result p,
    .dimension-mapping-diagram .text-result pre,
    .dimension-mapping-diagram .direct-result-field p,
    .dimension-mapping-diagram .direct-result-field pre {
      padding: 0.6rem;
      background: var(--bg);
      border: 1px solid black;
      width: 100%;
      border-radius: 0.3rem; }
    .dimension-mapping-diagram .text-result code,
    .dimension-mapping-diagram .direct-result-field code {
      padding: 0;
      margin: 0; }
  .dimension-mapping-diagram .custom-arrow {
    grid-column: fact-table-arrow / lookup-table;
    grid-row: 1 / span 2; }
  .dimension-mapping-diagram .custom-result {
    --bg: gainsboro;
    grid-row: var(--middle-row-start)/var(--middle-row-end);
    grid-column: lookup-table / span 5;
    min-width: max-content; }
    .dimension-mapping-diagram .custom-result pre {
      padding: 0.6rem;
      background: var(--bg);
      border: 1px solid black;
      width: 100%;
      border-radius: 0.3rem; }
    .dimension-mapping-diagram .custom-result code {
      padding: 0;
      margin: 0; }
  .dimension-mapping-diagram .mapping-type,
  .dimension-mapping-diagram .fact-table,
  .dimension-mapping-diagram .fact-field,
  .dimension-mapping-diagram .join-type,
  .dimension-mapping-diagram .lookup-table,
  .dimension-mapping-diagram .lookup-table-arrow,
  .dimension-mapping-diagram .lookup-field,
  .dimension-mapping-diagram .direct-result-field,
  .dimension-mapping-diagram .custom-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }