// TitlePane and Fieldset
// 
// Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
// 
// TitlePane title:
// 1. TitlePane title (default styling): 
//    .dijitTitlePaneTitle - TitlePane's title div style: background-color, border
//
// 2. hovered TitlePane title (ie, mouse hover on a title bar)
//    .dijitTitlePaneTitleHover - styles when mouse hover on the title div
// 
// 3. active TitlePane title (ie, mouse down on a title bar)
//    .dijitTitlePaneTitleActive - styles when mouse down on the title div
// 
// 
// TitlePane Content Container:
// 1. outer/inner container: 
//    .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
//
.#{$theme-name} {
  .dijitTitlePane {
    background-color: $panel-bg;
    border: 1px solid $panel-default-border;
    @include calcite-box-shadow-accordion;
    @include transition-property(background-color, border);
    @include transition-duration(.3s);
    @include transition-timing-function(linear);
  }
  .dijitTitlePaneTitle {
    padding: $panel-heading-padding;
    color: $panel-default-text;
    background-color: $panel-default-heading-bg;
  }
  .dijitTitlePaneContentOuter {
    border-top: 1px solid $panel-default-border;
  }
  .dijitTitlePaneContentInner {
    padding: $panel-body-padding;
  }
  .dijitTitlePaneTextNode {
    line-height: $titlepane-title-line-height;
    font-size: $titlepane-title-font-size;
    color: inherit;
  }
}

