@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

.accordion {
  $header-height: 40px;

  .header {
    display: flex;
    align-items: center;
    min-height: $header-height;
    margin: 0;
    margin-top: $spacing-2;
    background-color: $slate-300;
    border: 1px solid $slate-300;
    border-radius: $rounded-lg;
    transition: filter .2s ease-in-out;

    input[type=text] {
      flex: 1;
      margin-inline: $spacing-2;

      &:disabled {
        background-color: $slate-200;
        opacity: .5;
      }
    }

    // Reduce margin of the button if it's present with the input in the same container
    &:has(input[type=text]) button.delete {
      margin-inline-start: -$spacing-2;
    }

    .arrow {
      transition: transform .5s;

      svg {
        width: 24px;
        height: 24px;
        pointer-events: none;
      }
    }

    &.open {
      border-radius: $rounded-lg $rounded-lg 0 0;

      .arrow {
        transform: rotate(180deg);
      }

      + * {
        padding: $spacing-4;
        grid-template-rows: 1fr;
        border: 1px solid $slate-300;
        border-radius: 0 0 $rounded-lg $rounded-lg;
      }
    }

    + * {
      // Accordion content
      display: grid;
      padding: 0 $spacing-4;
      overflow: hidden;
      transition: grid-template-rows .5s, padding .5s;
      gap: $spacing-2;
      grid-template-rows: 0fr;

      > * {
        min-height: 0;

        > button {
          width: fit-content;
        }
      }
    }
  }
}
