@import '../../themes/default/modules/accordion.variables';

@if $use-accordion {
  /*******************************
  //@-        Accordion
  *******************************/

  .ui.accordion,
  .ui.accordion .accordion {
    max-width: 100%;
  }
  .ui.accordion .accordion {
    margin: $accordion-child-margin;
    padding: $accordion-child-padding;
  }

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

  /* Default Styling */
  .ui.accordion .title:not(.ui) {
    padding: $accordion-title-padding;
    font-family: $accordion-title-font;
    font-size: $accordion-title-font-size;
    color: $accordion-title-color;
  }

  /* Default Styling */
  .ui.accordion:not(.styled) .title ~ .content:not(.ui),
  .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
    margin: $accordion-content-margin;
    padding: $accordion-content-padding;
  }
  .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: $accordion-icon-display;
    float: $accordion-icon-float;
    opacity: $accordion-icon-opacity;
    width: $accordion-icon-width;
    height: $accordion-icon-height;
    margin: $accordion-icon-margin;
    padding: $accordion-icon-padding;
    font-size: $accordion-icon-font-size;
    transition: $accordion-icon-transition;
    vertical-align: $accordion-icon-vertical-align;
    transform: $accordion-icon-transform;
  }

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

  /* Menu */
  .ui.accordion.menu .item .title {
    display: block;
    padding: $accordion-menu-title-padding;
  }
  .ui.accordion.menu .item .title > .dropdown.icon {
    float: $accordion-menu-icon-float;
    margin: $accordion-menu-icon-margin;
    transform: $accordion-menu-icon-transform;
  }

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

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

  .ui.accordion .active.title .dropdown.icon,
  .ui.accordion .accordion .active.title .dropdown.icon {
    transform: $accordion-active-icon-transform;
  }

  .ui.accordion.menu .item .active.title > .dropdown.icon {
    transform: $accordion-active-icon-transform;
  }

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

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

  .ui.styled.accordion {
    width: $accordion-styled-width;
  }

  .ui.styled.accordion,
  .ui.styled.accordion .accordion {
    border-radius: $accordion-styled-border-radius;
    background: $accordion-styled-background;
    box-shadow: $accordion-styled-box-shadow;
  }
  .ui.styled.accordion .title,
  .ui.styled.accordion .accordion .title {
    margin: $accordion-styled-title-margin;
    padding: $accordion-styled-title-padding;
    color: $accordion-styled-title-color;
    font-weight: $accordion-styled-title-font-weight;
    border-top: $accordion-styled-title-border;
    transition: $accordion-styled-title-transition;
  }
  .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: $accordion-styled-content-margin;
    padding: $accordion-styled-content-padding;
  }
  .ui.styled.accordion .accordion .content {
    margin: $accordion-styled-child-content-margin;
    padding: $accordion-styled-child-content-padding;
  }


  /* Hover */
  .ui.styled.accordion .title:hover,
  .ui.styled.accordion .active.title,
  .ui.styled.accordion .accordion .title:hover,
  .ui.styled.accordion .accordion .active.title {
    background: $accordion-styled-title-hover-background;
    color: $accordion-styled-title-hover-color;
  }
  .ui.styled.accordion .accordion .title:hover,
  .ui.styled.accordion .accordion .active.title {
    background: $accordion-styled-hover-child-title-background;
    color: $accordion-styled-hover-child-title-color;
  }


  /* Active */
  .ui.styled.accordion .active.title {
    background: $accordion-styled-active-title-background;
    color: $accordion-styled-active-title-color;
  }
  .ui.styled.accordion .accordion .active.title {
    background: $accordion-styled-active-child-title-background;
    color: $accordion-styled-active-child-title-color;
  }


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

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

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

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

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

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

  @if($use-accordion-variation-inverted) {
    /*--------------
        Inverted
    ---------------*/
    
    .ui.inverted.accordion .title:not(.ui) {
      color: $accordion-inverted-title-color;
    }
  }
}

@import '../../themes/default/modules/accordion.style';