1 files changed, 105 insertions, 2 deletions
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 96b39ec..7a9e9ec 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -97,6 +97,14 @@ textarea {
     border-radius: 4px;
     background: none;
     resize: vertical;
+    font-family: var(--font), var(--font-fallback);
+    font-size: 1.5rem;
+    line-height: 1;
+    white-space: pre;
+    font-feature-settings:
+        'tnum',
+        'kern' 0;
+    font-variant-numeric: tabular-nums;
 }
 *:focus {
     border-color: var(--regular6);
@@ -141,7 +149,7 @@ button[disabled] {
 .grid {
     border: 3px solid var(--regular4);
     padding: 1rem;
-
+    background-color: var(--background);
     font-size: 1.5rem;
     cursor: pointer;
     display: flex;
@@ -174,7 +182,102 @@ button[disabled] {
     white-space: nowrap;
 }
 
-.grid-cell:hover {
+.highlightable:hover {
     background-color: var(--background-body);
 }
 /* </grid> */
+
+/* <toolbar> */
+.toolbar {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: var(--background);
+    border: 3px solid var(--regular4);
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    width: fit-content;
+}
+
+.toolbar-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border: 2px solid var(--regular3);
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+    transition: border-color 0.2s ease-in-out;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+}
+
+.toolbar-item:hover:not(.disabled) {
+    border-color: var(--regular6);
+}
+
+.toolbar-item.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    border-color: var(--bright0);
+}
+
+.toolbar-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.toolbar-item-content-panel {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem 0.75rem;
+    background-color: var(--background);
+    border: 2px solid var(--regular6);
+    border-radius: 4px;
+    z-index: 1000;
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+.toolbar-item-content-panel.fading {
+    animation: fadeOut 0.2s ease-in-out;
+}
+
+.toolbar-item-content-panel::after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 0.375rem solid transparent;
+    border-bottom-color: var(--regular6);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-0.25rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-0.25rem);
+    }
+}
+/* </toolbar> */