// RAMEN ACCORDION COMPONENT
//
//
// Required Global Variables:
// $spacing-small
// $spacing-xxsmall
//
//
// Required Component Variables:
//
// $panel-background-color: Sets the panel background color
// $panel-color: Sets the panel text color
// $panel-border: Sets the panel border
//
//

@mixin panel {
  background: $panel-background-color;
  border-top: $panel-border;
  color: $panel-color;
  padding-top: $spacing-small;
  position: relative;

  &:last-child {
    border-bottom: $panel-border;
  }
}

@mixin panel-header {
  margin-bottom: $spacing-small;
  padding-right: $spacing-medium;
  text-align: left;
}

@mixin panel-header-arrow {
  display: block;
  position: absolute;
  right: 0;
  top: $panel-header-arrow-top-spacing;

  &:after {
    background-image: $panel-header-arrow-svg-before;
    background-position: center;
    background-repeat: no-repeat;
    background-size: $panel-header-arrow-svg-size auto;
    content: '';
    display: block;
    height: toRems(20px);
    position: absolute;
    right: $spacing-xxsmall;
    top: 0;
    width: toRems(20px);

    .is-open & {
      background-image: $panel-header-arrow-svg-after;
    }
  }
}

@mixin panel-content {
  height: 0;
  overflow: hidden;
  transition: height $global-transition-speed $global-easing;
}

.c-accordion {
  &__panel {
    @include panel;
  }

  &__header {
    @include panel-header;
  }

  &__header-arrow {
    @include panel-header-arrow;
  }

  &__content {
    @include panel-content;
  }
}