Brand Navigation

<div class="brand-navigation">
    <div class="brand-navigation__toggle">Discover Fitch Solutions <i class="fas fa-caret-down"></i></div>
    <ul>
      <li><a href="https://www.fitchsolutions.com/" target="_self">Fitch Solutions</a></li>
      <li><a href="https://www.fitchsolutions.com/bmi" target="_self">BMI</a></li>
      <li><a href="https://know.creditsights.com" target="creditsights">CreditSights</a></li>
      <li><a href="https://www.dv01.co" target="dv01">dv01</a></li>
      <li><a href="https://www.fitchlearning.com/?utm_source=FitchSolutions&amp;utm_medium=website&amp;utm_campaign=topnav" target="fitch-learning">Fitch Learning</a></li>
      <li><a href="https://www.fitchsolutions.com/credit" target="_self">Fitch Ratings Research &amp; Data</a></li>
      <li><a href="https://www.sustainablefitch.com" target="sustainable-fitch">Sustainable Fitch</a></li>
    </ul>
  </div>

  // BRAND NAVIGATION
  --brand-navigation-dropdown-width: 24rem;
  --brand-navigation-dropdown-padding: 0.9rem 0;
  --brand-navigation-dropdown-background: var(--white);

  --brand-navigation-dropdown-link-padding: 0.9rem 1.8rem;
  --brand-navigation-dropdown-link-background: var(--white);
  --brand-navigation-dropdown-link-hover-background: var(--primary-2);
  --brand-navigation-dropdown-link-color: var(--black);
  --brand-navigation-dropdown-link-hover-color: var(--white);

.brand-navigation {
  position: relative;
  padding: calc(var(--spacing-1) / 2) 0;
  font-size: var(--font-size-2);
  font-weight: var(--bold);
  color: inherit;
  cursor: pointer;
}
.brand-navigation__toggle [class*=fa] {
  padding-left: calc(var(--spacing-1) / 2);
}
.brand-navigation:hover [class*=fa], .brand-navigation:focus [class*=fa] {
  transform: rotate(180deg);
  padding-left: 0;
  padding-right: calc(var(--spacing-1) / 2);
}
.brand-navigation:hover ul, .brand-navigation:focus ul {
  display: block;
}
.brand-navigation__label {
  margin-left: var(--spacing-2);
  color: var(--accent-6);
}
.brand-navigation ul {
  position: absolute;
  top: 100%;
  left: -1.8rem;
  width: var(--brand-navigation-dropdown-width);
  padding: var(--brand-navigation-dropdown-padding);
  background: var(--brand-navigation-dropdown-background);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: 0 1.4rem 1.4rem -1.4rem rgba(173, 173, 173, 0.3);
  text-transform: none;
  display: none;
  z-index: 11;
}
.brand-navigation ul li {
  padding: 0;
  display: block;
}
.brand-navigation ul li:before {
  content: none;
}
.brand-navigation ul li a {
  padding: var(--brand-navigation-dropdown-link-padding);
  background: var(--brand-navigation-dropdown-link-background);
  color: var(--brand-navigation-dropdown-link-color);
  display: block;
}
.brand-navigation ul li a:hover {
  background: var(--brand-navigation-dropdown-link-hover-background);
  color: var(--brand-navigation-dropdown-link-hover-color);
  text-decoration: none;
}

.brand-navigation {
	position: relative;
	padding: calc(var(--spacing-1) / 2) 0;
	font-size: var(--font-size-2);
	font-weight: var(--bold);
	color: inherit;
	cursor: pointer;
	
	&__toggle {
		[class*="fa"] {
			padding-left: calc(var(--spacing-1) / 2);
		}
	}

	&:hover,
	&:focus {
		[class*="fa"] {
			transform: rotate(180deg);
			padding-left: 0;
			padding-right: calc(var(--spacing-1) / 2);
		}

		ul {
			display: block;
		}
	}

	&__label {
		margin-left: var(--spacing-2);
    	color: var(--accent-6);
	}
	
	ul {
		position: absolute;    
		top: 100%;
		left: -1.8rem;
		width: var(--brand-navigation-dropdown-width);
		padding: var(--brand-navigation-dropdown-padding);
		background: var(--brand-navigation-dropdown-background);
		border-radius: 0 0 var(--border-radius) var(--border-radius);
        box-shadow: 0 1.4rem 1.4rem -1.4rem rgba(173, 173, 173, 0.3);
		text-transform: none;
		display: none;
		z-index: 11;
			
		li {
		    padding: 0;
		    display: block;

			&:before {
				content: none;
			}
			  			
			a {
			    padding: var(--brand-navigation-dropdown-link-padding);
			    background: var(--brand-navigation-dropdown-link-background);
				color: var(--brand-navigation-dropdown-link-color);
				display: block;
    			
    			&:hover {
    				background: var(--brand-navigation-dropdown-link-hover-background);
    				color: var(--brand-navigation-dropdown-link-hover-color);
					text-decoration: none;
    			}
			}
		}
	}
}