chore: complete update

resources/css/components/buttons.css

@@ -0,0 +1,99 @@
+:where(button, input):where(:not(:active)):focus-visible {
+    outline-offset: 5px;
+}
+
+/* All buttons */
+:where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="file"]
+),
+/* ::file-selector-button does not work inside of :where() */
+:where(input[type="file"])::file-selector-button {
+    --_color: var(--color, var(--accent));
+
+    background-color: var(--_color);
+    color: black;
+
+    border: 2px solid var(--_color);
+
+    font: inherit;
+    letter-spacing: inherit;
+    line-height: 1.5;
+
+    border-radius: 1rem;
+    padding: 0.5em;
+
+    font-weight: 700;
+
+    object-fit: contain;
+
+    /*display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 1ch;*/
+
+    cursor: pointer;
+    transition: all 0.2s ease-out;
+
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+
+    &:is(:hover, :focus-visible) {
+        --_hoverColor: oklch(from var(--color, var(--accent)) 40% c h);
+        --_color: var(--hoverColor, var(--_hoverColor));
+    }
+
+    &.secondary {
+        --color: lightgreen;
+        /*--hoverColor: lawngreen;*/
+    }
+
+    &.outline {
+        background: transparent;
+        color: var(--_color);
+    }
+}
+
+/* on hover but not active */
+:where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]):where(:not(:active):hover
+) {
+
+}
+
+:where([type="reset"]) {
+    color: red;
+}
+
+:where([type="reset"]:focus-visible) {
+    outline-color: currentColor;
+}
+
+
+:where(button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"]
+)[disabled] {
+
+    cursor: not-allowed;
+}
+
+:where(input[type="file"]) {
+    inline-size: 100%;
+    max-inline-size: max-content;
+}
+
+:where(input[type="button"]),
+:where(input[type="file"])::file-selector-button {
+    appearance: none;
+}