.ads-Accordion {
  @apply w-full;
}

.ads-Accordion-header {
  @apply block
    w-full;
}

.ads-Accordion-button {
  @apply border-l-4
    border-transparent
    duration-200
    flex
    items-center
    justify-between
    outline-none
    pl-7
    pr-3
    h-cell
    relative
    text-left
    transition
    w-full
    text-gray-700;
}

.ads-Accordion--isOpen .ads-Accordion-button,
.ads-Accordion-button--isActive {
  @apply text-gray-800;
}

.ads-Accordion-button--isActive::before {
  @apply absolute
    bg-brandGreen-400
    block
    h-2
    rounded-full
    w-2;

  content: "";
  left: theme("margin.2");
}

.ads-Accordion-icon {
  @apply mr-2;
}

.ads-Accordion-chevronIcon {
  @apply duration-300
    ml-3
    transition
    text-iconSm
    text-gray-500
    opacity-0;
}

.ads-Accordion-content {
  @apply bg-gray-100
    border-l-4
    duration-200
    border-transparent
    overflow-hidden
    transition
    text-bodySm;
}

.ads-Accordion-button:focus {
  @apply outline-none
    bg-gray-200
    shadow-focusInside;
}

.ads-Accordion-button:hover,
.ads-Accordion--isOpen .ads-Accordion-button:hover {
  @apply bg-gray-300;
}

.ads-Accordion--isOpen .ads-Accordion-button {
  @apply bg-gray-200
    border-gray-500;
}

.ads-Accordion--isOpen .ads-Accordion-chevronIcon {
  transform: scale(-1, -1);
}

.ads-Accordion-button:hover .ads-Accordion-chevronIcon,
.ads-Accordion-button:focus .ads-Accordion-chevronIcon {
  @apply opacity-100;
}

.ads-Accordion--isOpen .ads-Accordion-content {
  @apply border-gray-500;
}

.ads-Accordion-children {
  @apply overflow-y-auto;
}

.ads-Accordion-children--padded {
  @apply py-4
    pl-7
    pr-8;
}