/*!
 * # Semantic UI - Accordion
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Accordion
*******************************/

.ui.accordion,
.ui.accordion .accordion {
  max-width: 100%;
}
.ui.accordion .accordion {
  margin: @accordionChildAccordionMargin;
  padding: @accordionChildAccordionPadding;
}

/* Title */
.ui.accordion .title,
.ui.accordion .accordion .title {
  cursor: pointer;
}

/* Default Styling */
.ui.accordion .title:not(.ui) {
  padding: @accordionTitlePadding;
  font-family: @accordionTitleFont;
  font-size: @accordionTitleFontSize;
  color: @accordionTitleColor;
}

/* Content */
.ui.accordion .title ~ .content,
.ui.accordion .accordion .title ~ .content {
  display: none;
}

/* Default Styling */
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
  margin: @accordionContentMargin;
  padding: @accordionContentPadding;
}
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
  padding-bottom: 0em;
}

/* Arrow */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
  display: @accordionIconDisplay;
  float: @accordionIconFloat;
  opacity: @accordionIconOpacity;
  width: @accordionIconWidth;
  height: @accordionIconHeight;
  margin: @accordionIconMargin;
  padding: @accordionIconPadding;
  font-size: @accordionIconFontSize;
  transition: @iconTransition;
  vertical-align: @accordionIconVerticalAlign;
  transform: @accordionIconTransform;
}

/*--------------
    Coupling
---------------*/

/* Menu */
.ui.accordion.menu .item .title {
  display: block;
  padding: @accordionMenuTitlePadding;
}
.ui.accordion.menu .item .title > .dropdown.icon {
  float: @accordionMenuIconFloat;
  margin: @accordionMenuIconMargin;
  transform: @accordionMenuIconTransform;
}

/* Header */
.ui.accordion .ui.header .dropdown.icon {
  font-size: @accordionIconFontSize;
  margin: @accordionIconMargin;
}

/*******************************
            States
*******************************/

.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
  transform: @accordionActiveIconTransform;
}

.ui.accordion.menu .item .active.title > .dropdown.icon {
  transform: @accordionActiveIconTransform;
}

/*******************************
            Types
*******************************/

/*--------------
     Styled
---------------*/

.ui.styled.accordion {
  width: @accordionStyledWidth;
}

.ui.styled.accordion,
.ui.styled.accordion .accordion {
  border-radius: @accordionStyledBorderRadius;
  background: @accordionStyledBackground;
  box-shadow: @styledBoxShadow;
}
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
  margin: @accordionStyledTitleMargin;
  padding: @accordionStyledTitlePadding;
  color: @accordionStyledTitleColor;
  font-weight: @accordionStyledTitleFontWeight;
  border-top: @accordionStyledTitleBorder;
  transition: @accordionStyledTitleTransition;
}
.ui.styled.accordion > .title:first-child,
.ui.styled.accordion .accordion .title:first-child {
  border-top: none;
}


/* Content */
.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
  margin: @accordionStyledContentMargin;
  padding: @accordionStyledContentPadding;
}
.ui.styled.accordion .accordion .content {
  padding: @accordionStyledChildContentMargin;
  padding: @accordionStyledChildContentPadding;
}


/* Hover */
.ui.styled.accordion .title:hover,
.ui.styled.accordion .active.title,
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
  background: @accordionStyledTitleHoverBackground;
  color: @accordionStyledTitleHoverColor;
}
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
  background: @accordionStyledHoverChildTitleBackground;
  color: @accordionStyledHoverChildTitleColor;
}


/* Active */
.ui.styled.accordion .active.title {
  background: @accordionStyledActiveTitleBackground;
  color: @accordionStyledActiveTitleColor;
}
.ui.styled.accordion .accordion .active.title {
  background: @accordionStyledActiveChildTitleBackground;
  color: @accordionStyledActiveChildTitleColor;
}


/*******************************
            States
*******************************/

/*--------------
     Active
---------------*/

.ui.accordion .active.content,
.ui.accordion .accordion .active.content {
  display: block;
}

/*******************************
           Variations
*******************************/

/*--------------
     Fluid
---------------*/

.ui.fluid.accordion,
.ui.fluid.accordion .accordion {
  width: 100%;
}

/*--------------
     Inverted
---------------*/

.ui.inverted.accordion .title:not(.ui) {
  color: @accordionInvertedTitleColor;
}