/*

* # Semantic - Accordion
* http://github.com/jlukic/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘module’; @element : ‘accordion’;

@import ‘../../theme.config’;

/*******************************

Accordion

*******************************/

.ui.accordion, .ui.accordion .accordion {

max-width: 100%;
font-size: @fontSize;

} .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;

}

/* 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: @contentMargin;
padding: @contentPadding;

} .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: @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

*******************************/

/*————–

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 {

padding: @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

*******************************/

/*————–

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: @invertedTitleColor;

}

.loadUIOverrides();