/*
 * This file defines the styling for side navigation in Horizon, which uses
 * nested panels to utilise Bootstraps native JS handling for accordion menus
 * in panels. However, Bootstrap does *not* natively support nested panels
 * in its markup; to work around this, we remove the panel styling and inherit
 * list group styling.
 */

#sidebar-accordion {
  width: $sidebar-width;
}

#sidebar-mask {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  z-index: 2;
  transition: all 0.3s ease 0s;

  @media (max-width: $screen-xs-max) {
    &.on-screen {
      visibility: visible;
      opacity: 1;
    }
  }
}

#sidebar {
  width: $sidebar-width;

  // Make sure the side nav is always shown at larger screen sizes,
  // regardless of previous state
  @media (min-width: $screen-sm-min) {
    display: block;
  }

  @media (max-width: $screen-xs-max) {
    transition: all 0.3s ease 0s;
    position: fixed;
    top: $navbar-height;
    bottom: 0;
    z-index: 3;
    left: -$sidebar-width;
    overflow-y: auto;
    overflow-x: hidden;

    &.on-screen {
      left: 0;
    }
  }

  // Sets the arrow toggles for each dashboard list
  .openstack-toggle.fa {
    line-height: $line-height-computed;
    text-align: center;
    @include transition(transform 0.3s ease 0s);
    @extend .fa-chevron-down;
  }

  // Rotate the arrow toggle for closed panels
  .collapsed > .openstack-toggle.fa {
    @include rotate(-90deg);
  }

  // Remove panel default styling for the side nav only
  .panel {
    margin: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    cursor: pointer;

    .list-group-item {
      border-radius: 0;
      border: 0;
    }

    // Use the list group styling for consistency. We use panels in the markup
    // for accordion, but style should be list-group.
    > a {
      color: $list-group-link-color;
      background: $list-group-bg;

      &:hover {
        background: $list-group-hover-bg;
      }
    }
  }

  // Remove Chromes glowing blue border for focus. This should not affect
  // accessibility, as the tabs already have a focus effect.
  a:focus {
    outline: 0;
  }

  // Center align panel groups
  .openstack-panel-group {
    text-align: center;
  }

  // Right align panels
  .openstack-panel {
    text-align: right;
  }
}
