Search

Next, we'll style the Search field in the header. I want to ensure that the border on the input and the button match. We'll set it to the secondary color by default. The background color of the search button will also be this color with the icon being white. Then when the input or the button is hovered on or active we set the border color to be the primary theme color. The button background color will also change to the primary color. The icon will remain white:

// Search 
.search-bar { 
    &-input, &-button { 
        border: 1px solid get($theme, color, secondary); 
 
        &:active, &:focus, &:hover { 
            border: 1px solid get($theme, color, primary); 
        } 
    } 
 
    &-button { 
        background-color: get($theme, color, secondary); 
        color: white; 
 
        &:active, &:focus, &:hover { 
            background-color: get($theme, color, primary...