@charset "utf-8";

.accordion {
  display:block;
  width:200px;
  margin: 0 auto;
  border:solid 1px #ccc;
  border-radius:5px;
  background-color: #fff;
  @include box-shadow(0 2px 10px rgba(#000,.2));
  li {
    list-style:none;
  }
  a,
  .toggle {
    display:block;
    position:relative;
    padding:5px;
    text-decoration:none;
    color: #333333;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
    &:hover {
      background-color:#eee;
    }
  }
  .toggle {
    &:after {
      display:block;
      content:"";
      width:5px;
      height:5px;
      position:absolute;
      top:50%;
      right:10px;
      margin-top:-5px;
      border-top: solid 3px #333;
      border-right: solid 3px #333;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -webkit-transition: .2s ease-in-out;
    }
    &.open:after {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }
  }
  li ul {
    display: none;
    background:#999;
    margin:0;
    font-size:small;
    overflow:hidden;
    li {
      a {
        line-height:20px;
        color:#fff;
        &:after {
          display:none;
        }
        &:hover {
          background-color:#666;
        }
      }
    }
  }
}