refactor(select): add @BcRikko's suggestions for the select component

Change select.scss to selects.scss, add margin to .nes-select, use different color variables,
refactor handling of different select states

scss/form/selects.scss

@@ -0,0 +1,64 @@
+.nes-select {
+  // prettier-ignore
+  $dropdown: (
+    (1,1,1,1,1,1,1),
+    (1,1,1,1,1,1,1),
+    (0,1,1,1,1,1,0),
+    (0,1,1,1,1,1,0),
+    (0,0,1,1,1,0,0),
+    (0,0,0,1,0,0,0),
+  );
+  $colors: ($base-color, map-get($default-colors, "shadow"));
+
+  position: relative;
+  width: 100%;
+  margin: 4px;
+
+  select {
+    width: 100%;
+    padding: 0.5rem 2.5rem 0.5rem 1rem;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: $cursor-click-url, pointer;
+    border: none;
+    border-radius: 0;
+    outline-color: map-get($default-colors, "hover");
+    box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
+
+    &:invalid {
+      color: map-get($disabled-colors, shadow);
+    }
+  }
+
+  &::after {
+    @include pixelize($dropdown, $colors);
+
+    position: absolute;
+    top: calc(50% - 11px);
+    right: 36px;
+    font-size: 3px;
+    pointer-events: none;
+    content: "";
+  }
+
+  // prettier-ignore
+  $types:
+    "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
+    "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
+
+  @each $type in $types {
+    &.is-#{nth($type, 1)} {
+      $color: nth($type, 2);
+
+      &::after {
+        color: $color;
+      }
+
+      select {
+        outline-color: nth($type, 3);
+        box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+      }
+    }
+  }
+}