/**
* We use the [accordion from ng2-bootstrap](https://valor-software.com/ng2-bootstrap/#/accordion) with our own custom styles.
* @section Accordions
*/

/**
* __Usage:__
*
* You may need to set a greater `max-height` (defaults to 25em) on `.panel-collapse.in` and `.panel-body` if your accordion content is really long.
*
* @section Basic Accordions
* @sectionof Accordions
*
* @hideCode
* @example
* <accordion class="panel-group">
*   <accordion-group class="panel-open">
*     <div class="panel card panel-default">
*       <div class="panel-heading card-header">
*         <div class="panel-title card-title">
*           <div class="accordion-toggle" role="button">
*             <div accordion-heading="">
*               Dynamic Group Header - 1
*             </div>
*           </div>
*         </div>
*       </div>
*       <div class="panel-collapse collapse in" style="display: block; overflow: visible; height: auto;">
*         <div class="panel-body card-block">
*           Dynamic Group Body - 1
*         </div>
*       </div>
*     </div>
*   </accordion-group>
*   <accordion-group class="panel-open">
*     <div class="panel card panel-default">
*       <div class="panel-heading card-header">
*         <div class="panel-title card-title">
*           <div class="accordion-toggle" role="button">
*             <div accordion-heading="">
*               Dynamic Group Header - 2
*             </div>
*           </div>
*         </div>
*       </div>
*       <div class="panel-collapse collapse in" style="display: block; overflow: visible; height: auto;">
*         <div class="panel-body card-block">
*           Dynamic Group Body - 2
*         </div>
*       </div>
*     </div>
*   </accordion-group>
* </accordion>
*/

accordion {}

accordion-group {
  display: block;
  & + accordion-group {
    margin-top: 0.5em;
  }
  &.panel-open {}
}

.panel {
  // reset .card styles
  background-color: transparent;
  box-shadow: none;
  min-height: auto;
  width: auto;
  .panel-heading {
    background-color: @clr-shade;
    border: 1px solid @clr-frame;
    border-radius: 4px;
    padding: 0.5em 0.5em 0.5em 1.75em;
    position: relative;
    &:hover,
    &:focus {
      box-shadow: inset 0 -0.5px 2px 0 fadeOut(black, 80);
      .panel-open & {
        box-shadow: 0 5px 2px -4px fadeOut(black, 80);
      }
    }
    .accordion-toggle {
      // all heading text ends up in here
      font-size: 1rem;
      font-weight: normal;
      color: @clr-text;
      text-decoration: none;
      outline: none;
      &:extend(.icon-dropdown-angle all);
      &:before {
        font-family: 'benchmark';
        color: @clr-link;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0.5em;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 200ms ease;
        .panel-open & {
          transform: translateY(-50%) rotate(-180deg;)
        }
      }
      a {
        font-size: 1em;
      }
      button.small {
        color: inherit;
        font-weight: inherit;
        line-height: 1.6em;
      }
    }
    .panel-open & {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  .panel-collapse {
    border: 1px solid @clr-frame;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-top: -1px;
    max-height: 0em;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(1,0,0,1),
                opacity 0.1s ease 0.2s;
    // override inline styles from ng2-bootstrap
    overflow: hidden !important;
    display: block !important;
    .panel-body {
      padding: 0.5em;
      max-height: 25em;
      overflow-y: auto;
    }
    &.in {
      max-height: 25em;
      opacity: 1;
      transition: max-height 0.3s cubic-bezier(1,0,0,1),
                  opacity 0.1s ease;
    }
  }
}

/**
* For accordions with buttons, add a custom `accordion-heading` inside the `<accordion-group>` element. Add the `.w-controls` class and the `.accordion-controls` container for your button controls.
*
*     <div accordion-heading class="w-controls">
*       <p>Header Text</p>
*       <div class="accordion-controls">
*         <button class="clear icon-remove flush">
*           <span class="sr-only">Delete Item</span>
*         </button>
*       </div>
*     </div>
*
* @section Accordions with Buttons
* @sectionof Accordions
*
* @hideCode
* @example
* <accordion class="panel-group">
*   <accordion-group>
*     <div class="panel card panel-default">
*       <div class="panel-heading card-header">
*         <div class="panel-title card-title">
*           <div class="accordion-toggle" role="button">
*             <div class="w-controls">
*               <p>Header Text</p>
*               <div class="accordion-controls">
*                 <button class="clear icon-remove flush">
*                   <span class="sr-only">Delete Item</span>
*                 </button>
*               </div>
*             </div>
*           </div>
*         </div>
*       </div>
*       <div class="panel-collapse collapse in">
*         <div class="panel-body card-block">
*           Dynamic Group Body - 1
*         </div>
*       </div>
*     </div>
*   </accordion-group>
* </accordion>
*/

.panel-heading .w-controls {
  display: flex;
  align-items: center;
  & > *:not(.accordion-controls) {
    flex-basis: 9999em;
  }
  .accordion-controls {
    white-space: nowrap;
    padding-left: 1em;
  }
}