Fix select colors

sass/components/navbar.sass

@@ -322,9 +322,7 @@ a.navbar-item,
           transform: translateY(0)
   .navbar-link
     &::after
-      margin-top: -0.375em
       right: 1.125em
-      top: 50%
   .navbar-menu
     flex-grow: 1
     flex-shrink: 0

sass/elements/form.sass

@@ -149,11 +149,10 @@ $help-size: $size-small !default
   vertical-align: top
   &:not(.is-multiple)
     height: 2.25em
+  &:not(.is-multiple):not(.is-loading)
     &::after
       +arrow($input-arrow)
-      margin-top: -0.375em
       right: 1.125em
-      top: 50%
       z-index: 4
   &.is-rounded
     select
@@ -178,19 +177,25 @@ $help-size: $size-small !default
       option
         padding: 0.5em 1em
   // States
-  &:hover
+  &:not(.is-multiple):not(.is-loading):hover
     &::after
       border-color: $input-hover-color
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
-    &.is-#{$name} select
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+    &.is-#{$name}
+      &:not(:hover)::after
+        border-color: $color
+      select
+        border-color: $color
+        &:hover,
+        &.is-hovered
+          border-color: darken($color, 5%)
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active
+          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small

sass/utilities/mixins.sass

@@ -141,17 +141,20 @@
   @extend %unselectable
 
 %arrow
-  border: 1px solid transparent
+  border: 3px solid transparent
+  border-radius: 2px
   border-right: 0
   border-top: 0
   content: " "
   display: block
-  height: 0.5em
+  height: 0.625em
+  margin-top: -0.4375em
   pointer-events: none
   position: absolute
+  top: 50%
   transform: rotate(-45deg)
   transform-origin: center
-  width: 0.5em
+  width: 0.625em
 
 =arrow($color)
   @extend %arrow