Karta losowania składów (w.i.p.)

src/styles/global.scss

@@ -54,12 +54,6 @@ a {
   }
 }
 
-p {
-  font-size: 1.2em;
-  font-weight: bold;
-  color: $accentColor;
-}
-
 select,
 option,
 input,
@@ -87,17 +81,22 @@ button {
 }
 
 button.btn {
-  padding: 0.25em 1em;
+  padding: 0.4em 0.75em;
 
-  border-radius: 0.25em;
-  border: 2px solid white;
   outline: none;
-  background: none;
+  background-color: #222;
 
   transition: all 250ms;
 
+  &.btn--outline {
+    background: none;
+    font-weight: bold;
+    outline: 1px solid $accentColor;
+  }
+
   &:focus-visible {
     color: $accentColor;
+    outline: 1px solid white;
   }
 
   &[data-disabled='true'] {
@@ -112,7 +111,7 @@ button.btn {
   &--text {
     font-weight: bold;
     transition: all 250ms;
-    border: none;
+    background: none;
 
     &:focus-visible {
       outline: 1px solid white;
@@ -121,6 +120,7 @@ button.btn {
 
   &--choice {
     padding: 0.25em 0.3em;
+    background-color: #222;
 
     &:focus-visible {
       outline: 1px solid white;
@@ -128,28 +128,8 @@ button.btn {
   }
 }
 
-button.btn-rect {
-  width: 1.5em;
-  height: 1.5em;
-  font-size: 1.65em;
-
-  line-height: 1em;
-
-  border-radius: 0.25em;
-  border: 2px solid black;
-  outline: none;
-  background: white;
-  color: black;
-
-  transition: all 250ms;
-
-  &:hover {
-    color: white;
-    background-color: black;
-  }
-}
-
-select {
+select,
+input {
   background: none;
   border: 2px solid white;
   outline: none;
@@ -160,6 +140,10 @@ select {
   font-size: 1em;
 
   width: 18em;
+
+  &:focus-visible {
+    border-color: $accentColor;
+  }
 }
 
 option {