@import "@css[shared]/components/header/_header-sections";

.header-sections {
   border-top: 1px solid $border-color;
   border-bottom: 1px solid $border-color;

   .level-0 {
      max-width: 1240px;
      margin: auto;
      height: 57px;

      > .nav-item {
         padding: 0 15px;

         &.active {
            > .nav-link {
               color: $text-muted;
            }

            > .nav-link::after {
               background-color: $text-muted;
            }
         }

         &.hover {
            > .nav-link::after {
               width: 100%;
            }
         }

         > .nav-link {
            font-weight: $font-weight-bold;
         }
      }
   }

   @media screen and (max-width: $xl - 1) {
      .level-0 {
         > .nav-item {
            padding: 0 10px;

            > .nav-link {
               font-weight: $font-weight-bold;
            }
         }
      }
   }
}

