@import '../../scss/variables.scss';
@import '../../scss/mixins.scss';

// #variables
$s-accordion-border-color: $s-border-color !default;
$s-accordion-border-radius: $s-border-radius !default;

$s-accordion-item-header-padding: 10px 15px !default;
$s-accordion-item-title-font-size: $s-font-size !default;
$s-accordion-item-arrow-transition-duration: 300ms !default;
$s-accordion-item-content-padding: 10px 15px 15px !default;
// #endvariables

.s-accordion {
  position: relative;
  @include border-vertical($s-accordion-border-color);
  border-radius: $s-accordion-border-radius;
}

.s-accordion-item {
  position: relative;
  ~ .s-accordion-item {
    @include border-top($s-accordion-border-color);
  }
}

.s-accordion-item-header {
  display: flex;
  padding: $s-accordion-item-header-padding;
  cursor: pointer;

  .s-accordion-item-disabled & {
    @include disabled;
  }
}

.s-accordion-item-title {
  font-size: $s-accordion-item-title-font-size;
}

.s-accordion-item-icon {
  margin-left: auto;
}

.s-accordion-item-arrow {
  transition: transform $s-accordion-item-arrow-transition-duration;

  .s-accordion-item-active & {
    transform: rotate(-180deg);
  }
}

.s-accordion-item-content {
  padding: $s-accordion-item-content-padding;
}