:root {
  --miso-collapsible-background: #f0f0f0;
  --miso-collapsible-body-max-height: 12rem;
  --miso-collapsible-button-max-width: 20rem;
  --miso-collapsible-border-radius: 0.5rem;
  --miso-collapsible-content-spacing: 0.75rem;
}
.miso-collapsible {
  display: block;
  position: relative;
  border-radius: var(--miso-collapsible-border-radius);
  background: var(--miso-collapsible-background);
  margin: var(--miso-collapsible-content-spacing) calc(var(--miso-collapsible-content-spacing) * -1);

  .miso-collapsible__header {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: var(--miso-collapsible-content-spacing);
    gap: 0.25rem;
  }
  .miso-collapsible__icon {
    svg {
      display: block;
      height: 1rem;
      width: 1rem;
    }
  }
  .miso-collapsible__title {
    font-weight: 500;
    user-select: none;
    margin-right: auto;

    &::after {
      content: '';
      animation: ellipsis 2s infinite;
    }
  }
  .miso-collapsible__toggle {
    svg {
      display: block;
      height: 1.2rem;
      width: 1.2rem;
    }
    .miso-ui-icon-chevron {
      transition: transform 0.1s ease-in-out;
      transform: rotate(90deg);
      fill: #999;
    }
  }
  .miso-collapsible__body {
    position: relative;
    overflow: scroll;
    max-height: var(--miso-collapsible-body-max-height);
    padding: var(--miso-collapsible-content-spacing);
    padding-top: 0;
    display: none;
  }

  [data-role="toggle-expand"],
  [data-role="expand"],
  [data-role="collapse"] {
    cursor: pointer;
  }
  
  &.hidden {
    display: none;
  }
  &.expanded {
    .miso-collapsible__body {
      display: block;
    }
    .miso-collapsible__toggle {
      .miso-ui-icon-chevron {
        transform: rotate(180deg);
      }
    }
  }
  &.done {
    .miso-collapsible__title::after {
      display: none;
    }
  }

  .miso-markdown {
    pre {
      background: #282c34 !important;

      code {
        color: #abb2bf !important;
        text-shadow: none !important;
        font-size: 0.8rem !important;
      }
    }
  }
}

@keyframes ellipsis {
  0% {
    content: '';
  }
  20% {
    content: '.';
  }
  25% {
    content: '..';
  }
  50% {
    content: '...';
  }
}