
/*
# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License").
# You may not use this file except in compliance with the License.
# A copy of the License is located at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# or in the "license" file accompanying this file. This file is distributed
# on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
# express or implied. See the License for the specific language governing
# permissions and limitations under the License.
#
*/

#sidebar {
    border: 1px solid;
    .list-group-item {
      border-radius: 0;
      background-color: #333;
      color: #ccc;
      border-left: 0;
      border-right: 0;
      border-color: #2c2c2c;
      white-space: nowrap;
      &:not(.collapsed) {
        background-color: #222;
      }
    }
    .list-group {
      .list-group-item {
        &[aria-expanded="false"]::after {
          content: " \f0d7";
          font-family: FontAwesome;
          display: inline;
          text-align: right;
          padding-left: 5px;
        }
        &[aria-expanded="true"] {
          background-color: #222;
          &::after {
            content: " \f0da";
            font-family: FontAwesome;
            display: inline;
            text-align: right;
            padding-left: 5px;
          }
        }
      }
      .collapse {
        .list-group-item {
          padding-left: 20px;
        }
        > .collapse {
          .list-group-item {
            padding-left: 30px;
          }
          > .collapse .list-group-item {
            padding-left: 40px;
          }
        }
      }
    }
    &.collapse {
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
      transition-timing-function: ease;
      -webkit-transition-duration: .2s;
      -o-transition-duration: .2s;
      transition-duration: .2s;
    }
    &.collapsing {
      opacity: 0.8;
      width: 0;
      -webkit-transition-timing-function: ease-in;
      -o-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      -webkit-transition-property: width;
      -o-transition-property: width;
      transition-property: width;
    }
  }


  @media (max-width: 48em) {
    #sidebar .list-group {
      .collapse.in, .collapsing {
        position: absolute;
        z-index: 1;
        width: 190px;
      }
      > .list-group-item {
        text-align: center;
        padding: .75rem .5rem;
        &[aria-expanded="true"]::after, &[aria-expanded="false"]::after {
          display: none;
        }
      }
    }
  }
