.PopNavigation {
  color: $content-background;

  &--docs {
    float: left;

    .PopNavigation-list {
      left: 24px;
    }
  }

  &--account {
    float: right;

    .PopNavigation-list {
      right: 24px;
    }
  }

  &-list {
    @include box-shadow(0 0 6px rgba($font-color, .1));
    background: rgba($content-background, .99);
    border: 1px solid $border-color;
    border-radius: 6px;
    display: none;
    margin: 12px 0;
    max-width: 240px;
    min-width: 100px;
    overflow: hidden;
    position: absolute;
    text-align: left;
    width: 20%;
    z-index: 1000;

    &.is-toggled,
    &:target {
      display: block;
    }
  }

  &-listItem {
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: 0;
    }
  }

  &-info {
    color: $light-color;
    display: block;
    font-size: 11px;
    font-style: italic;
    margin: 0;
    padding: 12px 12px 0;
  }

  &-link {
    color: $font-color;
    display: block;
    padding: 12px;

    &:hover {
      color: $link-color;
    }
  }

  &-trigger {
    color: $border-color;
    cursor: pointer;
    display: block;
    line-height: 22px;
    padding: 8px 24px;

    &:hover,
    &.is-toggled,
    &.is-current {
      color: $link-color;
    }
  }
}
