.navbar-themed-colors {
  // Dropdown: Your profile & Logout
  .dropdown-menu {
    background-color: $gray-800;

    .dropdown-item:hover {
      background-color: $gray-800;
      color: $custom-gray-300;
    }
  }

  &.watchlist-collapse, &.places-collapse, &.actions-collapse {
    position: fixed;
    top: $top-navigation-height;
    left: 100%;
    bottom: $bottom-navigation-height;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    color: $custom-gray-400;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;

    & a {
      color: $custom-gray-300;
      &:hover { color: white; }
    }

    &.open {
      visibility: visible;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }

    button.navbar-toggler {
      color: $custom-gray-300;

      .fas.fa-times {
        line-height: 1.875rem;
        width: 20px;
      }
    }
  }
}

.navbar-themed-colors {
  @extend .border-gray-500;
  background-color: var(--navbar-themed-bg);
}

@include media-breakpoint-up(md) {
  .navbar-collapse {
    &.watchlist-collapse, &.places-collapse, &.actions-collapse {
      width: 40rem;
    }
  }
}

@include media-breakpoint-up(xl) {
  .navbar-collapse {
    &.watchlist-collapse, &.places-collapse, &.actions-collapse {
      bottom: 0;

      button.navbar-toggler { display: none; }
    }
  }
}
