/**
* Mixins to accordions.
*/

@mixin accordion-collapsible {
  @include accordion-collapsible-close;

  display: grid;
  transition:
    grid-template-rows $transition-default,
    opacity $transition-default,
    visibility $transition-default;

  .accordion-open & {
    @include accordion-collapsible-open;
  }
}

@mixin accordion-collapsible-close {
  opacity: 0;
  visibility: hidden;
  grid-template-rows: 0fr;
}

@mixin accordion-collapsible-open {
  opacity: 1;
  visibility: visible;
  grid-template-rows: 1fr;
}

@mixin accordion-content {
  overflow: hidden;
}