Fix tabs' borders (#386)

* Fix: (tabs.html) Close BUTTON tag

* Fix: (tabs.css) borders

* '[pre-commit.ci 🤖] Apply code format tools to PR'

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: alphapapa

assets/theme-css/tabs.css

@@ -12,9 +12,10 @@
 }
 
 [role="tab"] {
+  box-sizing: border-box;
   padding: 2px 2px 4px;
   background-color: var(--pst-color-background);
-  border-color: transparent transparent var(--pst-color-primary);
+  border: none;
   color: var(--pst-color-text);
   outline: none;
   font-weight: bold;
@@ -25,31 +26,27 @@
   font-size: 1rem;
 }
 
-[role="tab"]:hover {
+[role="tab"]:hover,
+[role="tab"][aria-selected="true"]:hover {
   color: var(--pst-color-secondary);
-  border-color: var(--pst-color-secondary) transparent
-    var(--pst-color-secondary);
+  border-bottom-color: var(--pst-color-secondary);
+  border-bottom-size: 2px;
+  border-bottom-style: solid;
+  border-top-color: var(--pst-color-secondary);
+  border-top-size: 2px;
+  border-top-style: solid;
 }
 
 [role="tab"][aria-selected="true"] {
-  border-color: transparent transparent var(--pst-color-primary);
+  border-bottom-color: var(--pst-color-primary);
+  border-bottom-style: solid;
+  border-bottom-size: 2px;
+  border-top-color: transparent;
+  border-top-style: solid;
+  border-top-size: 2px;
   color: var(--pst-color-primary);
 }
 
-[role="tab"][aria-selected="true"]:hover {
-  border-color: var(--pst-color-secondary) transparent
-    var(--pst-color-secondary);
-  color: var(--pst-color-secondary);
-}
-
-[role="tab"][aria-selected="false"] {
-  border-bottom: 0rem solid;
-}
-
-[role="tab"][aria-selected="false"]:hover {
-  border-bottom: 0.0625rem solid var(--pst-color-secondary);
-}
-
 [role="tab"] span.focus {
   display: inline-block;
   margin: 2px;

layouts/shortcodes/tabs.html

@@ -6,7 +6,8 @@
   <div role="tablist" class="automatic">
     {{- range $idx, $tab := .Scratch.Get "tabs" }}
     <button id="{{ $groupId }}-tab-{{ $idx }}" type="button" role="tab" aria-selected="{{ cond (eq $idx 0) "true" "false" }}" aria-controls="{{ $groupId }}-tabpanel-{{ $idx }}">
-    <span class="focus">{{ .name }}</span>
+      <span class="focus">{{ .name }}</span>
+    </button>
     {{- end }}
   </div>
   {{- range $idx, $tab := .Scratch.Get "tabs" }}