Fix problems with option-input component

src/scss/cdb-components/forms/_inputs.scss

@@ -38,9 +38,12 @@
     font-style: italic;
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     border: 1px solid $cBlueHover;
+  }
+
+  &:focus {
+    border: 1px solid $cBlackHover;
     outline: none;
   }
 

src/scss/cdb-components/forms/_option-input.scss

@@ -147,15 +147,24 @@
   border: 1px solid $cMainLine;
 
   &.is-active,
-  &:hover,
   &:focus {
-    border: 1px solid $cBlue;
+    border: 1px solid $cBlackHover;
+  }
+
+  &:hover {
+    border: 1px solid $cBlueHover;
   }
 
   &:first-child {
     margin-right: 0;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
+
+    &:hover {
+      + .CDB-OptionInput-item::after {
+        content: none;
+      }
+    }
   }
 
   &:last-child {
@@ -167,14 +176,24 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
+    &.is-active::after,
+    &:focus::after,
     &:hover::after {
       position: absolute;
-      left: 0;
+      left: -1px;
       width: 1px;
-      height: 100%;
-      background-color: $cBlue;
+      height: calc(100% + 2px);
       content: '';
     }
+
+    &.is-active::after,
+    &:focus::after {
+      background-color: $cBlackHover;
+    }
+
+    &:hover::after {
+      background-color: $cBlueHover;
+    }
   }
 }
 
@@ -191,9 +210,3 @@
     text-decoration: none;
   }
 }
-.CDB-OptionInput-item:first-child .CDB-OptionInput-content {
-  border-bottom-left-radius: 4px;
-}
-.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
-  border-bottom: 1px solid $cMainBg;
-}