[data-wativate-type~="math-interpreter"] { display:var(--flex-display); flex-direction: var(--flex-row); align-items: var(--items-center); line-height: 1rem; } [data-wativate-type="fraction"] { display:var(--flex-display); flex-direction: var(--flex-row); flex-wrap: var(--flex-nowrap); align-items: var(--items-center); } [data-wativate-type="fraction"] [data-wativate-role="container"] { display:var(--flex-display); flex-direction: var(--flex-col); align-items: var(--items-center); } [data-wativate-type="fraction"] [data-wativate-role="numerator"] { display:var(--flex-display); flex-direction: var(--flex-row); align-items: var(--items-center); } [data-wativate-type="fraction"] [data-wativate-role="fraction-line"] { width: 100%; border-top: #000 0.1rem solid; } [data-wativate-type="fraction"] [data-wativate-role="denominator"] { display:var(--flex-display); flex-direction: var(--flex-row); align-items: var(--items-center); } [data-wativate-type="exponentiation"] { display:var(--flex-display); flex-direction: var(--flex-row); flex-wrap: var(--flex-nowrap); align-items: var(--items-center); } [data-wativate-type="exponentiation"] [data-wativate-role="base"] { } [data-wativate-type="exponentiation"] [data-wativate-role="exponent"] { position: relative; bottom: 0.5rem; font-size: var(--font-sm); } [data-wativate-type="html"] { display:var(--flex-display); flex-direction: var(--flex-row); flex-wrap: var(--flex-nowrap); align-items: var(--items-center); } [data-wativate-type="html"] [data-wativate-role="container"] { display:var(--flex-display); flex-direction: var(--flex-row); align-items: var(--items-center); } [data-wativate-span="1"] { height: 1rem; } [data-wativate-span="2"] { height: 2rem; } [data-wativate-span="3"] { height: 3rem; } [data-wativate-span="4"] { height: 4rem; } [data-wativate-span="5"] { height: 5rem; } [data-wativate-span="6"] { height: 6rem; } [data-wativate-span="7"] { height: 7rem; } [data-wativate-span="8"] { height: 8rem; } [data-wativate-span="9"] { height: 9rem; } [data-wativate-span="10"] { height: 10rem; } [data-wativate-type="vertical"] { display: var(--flex-display); flex-direction: var(--flex-col); white-space: pre; } [data-wativate-type="vertical"] [data-wativate-type="place-value"], [data-wativate-type="vertical"] [data-wativate-type="operation"], [data-wativate-type="vertical"] [data-wativate-type="answer"] { display: var(--flex-display); flex-direction: var(--flex-row); } [data-wativate-type="vertical"] [data-wativate-type="place-value"]>div { flex: 1; writing-mode: vertical-lr; display: var(--flex-display); flex-direction: var(--flex-col); justify-content: var(--justify-center); align-items: var(--items-end); text-transform: capitalize; padding: 1rem 0; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div { position: var(--position-relative); flex: 1; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div { display: var(--flex-display); flex-direction: var(--flex-col); flex: 1; position: var(--position-relative); width: 2rem; height: 2rem; align-items: var(--items-center); justify-content: var(--justify-center); z-index: 1; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div.regrouping { position: var(--position-absolute); z-index: 2; font-size: var(--font-xs); height: 1rem; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div.carry { bottom: -0.5rem; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div.borrow { top: -0.5rem; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div>div.pad-operand { color: #ff0000; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div>div.strikethrough-answer-decimal { color: #ff0000; text-decoration: line-through; } [data-wativate-type="vertical"] [data-wativate-type="operation"]>div>div>div.strikethrough-answer-leading { color: #ff0000; text-decoration: line-through; } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] { display: var(--flex-display); flex-direction: var(--flex-col); justify-content: var(--justify-center); height: 1rem; } [data-wativate-type="vertical"] [data-wativate-type="separation-line"]>div { display: var(--flex-display); flex-direction: var(--flex-col); height: 0.15rem; border-bottom: #000 0.15rem solid; } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--8\.5 { margin-right: calc(2rem * 8.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--8 { margin-right: calc(2rem * 8); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--7\.5 { margin-right: calc(2rem * 7.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--7 { margin-right: calc(2rem * 7); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--6\.5 { margin-right: calc(2rem * 6.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--6 { margin-right: calc(2rem * 6); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--5\.5 { margin-right: calc(2rem * 5.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--5 { margin-right: calc(2rem * 5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--4\.5 { margin-right: calc(2rem * 4.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--4 { margin-right: calc(2rem * 4); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--3\.5 { margin-right: calc(2rem * 3.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--3 { margin-right: calc(2rem * 3); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--2\.5 { margin-right: calc(2rem * 2.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--2 { margin-right: calc(2rem * 2); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--1\.5 { margin-right: calc(2rem * 1.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset--1 { margin-right: calc(2rem * 1); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-0 { margin-left: 0rem; } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-1 { margin-left: calc(2rem * 1); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-1\.5 { margin-left: calc(2rem * 1.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-2 { margin-left: calc(2rem * 2); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-2\.5 { margin-left: calc(2rem * 2.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-3 { margin-left: calc(2rem * 3); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-3\.5 { margin-left: calc(2rem * 3.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-4 { margin-left: calc(2rem * 4); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-4\.5 { margin-left: calc(2rem * 4.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-5 { margin-left: calc(2rem * 5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-5\.5 { margin-left: calc(2rem * 5.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-6 { margin-left: calc(2rem * 6); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-6\.5 { margin-left: calc(2rem * 6.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-7 { margin-left: calc(2rem * 7); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-7\.5 { margin-left: calc(2rem * 7.5); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-8 { margin-left: calc(2rem * 8); } [data-wativate-type="vertical"] [data-wativate-type="separation-line"] > div.offset.offset-8\.5 { margin-left: calc(2rem * 8.5); } [data-wativate-type="vertical"] [data-wativate-type="answer"]>div { display: var(--flex-display); flex-direction: var(--flex-col); flex: 1; width: 2rem; height: 2rem; align-items: var(--items-center); justify-content: var(--justify-center); } [data-wativate-type="vertical"] [data-wativate-type="answer"]>div>div.strikethrough-answer-decimal { color: #ff0000; text-decoration: line-through; } [data-wativate-type="vertical"] [data-wativate-type="answer"]>div>div.strikethrough-answer-leading { color: #ff0000; text-decoration: line-through; } [data-wativate-type="vertical"] .border, [data-wativate-type="vertical"] .highlight { position: var(--position-relative); } [data-wativate-type="vertical"] .border::before { content: ""; position: var(--position-absolute); top: 0.05rem; left: 0.05rem; width: calc(100% - 0.3rem); height: calc(100% - 0.3rem); border: #ccc 0.1rem solid; z-index: 2; } [data-wativate-type="vertical"] .highlight::after { content: ""; position: var(--position-absolute); top: 0.05rem; left: 0.05rem; width: calc(100% - 0.5rem); height: calc(100% - 0.5rem); border: #0066ff 0.2rem dotted; animation: wativate-math-interpreter-vertical-highlight 1s infinite; z-index: 3; } [data-wativate-type="vertical"] .decimal-point { position: var(--position-absolute); left: calc(50% - 0.16rem + 0.6rem); font-weight: 700; } @keyframes wativate-math-interpreter-vertical-highlight { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }