.vmsw-heading {
  background-color: $vl-secondary-blue;

  .vmsw-heading__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: $vl-spacing-medium 0;
  }

  .vmsw-heading__host {
    flex: 0 0 auto;
    width: 100%;

    .vmsw-heading__host__title {
      width: 100%;
      font-size: 2rem;
      line-height: 1;
      display: flex;
      color: white;
      justify-content: space-between;

      div {
        display: flex;
        align-items: center;
      }

      .vmsw-heading__identity {
        font-size: 80%;

        span {
          margin-right: 20px;
        }
      }

      @include respond-to(small) {
        display: table;

        div:first-child {
          margin-bottom: 20px;
        }
      }

      .vmsw-heading__host__title__link {
        text-transform: uppercase;
        text-decoration: none;
        margin-right: 20px;
      }

      .vmsw-heading__host__title__name,
      .vmsw-heading__host__title__sub {
        display: block;
      }

      .vmsw-heading__host__title__name {
        font-weight: 500;
      }
    }
  }

  .vmsw-heading__subnavigation {
    display: flex;
    align-items: flex-end;
    margin-left: 2rem;
  }

  .vmsw-heading__navigation {
    position: relative;

    .vmsw-heading__navigation__item:not(:last-of-type) {
      padding-right: 2.5rem;
    }

    .vmsw-heading__navigation__item {
      flex: 0 0 auto;
    }

    .vmsw-heading__navigation__list {
      display: flex;
      align-items: center;
    }

    .vmsw-heading__navigation__cta {
      position: relative;
      color: inherit;
      padding: 1.3rem 0;
      display: inline-flex;
      color: white;
      text-decoration: none;
      cursor: pointer;
      font-size: 18px;
    }

    .vmsw-heading__navigation__cta--active,
    .vmsw-heading__navigation__cta.wp-link--active,
    .vmsw-heading__navigation__cta.wp-link--exact-active,
    .vmsw-heading__navigation__cta:focus,
    .vmsw-heading__navigation__cta:hover {
      color: white;
      box-shadow: none;
    }
  }
}

.vmsw-heading__navigation__cta--active:before,
.vmsw-heading__navigation__cta.wp-link--active:before,
.vmsw-heading__navigation__cta.wp-link--exact-active:before,
.vmsw-heading__navigation__cta:focus:before,
.vmsw-heading__navigation__cta:hover:before {
  opacity: 1;
  width: 100%;
}

.vmsw-heading__navigation__cta:before {
  background: white;
  bottom: 0;
  content: "";
  height: 0.3rem;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  width: 70%;
  opacity: 0;
  transition: opacity 0.1s ease-out, width 0.2s ease-out;
}

@media screen and (max-width: 767px) {
  .vmsw-heading {
    margin-bottom: 2rem;
    padding-bottom: 2rem;

    .vmsw-heading__host .vmsw-heading__host__title {
      font-size: 2rem;
    }
  }
}