.fizz-nav-list > :not(:last-child) {
  margin-bottom: $spacing-4;
}

.fizz-nav-list a {
  display: block;
  padding: $spacing-8;
  font-weight: $font-weight-regular;
  color: #002B48;
  display: flex;
  align-items: center;
  border-radius: $border-radius-medium;
}

.fizz-nav-list a svg {
  fill: #848484;
}

.fizz-nav-list a > :not(:last-child) {
  margin-right: $spacing-8;
}

.fizz-nav-list a:hover,
.fizz-nav-list a.fizz-is-active {
  text-decoration: none;
  background-color: #F5F7F7;
}

.fizz-nav-list a.fizz-is-active {
  font-weight: $font-weight-semibold;  
}

.fizz-nav-list a:hover svg,
.fizz-nav-list a.fizz-is-active svg{
  fill: currentColor;
}

.fizz-nav-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-8;
  padding: $spacing-8 $spacing-32 0 $spacing-32;
}
.fizz-nav-secondary button {
  position: relative;
  padding: $spacing-8 $spacing-24 $spacing-16 $spacing-8;
  border-radius: $border-radius-medium;
  font-weight: $font-weight-semibold;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  color: $color-text-brand;
  background-image: $icon-chevron-down-brand;
  background-repeat: no-repeat;
  background-size: $spacing-16;
  background-position: right $spacing-4 top 10px;
}

.fizz-nav-secondary button:hover,
.fizz-nav-secondary button:focus {
  background-color: transparent;
  background-image: $icon-chevron-up-brand;
}

.fizz-nav-secondary button:focus {
  outline: 0;
  border-color: transparent;
  box-shadow: none;
}

.fizz-nav-secondary button:hover:after,
.fizz-nav-secondary button:focus:after {
  content: "";
  display: block;
  height: $border-width-thick;
  width: calc(100% - #{$spacing-12});
  background-color: $color-background-brand-secondary;
  position: absolute;
  bottom: 0;
  left: $spacing-8;
}

@media (min-width: $breakpoint-header-l) {
  .fizz-nav-secondary {
    gap: $spacing-32;  
  }
  .fizz-nav-secondary button {
    padding: $spacing-8 $spacing-32 $spacing-16 $spacing-16;
    background-position: right $spacing-8 top 10px;
  }
  .fizz-nav-secondary button:hover:after,
  .fizz-nav-secondary button:focus:after {
    left: $spacing-16; 
    width: calc(100% - 24px);
  }
}

.fizz-icon-menu > :not(:last-child) {
  margin-bottom: $spacing-8;
}

.fizz-icon-menu a {
  display: flex;
  align-items: center;
  color: inherit;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  border-radius: $border-radius-medium;
  padding: $spacing-4 $spacing-8;
}

.fizz-icon-menu a:hover {
  text-decoration: none;
  background-color: $color-gray-100;
}

.fizz-icon-menu a > :not(:last-child) {
  margin-right: $spacing-16;
}