.accordion {
  @apply relative;
  /**
   * Disable text select such that clicking on
   * trigger doesn't highlight text
   */
  user-select: none;
}

.accordion__trigger {
  @apply flex items-center py-3 px-4;
}

.accordion__trigger-title {
  flex: 1;
}

.accordion__trigger-icon {
  @apply text-grey;

  width: 8px;
  height: 14px;

  flex-shrink: 0;
}

.accordion__trigger-icon svg {
  @apply fill-current;
  transition: transform 150ms ease-in-out;
}

/**
 * The 'is-open' and 'is-closed' classes
 * are provided by react-collapsible
 */
.accordion .is-open svg {
  transform: rotate(270deg);
}

.accordion .is-closed svg {
  transform: rotate(90deg);
}

.accordion__content {
  @apply px-4;
}

.accordion__trigger-sibling {
  @apply mr-4;
  transition: opacity 75ms ease-in-out;
}

.accordion .is-open .accordion__trigger-sibling {
  opacity: 0;
}

.accordion .is-closed .accordion__trigger-sibling {
  opacity: 1;
}