:host {
  /**
  * @prop --spacing-y: Margin between each collapsible.
  */
  --spacing-y: 1rem;

  /* button */
  /**
  * @prop --font-size-button: Button's text size.
  */
  --font-size-button: 1.25rem;
  /**
  * @prop --font-weight-button: Button's font weight.
  */
  --font-weight-button: 800;
  /**
  * @prop --line-height-button: Button's line height.
  */
  --line-height-button: 125%;
  /**
  * @prop --border-width-button: Button's border width (shown on highlight)
  */
  --border-width-button: 0.125rem;
  /**
  * @prop --radius-button: Radius for heading button.
  */
  --radius-button: 4px;
  /**
  * @prop --spacing-left-button: Left padding for heading button.
  */
  --spacing-left-button: 0.25rem;
  /**
  * @prop --spacing-left-button-text: Left padding for button's text.
  */
  --spacing-left-button-text: 0.5rem;
  /**
  * @prop --color-button-hover: Text color on hover.
  */
  --color-button-hover: hsl(196, 95%, 51%);
  /**
  * @prop --color-button-active: Text color when active.
  */
  --color-button-active: hsl(196, 100%, 51%);
  /**
  * @prop --background-button-hover: Heading background color on hover.
  */
  --background-button-hover: hsl(0, 0%, 94.9%);
  /**
  * @prop --border-color-button-focus: Color of button border when clicked.
  */
  --border-color-button-focus: hsl(215, 100%, 62%);

  /* icon */
  /**
  * @prop --spacing-top-icon: Icon top margin.
  */
  --spacing-top-icon: 0.25rem;

  /* content */
  /**
  * @prop --spacing-right-content: Right padding for collapsible content.
  */
  --spacing-right-content: 3rem;
  /**
  * @prop --spacing-left-content: Left padding for collapsible content.
  */
  --spacing-left-content: 2rem;
  /**
  * @prop --spacing-top-content: Top padding for collapsible content.
  */
  --spacing-top-content: 1rem;
  /**
  * @prop --spacing-bottom-content: Bottom padding for collapsible content.
  */
  --spacing-bottom-content: 1.5rem;
  /**
  * @prop --transition-time: Time it takes to fully open the collapsible content.
  */
  --transition-time: 0.5s;
}

.collapsible {
  position: relative;
  margin: var(--spacing-y) 0;
}

.collapsible--expanded:before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border: var(--scl-spacing-1) solid transparent;
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
  bottom: calc(-1 * var(--spacing-y));
}

.collapsible__heading {
  margin: 0;
}

.collapsible__button {
  color: currentColor;
  width: 100%;
  display: flex;
  text-align: left;
  align-items: flex-start;
  padding-top: 0;
  border-color: transparent;
  border-style: solid;
  padding-right: 0;
  padding-bottom: 0;
  background-color: transparent;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  border-width: var(--border-width-button);
  border-radius: var(--radius-button);
  padding-left: var(--spacing-left-button);
  /* a11y: allows some "external" typographic styles to leak in
   https://www.w3.org/TR/WCAG21/#text-spacing */
  font-family: inherit;
  word-spacing: inherit;
  letter-spacing: inherit;
}

.collapsible__button-text {
  margin-left: var(--spacing-left-button-text);
}

.collapsible__button:hover {
  cursor: pointer;
  color: var(--color-button-hover);
  background-color: var(--background-button-hover);
}

.collapsible__button:active {
  color: var(--color-button-active);
}

.collapsible__button:focus {
  outline: none;
  border-color: var(--border-color-button-focus);
}

.collapsible__icon {
  transform: rotate(0.75turn);
  flex-shrink: 0;
  margin-top: var(--spacing-top-icon);
}

.collapsible__button[aria-expanded='true'] .collapsible__icon {
  transform: rotate(1turn);
}

.collapsible__content{
  transition: height var(--transition-time) ease-in-out;
  overflow: hidden;
  padding-right: var(--spacing-right-content);
  padding-left: var(--spacing-left-content);
}

 .collapsible__content > div {
  /* These should collapse with tags like p, that's what we want */
  margin-top: var(--spacing-top-content);
  margin-bottom: calc(var(--spacing-bottom-content) - var(--spacing-y));
}