style.scss
  1  @import './assets/styles/global.scss';
  2  
  3  .mob-interviews-link {
  4    display: flex;
  5    justify-content: space-between;
  6    margin-bottom: calculateRem(32);
  7  
  8    @media (min-width: $desktop) {
  9      display: none;
 10    }
 11  
 12    button {
 13      color: #fff;
 14      padding: 0;
 15      font-size: calculateRem($body-font-size);
 16  
 17      &:hover span {
 18        text-decoration: underline;
 19      }
 20  
 21      img {
 22        position: relative;
 23        top: calculateRem(2);
 24      }
 25    }
 26  }
 27  
 28  .interviews-nav-wrap {
 29  
 30    @media (min-width: $desktop) {
 31      display: flex;
 32      justify-content: space-between;
 33      justify-content: flex-end;
 34      position: relative;
 35    }
 36  }
 37  
 38  .interviews-list {
 39  
 40    @media (min-width: $desktop) {
 41      position: absolute;
 42      top: 0;
 43      left: 0;
 44      height: 100%;
 45      overflow: auto;
 46      width: 95%;
 47    }
 48  
 49    /* width */
 50    &::-webkit-scrollbar {
 51      width: calculateRem(16);
 52    }
 53  
 54    /* Track */
 55    &::-webkit-scrollbar-track {
 56      background: $navy-dark;
 57      border: 2px solid $navy;
 58    }
 59  
 60    /* Handle */
 61    &::-webkit-scrollbar-thumb {
 62      background: $navy;
 63    }
 64  
 65    .letter-block {
 66      color: #fff;
 67      padding-bottom: calculateRem(32);
 68  
 69      > div {
 70        font-size: calculateRem(32);
 71        margin-bottom: calculateRem(20);
 72      }
 73    }
 74  
 75    button {
 76      border: 0;
 77      padding: 0;
 78      text-align: left;
 79      font-size: calculateRem(18);
 80      line-height: 1.3;
 81      margin-bottom: calculateRem(12);
 82      color: #fff;
 83  
 84      &:hover {
 85        text-decoration: underline;
 86      }
 87    }
 88  }
 89  
 90  .letters-nav {
 91    display: none;
 92  
 93    @media (min-width: $desktop) {
 94      display: flex;
 95      flex-direction: column;
 96  
 97      button {
 98        color: #fff;
 99        margin-bottom: calculateRem(8);
100        text-transform: lowercase;
101  
102        &.active {
103          background-color: $red;
104        }
105      }
106    }
107  }