/**
 * Accordion
 */

// Dependencies
@use 'config/typography';
@use 'config/interaction';
@use 'config/buttons';
@use 'config/material';

// Declarations
.c-accordion {
  display: grid;
  gap: var(--nyco-spacing-DEFAULT);
}

.c-accordion__group {
  @include material.styles;

  background-color: var(--nyco-accordion-body);
  border-color: var(--nyco-accordion-header);
}

.c-accordion__header {
  @include typography.set('h4');

  background-color: var(--nyco-accordion-header);
  padding: var(--nyco-spacing-DEFAULT);
  margin: 0;
}

.c-accordion__heading {
  flex: 1;
  margin: 0;
}

.c-accordion__toggle {
  @include buttons.toggle();

  width: 100%;

  // Historical
  // text-align: start;
  // width: 100%;
  // text-decoration: underline;
  // display: inline-flex;
  // align-items: center;

  // * {
  //   @include interaction.disable-pointer-events
  // }
}

// .c-accordion__toggle-active,
// .c-accordion__toggle-inactive {
//   align-items: center;
// }

// .c-accordion__toggle-active {
//   display: none;
//   visibility: hidden;

//   .c-accordion__toggle.active & {
//     @include interaction.disable-pointer-events;

//     display: inline-flex;
//     visibility: visible
//   }
// }

// .c-accordion__toggle-inactive {
//   @include interaction.disable-pointer-events;

//   display: inline-flex;
//   visibility: visible;

//   .c-accordion__toggle.active & {
//     display: none;
//     visibility: hidden
//   }
// }

.c-accordion__padding {
  padding: var(--nyco-spacing-DEFAULT);
}

.c-accordion__padding > *:last-child {
  margin-bottom: 0
}

@mixin print {
  .c-accordion {
    color: inherit;
    background-color: transparent
  }

  .c-accordion__header {
    color: inherit;
    background-color: transparent;
    padding: 0;
    margin-bottom: inherit
  }

  .c-accordion__padding {
    padding: 0
  }

  .c-accordion__body {
    color: inherit;
    background-color: transparent
  }
}

.print-view {
  @include print
}

@media print {
  @include print
}