@use 'sass:math';

.au-body {
  .au-side-nav {

    background: none;
    @include AU-space('margin-top', 1unit);

    @include AU-media('sm') {
      @include AU-space('margin-top', 0);
    }

    // Add our colours.
    @include AU-media(sm) {
      background: $AU-color-background;
    }

    a {
      background: transparent;
      position: relative;

      &:hover,
      &:focus {
        background-color: var(--side-nav-link-bg--active);
      }

      &.active,
      &.is-active {
        font-weight: bold;
        color: $AU-color-foreground-text;
        background-color: var(--side-nav-link-bg--active);
        border-left: 4px solid var(--side-nav-link-border);
      }
    }

    .au-sidenav__title a {
      background: var(--side-nav-parent-bg);
      color: #fff;
      border-bottom: 0;
      border-left: 0;

      &.active,
      &.is-active {
        color: #fff;
        background-color: var(--side-nav-parent-bg);
      }
    }

    .au-side-nav__content {
      @include AU-space(margin-left, 0);
      @include AU-space(margin-right, 0);

      >ul>li,
      >nav>ul>li {
        border-bottom: 1px solid var(--side-nav-link-border--bottom);
      }
    }

    li,
    ul {
      position: relative;
    }

    li {
      &.expanded {

        // Put a blue down arrow on the right side of the expanded menu's item.
        >a:first-child {
          @include chevron(right, down);
        }
      }

      &.collapsed {

        // Put a blue right arrow on the right side of a collapsed menu title.
        a {
          @include chevron(right, right);
        }
      }
    }

    @media print {
      display: none;
    }
  }

  // Put the nav on the right instead of the left.
  // Apply to wrapper above au-side-nav.
  .au-side-nav--right {
    float: none;
    padding-left: 0;
    padding-right: 0;
    @include AU-space(padding-bottom, 2unit);

    @include AU-media(sm) {
      float: right;
      padding-left: math.div($AU-grid-12-gutter-width, 2);
      padding-right: math.div($AU-grid-12-gutter-width, 2);
    }
  }
}