/* Navigation element that collapses on mobile */
.collapsible-nav {
  @include tablet {
    flex-direction: row;
  }

  flex-direction: column;
  font-size: $font-size-navigation;
  position: relative;
}

.collapsible-nav-border {
  @include tablet {
    border-top: 0;
  }

  border-bottom: 1px solid $low-contrast-border-color;
  border-top: 1px solid $low-contrast-border-color;
}

.collapsible-nav-toggle {
  @include tablet { display: none; }
  top: calc(45px / 2);
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;

  [dir="rtl"] & {
    left: 0;
    right: auto;
  }

  &-icon {
    display: none;
  }

  &[aria-expanded="false"] {
    .chevron-icon {
      display: inline-block;
    }
  }
  
  &[aria-expanded="true"] {
    .x-icon {
      display: inline-block;
    }
  }

  &:focus {
    outline: none;
    border: 1px solid $brand_color;
  }
}

.collapsible-nav-list {
  @include tablet {
    flex-direction: row;
  }

  display: flex;
  flex-direction: column;

  li {
    @include tablet {
      line-height: normal;
      margin-right: 30px;

      [dir="rtl"] & {
        margin-left: 30px;
        margin-right: 0;
      }

      a {
        text-decoration: none;
        padding: 15px 0;
      }
    }

    color: $text_color;
    line-height: 45px;
    order: 1; // All elements have the same order

    a {
      color: $text_color;
      display: block;
    }
  }

  li:hover {
    @include tablet {
      border-bottom: 4px solid #ddd;

      a:not([aria-current="page"]) {
        padding: 15px 0 11px 0;
        text-decoration: none;
      }
    }
  }

  li:not([aria-selected="true"]),
  li:not(.current) {
    @include tablet { display: block; }
    display: none;
  }

  li[aria-selected="true"] {
    @include tablet {
      padding: 15px 0 11px 0;
    }
  }

  li[aria-selected="true"],
  li.current {
    @include tablet {
      border-bottom: 4px solid $brand_color;
      order: 1;
    }

    order: 0; //Move to top of menu
    position: relative;

    a { color: $text_color; }
  }
}

.collapsible-nav[aria-expanded="true"] {
  li:not([aria-selected="true"]),
  li:not(.current) {
    display: block;
  }
}