@import "solarized-light.css";

html, body, #mount
{ height: 100%
; width: 100%
}

body
{ max-width: 90%
; margin: 0 auto
; padding: 0
}

.split-root
{ height: 100%
}

.split-splitter
{ width: 100%
; height: 100%
; background: #ccc
}

.split-pane
{ margin: 0
; padding: 0
; overflow: scroll
; display: flex
; flex-direction: column
}

.pane-content
{ margin: 0.5em
}

.view-header
{ margin: 0
; flex-shrink: 0
}

.stack-view
{ display: flex
; flex-direction: column
; justify-content: space-between

/* to fill the container */
; flex-grow: 1
}

.stack-entry-container
{ display: flex
; flex-direction: column-reverse
; align-content: flex-end
}

.stack-entry-container.even > .stack-entry:nth-of-type(even)
{ background: #0000007f
; color: white
}

.stack-entry-container.odd > .stack-entry:nth-of-type(odd)
{ background: #0000007f
; color: white
}

.stack-entry
{ display: flex
; flex-direction: row
; justify-content: space-between
; font-family: monospace;
}

.stack-entry-addr
{ align-self: flex-end
; opacity: 70%
}

.dump-view
{}

.heap-view
{}

/* .split-pane:has(> .code-view) */
/* { overflow: hidden */
/* } */

.code-view
{ display: flex
; flex-direction: column
; align-items: stretch
; align-content: stretch
; justify-content: flex-start
; flex-grow: 1
}

.code-view .code-instr-container
{ display: grid
; overflow: scroll
; flex-shrink: 4
; min-height: 0
}

.code-view .instr
{ font-family: monospace;
}

.code-instr-container.even > .instr:nth-of-type(even)
{ background: #0000007f
; color: white
}

.code-instr-container.odd > .instr:nth-of-type(odd)
{ background: #0000007f
; color: white
}

.code-view .code-button-container
{ display: flex
; flex-direction: row
/* ; align-self: flex-end */
; justify-content: space-between
; margin-top: auto
; flex-shrink: 0
}