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

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'accordion';

@import (multiple) '../../theme.config';

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

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

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

/* Default Styling */
.ui.accordion .title:not(.ui) {
  padding: @titlePadding;
  font-family: @titleFont;
  font-size: @titleFontSize;
  color: @titleColor;
}

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

/* Arrow */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
  display: @iconDisplay;
  float: @iconFloat;
  opacity: @iconOpacity;
  width: @iconWidth;
  height: @iconHeight;
  margin: @iconMargin;
  padding: @iconPadding;
  font-size: @iconFontSize;
  transition: @iconTransition;
  vertical-align: @iconVerticalAlign;
  transform: @iconTransform;
}

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

/* Menu */
.ui.accordion.menu .item .title {
  display: block;
  padding: @menuTitlePadding;
}
.ui.accordion.menu .item .title > .dropdown.icon {
  float: @menuIconFloat;
  margin: @menuIconMargin;
  transform: @menuIconTransform;
}

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

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

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

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

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

& when (@variationAccordionStyled) {
  /*--------------
       Styled
  ---------------*/

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

  .ui.styled.accordion,
  .ui.styled.accordion .accordion {
    border-radius: @styledBorderRadius;
    background: @styledBackground;
    box-shadow: @styledBoxShadow;
  }
  .ui.styled.accordion .title,
  .ui.styled.accordion .accordion .title {
    margin: @styledTitleMargin;
    padding: @styledTitlePadding;
    color: @styledTitleColor;
    font-weight: @styledTitleFontWeight;
    border-top: @styledTitleBorder;
    transition: @styledTitleTransition;
  }
  .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: @styledContentMargin;
    padding: @styledContentPadding;
  }
  .ui.styled.accordion .accordion .content {
    margin: @styledChildContentMargin;
    padding: @styledChildContentPadding;
  }


  /* Hover */
  .ui.styled.accordion .title:hover,
  .ui.styled.accordion .active.title,
  .ui.styled.accordion .accordion .title:hover,
  .ui.styled.accordion .accordion .active.title {
    background: @styledTitleHoverBackground;
    color: @styledTitleHoverColor;
  }
  .ui.styled.accordion .accordion .title:hover,
  .ui.styled.accordion .accordion .active.title {
    background: @styledHoverChildTitleBackground;
    color: @styledHoverChildTitleColor;
  }


  /* Active */
  .ui.styled.accordion .active.title {
    background: @styledActiveTitleBackground;
    color: @styledActiveTitleColor;
  }
  .ui.styled.accordion .accordion .active.title {
    background: @styledActiveChildTitleBackground;
    color: @styledActiveChildTitleColor;
  }
}


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

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

.ui.accordion .title ~ .content:not(.active),
.ui.accordion .accordion .title ~ .content:not(.active) {
  display: none;
}

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

& when (@variationAccordionFluid) {
  /*--------------
       Fluid
  ---------------*/

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

& when (@variationAccordionInverted) {
  /*--------------
       Inverted
  ---------------*/

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

.loadUIOverrides();