// Accordion
// 
// Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
// and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
// 
// 1. closed pane (and default styling): 
//    .dijitAccordionInnerContainer - container for each accordion child
//    .dijitAccordionTitle - title for each accordion child
//
// 2. active closed pane (ie, mouse down on a title bar)
//    .dijitAccordionInnerContainerActive - for background-color, border
//    .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
// 
// 3. open pane (expanded child)
//    .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
//      setting a margin so that there's blue trim all the way around the child
//
//    These rules need to override the closed pane active:
//
//    .dijitAccordionInnerContainerSelected - for background-color, border
//    .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
// 
// 4. hovered pane, open or closed
//    The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
//    and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
//
//    .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
//    .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
//
.#{$theme-name} {
  .dijitAccordionContainer {
    border: 0;
    .dijitAccordionInnerContainer + .dijitAccordionInnerContainer {
      margin-top: $accordion-spacing;
    }
  }
  .dijitAccordionInnerContainer {
    background-color: $accordion-bg;
    border: 1px solid $accordion-border;
    .dijitAccordionTitle {
      padding: $accordion-title-padding;
      color: $accordion-title-default-color;
      background-color: $accordion-title-default-bg;
      @include transition-property(background-color, border);
      @include transition-duration(.25s);
      @include transition-timing-function(linear);
      .dijitAccordionText {
        line-height: $accordion-title-line-height;
        font-size: $accordion-title-font-size;
        color: inherit;
      }
      &:hover,
      &:focus {
        background-color: $accordion-title-hover-bg;
      }
    }
    .dijitAccordionChildWrapper {
      border-top: 1px solid $accordion-border;
    }
  }
  .dijitAccordionArrow {
    margin-right: $padding-base-horizontal;
    @include dijit-icons;
    text-align: center;
    &:before {
      @include icon-get-content(esri-icon-down);
    }
  }
  .dijitAccordionTitleSelected {
    .dijitAccordionArrow {
      &:before {
        @include icon-get-content(esri-icon-up);
      }
    }
  }
}

