/ components / searchResults / style.scss
style.scss
 1  @import './assets/styles/global.scss';
 2  
 3  .search-results li {
 4    margin-bottom: calculateRem(32);
 5  
 6    button {
 7      text-align: left;
 8      width: 100%;
 9      padding: 0;
10  
11      &:hover h3 {
12        text-decoration: underline;
13  
14        &.matched-name::before {
15          display: none;
16        }
17      }
18  
19      h3 {
20        color: #fff;
21        font-size: calculateRem(24);
22        display: inline-block;
23        margin-bottom: calculateRem(12);
24  
25        &.matched-name {
26          @include hasRedUnderline;
27          position: relative;
28        }
29      }
30  
31      h5 {
32        color: #fff;
33        font-size: calculateRem(16);
34        margin-bottom: calculateRem(8);
35      }
36  
37      p {
38        color: hsla(0, 0, 100, .6);
39        font-size: calculateRem(14);
40        line-height: 1.6;
41  
42        span {
43          position: relative;
44  
45          &::before {
46            content: '';
47            position: absolute;
48            top: -10%;
49            left: -2%;
50            height: 120%;
51            width: 104%;
52            background-color: $red;
53            color: $navy;
54            z-index: -1;
55          }
56        }
57      }
58    }
59  
60    .li-header {
61      display: flex;
62      justify-content: space-between;
63  
64      > div {
65        color: #fff;
66        display: flex;
67        align-items: center;
68  
69        span {
70          margin: 0 calculateRem(12);
71        }
72      }
73    }
74  
75    .question-wrap {
76      margin-bottom: calculateRem(20);
77    }
78  }