Refactor _option-input to allow independent borders

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

@@ -99,67 +99,90 @@
 */
 
 .CDB-OptionInput {
-  width: 100%;
-  height: $baseSize * 4;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
   box-sizing: border-box;
+  width: 100%;
+  height: $baseSize * 4 - 2px;
+  border-radius: $baseSize / 2;
   vertical-align: middle;
+}
 
-  &:hover {
+.CDB-OptionInput-container {
-    border: 1px solid $cHoverLine;
+  display: flex;
+  align-content: center;
+  align-items: center;
+
+  &--noMargin {
+    margin: 0;
   }
+}
+
+.CDB-OptionInput-item {
+  display: flex;
+  position: relative;
+  box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: $sFontSize-medium;
+
+  &.is-active,
+  &:hover,
+  &:focus {
+    cursor: pointer;
+  }
+
+  &:first-child {
+    width: auto;
+    margin-right: $baseSize;
+  }
+
+  &:last-child {
+    width: 100%;
+  }
+}
+
+.CDB-OptionInput-container:not(.CDB-OptionInput-container--noBorder) .CDB-OptionInput-item {
+  padding: 0 $baseSize;
+  border: 1px solid $cMainLine;
+
+  &.is-active,
+  &:hover,
   &:focus {
     border: 1px solid $cBlue;
   }
-}
-.CDB-OptionInput.is-active {
-  border: 1px solid $cBlue;
-}
-.CDB-OptionInput-container {
-  @include display-flex();
-  @include align-content(center);
-  @include align-items(center);
-  margin: 0 $baseSize;
-}
-.CDB-OptionInput-container--noMargin {
-  margin: 0;
-}
-.CDB-OptionInput-item {
-  @include display-flex();
-  @include align-items(center);
-  @include align-content(center);
-  width: auto;
-  height: 100%;
-  font-size: $sFontSize-medium;
-  box-sizing: content-box;
 
-  &::after {
+  &:first-child {
-    width: 1px;
+    margin-right: 0;
-    height: 100%;
+    border-radius: 4px 0 0 4px;
-    margin-right: $baseSize;
-    background-color: $cSecondaryLine;
-    content: '';
   }
-  &:last-child {
-    width: 100%;
 
-    &::after {
+  &:last-child {
-      display: none;
+    border-radius: 4px;
+  }
+
+  + .CDB-OptionInput-item {
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+
+    &:hover::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 1px;
+      height: 100%;
+      background-color: $cBlue;
     }
   }
 }
-.CDB-OptionInput-item--noSeparator::after {
+
-  content: '';
-}
 .CDB-OptionInput-content {
-  @include display-flex();
+  display: flex;
-  @include align-items(center);
-  height: 100%;
-  margin-left: -$baseSize;
-  padding: 0 $baseSize + 2;
-  color: $cMainBg;
   box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: $cMainBg;
   white-space: nowrap;
 
   &:hover {