.nav__list-item--x-showroom.is-current {
  border-bottom: 3px solid $color-clickable-600;
}

.nav--get-started {
  width: 300px;
  white-space: normal;
}

//
// Nav showroom tweak
// There's no real need to have the Showroom navigation baked inside UIF
// As a prototype leveraging only UIF components it did the job.
// However, this snippet marks the beginning of something more specialised.
// I suggest that the navigation be properly refactored into a custom CSS
// component and moved into Platform-CMS and Platform
//
$nav-showroom-pointer-size: 8px;

.nav--showroom {
  margin-top: $nav-showroom-pointer-size * 2;
  background-color: #fff;
  border: 1px solid $colour-grey-light;
  min-width: 9em;
  transform: translateX(-50%);
  display: none;
  visibility: hidden;

  .is-open > & {
    display: inline-block;
    visibility: visible;
  }

  &.nav {
    left: 50%;
    top: 100%;
  }

  &::before {
    content: "";
    width: 0;
    height: 0;
    border: $nav-showroom-pointer-size solid transparent;
    border-bottom-color: $color-clickable-600;
    position: absolute;
    left: 50%;
    margin-left: -$nav-showroom-pointer-size;
    bottom: 100%;
  }
}

.nav__link--showroom {
  text-align: center;
  font-size: 0.8em;
  font-weight: $font-weight-semibold;
  display: block;
  color: $color-font-default;
  padding: 0.2em;

  &:visited {
    color: $color-font-default;
  }

  &:hover,
  &:focus {
    color: $colour-blue;
    text-decoration: none;
  }
}