@layer base {
  @keyframes collapsible-down {
    from {
      max-height: 0;
    }
    to {
      max-height: var(--radix-collapsible-content-height);
    }
  }
  
  @keyframes collapsible-up {
    from {
      max-height: var(--radix-collapsible-content-height);
    }
    to {
      max-height: 0;
    }
  }
  
  .trigger {
    cursor: pointer;
    display: block;
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
  }
  
  .content {
    overflow: hidden;
  }
  
  .content[data-state="open"] {
    animation: collapsible-down var(--animation-duration-fast) ease-out;
  }
  
  .content[data-state="closed"] {
    animation: collapsible-up var(--animation-duration-fast) ease-out;
  }
  
}