.root {
  max-width: 20em;
  font-family: sans-serif;
}

.trigger {
  /* because it's a button, we want to stretch it */
  width: 100%;
  /* and remove center text alignment in favour of inheriting */
  text-align: inherit;
  /* ---- */
  appearance: none;
  border: none;
  padding: 10px;
  background-color: var(--color-black);
  color: white;
  font-family: inherit;
  font-size: 1.2em;
  --shadow-color: crimson;

  &:focus {
    outline: none;
    box-shadow: inset 0 -5px 0 0 var(--shadow-color);
    color: var(--color-red);
  }

  &[data-disabled] {
    color: var(--color-gray300);
  }

  &[data-state='open'] {
    background-color: var(--color-red);
    color: var(--color-white);

    &:focus {
      --shadow-color: #111;
      color: var(--color-black);
    }
  }
}

.content {
  padding: 10px;
  line-height: 1.5;
}

@keyframes collapsible-slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsible-slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes collapsible-openRight {
  from {
    width: 0;
  }
  to {
    width: var(--radix-collapsible-content-width);
  }
}

@keyframes collapsible-closeRight {
  from {
    width: var(--radix-collapsible-content-width);
  }
  to {
    width: 0;
  }
}

.animatedContent {
  overflow: hidden;
  &[data-state='open'] {
    animation: collapsible-slideDown 300ms ease-out;
  }
  &[data-state='closed'] {
    animation: collapsible-slideUp 300ms ease-in;
  }
}

.animatedWidthContent {
  overflow: hidden;
  &[data-state='open'] {
    animation: collapsible-openRight 300ms ease-out;
  }
  &[data-state='closed'] {
    animation: collapsible-closeRight 300ms ease-in;
  }
}

.rootAttr,
.triggerAttr,
.contentAttr {
  /* ensure we can see the content (because it has `hidden` attribute) */
  display: block;
  background-color: rgb(0 0 255 / 0.3);
  border: 2px solid blue;
  padding: 10px;

  &[data-state='closed'] {
    border-color: red;
  }
  &[data-state='open'] {
    border-color: green;
  }
  &[data-disabled] {
    border-style: dashed;
  }
  &:disabled {
    opacity: 0.5;
  }
}
