@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes expandHeight {
  from {
    height: var(--collapsed-height, 0);
  }
  to {
    height: var(--height);
  }
}

@keyframes collapseHeight {
  from {
    height: var(--height);
  }
  to {
    height: var(--collapsed-height, 0);
  }
}

[data-scope='collapsible'][data-part='content'] {
  overflow: hidden;
  max-width: 400px;
  background-color: cadetblue;
  color: white;

  &[data-state='open'] {
    animation-name: fadeIn, expandHeight;
    animation-duration: 200ms;
    animation-timing-function: ease;

    &[data-has-collapsed-size] {
      animation-name: expandHeight;
    }
  }

  &[data-state='closed'] {
    animation-name: fadeOut, collapseHeight;
    animation-duration: 200ms;
    animation-timing-function: ease;

    &[data-has-collapsed-size] {
      animation-name: collapseHeight;
    }
  }

  > * {
    margin: 12px;
  }
}

[data-scope='collapsible'][data-part='indicator'] {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms;

  &[data-state='open'] {
    transform: rotate(90deg);
  }
}

[data-scope='collapsible'][data-part='trigger'] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
