[data-component-id="kackaamin:collapsible_message"] {
  background-color: color-mix(in srgb, var(--color-mist) 30%, transparent);
  padding: 20px;
  border-radius: 20px;

  & details {
    padding-left: 20px;
    border-left: 2px solid var(--color-mist);

    &:not(:open) .collapsible-message__icon svg {
      rotate: -90deg;
    }

    &:open .collapsible-message__icon svg {
      rotate: 0;
    }
  }

  & summary {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
  }

  & .collapsible-message__body {
    padding: 20px 0 16px 0;
  }
}