From 98846320ed4488b188710ed55f0a6afd544ef858 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Thu, 15 Aug 2019 14:53:16 +0100
Subject: [PATCH] Update option select component styles

---
 .../components/_option-select.scss            | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/components/_option-select.scss b/app/assets/stylesheets/components/_option-select.scss
index 1003236f4d..089e20e89a 100644
--- a/app/assets/stylesheets/components/_option-select.scss
+++ b/app/assets/stylesheets/components/_option-select.scss
@@ -1,7 +1,7 @@
 .app-c-option-select {
   position: relative;
   padding: 0 0 1px;
-  background-color: govuk-colour("grey-3");
+  background-color: govuk-colour("light-grey", $legacy: "grey-3");
   margin-bottom: govuk-spacing(6);
 
   @include media(desktop) {
@@ -45,7 +45,8 @@
 }
 
 .app-c-option-select__button {
-  z-index: 100;
+  position: relative;
+  z-index: 1;
   padding-right: 40px;
   width: 100%;
   background: none;
@@ -55,13 +56,13 @@
 
   &:hover,
   &:hover + .app-c-option-select__selected-counter {
-    background-color: govuk-colour("grey-2");
+    background-color: govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
   &:hover ~ .app-c-option-select__container,
   &:hover ~ .app-c-option-select__selected-counter,
   &:hover ~ .app-c-option-select__filter {
-    border-color: govuk-colour("grey-2");
+    border-color: govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
   &::-moz-focus-inner {
@@ -70,6 +71,13 @@
 
   &:focus {
     outline: none;
+    @include govuk-focused-text;
+
+    & ~ .app-c-option-select__selected-counter {
+      position: relative;
+      z-index: 2;
+      @include govuk-focused-text;
+    }
 
     &:after {
       content: "";
@@ -78,7 +86,6 @@
       left: 0;
       width: 100%;
       height: 100%;
-      outline: solid 3px govuk-colour('yellow');
     }
   }
 
@@ -103,7 +110,7 @@
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
-  border: govuk-spacing(1) solid govuk-colour("grey-3");
+  border: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
   background-color: govuk-colour("white");
 
   &:focus {
@@ -118,8 +125,8 @@
 .app-c-option-select__filter {
   position: relative;
   background: govuk-colour('white');
-  border-left: govuk-spacing(1) solid govuk-colour("grey-3");
-  border-right: govuk-spacing(1) solid govuk-colour("grey-3");
+  border-left: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
+  border-right: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
   padding: 13px 13px govuk-spacing(2) 13px;
 }
 
@@ -135,7 +142,7 @@
 
 .js-enabled {
   .app-c-option-select__container {
-    border: govuk-spacing(1) solid govuk-colour("grey-3");
+    border: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
     border-top: 0;
   }
 
@@ -156,7 +163,7 @@
 .app-c-option-select--expander {
   padding: 0;
   margin: 0;
-  background: none;
+  background-color: transparent;
   border-bottom: solid 1px govuk-colour("black");
 
   .app-c-option-select__container {
@@ -176,14 +183,6 @@
 
   .app-c-option-select__button {
     position: relative;
-
-    &:hover {
-      background: none;
-
-      & + .app-c-option-select__selected-counter {
-        background: none;
-      }
-    }
   }
 
   .app-c-option-select__selected-counter {