.question {
  @apply bg-white overflow-hidden rounded;
  summary {
    @apply text-xl font-medium flex items-center justify-between px-10 py-6 shadow-sm cursor-pointer hover:bg-primary-700/5 transition duration-400 ease-in-out list-none;
    i, svg {
      @apply h-6 w-6 transform transition duration-[400] ease-in-out;
    }
  }
  .summary {
    @apply border-l-4 border-primary-700 p-8 bg-slate-100/70 text-gray-700;
  }
  &[open] {
    summary {
      i, svg {
        @apply rotate-180;
      }
    }
  }
}

.accordions {
  &.simple-accordions {
    @apply divide-slate-100 divide-y-2;
    .accordion {
      @apply bg-transparent rounded-none;
      .accordion-head {
        @apply border-0 transition-all duration-300 ease-in-out;
        &:focus,
        &:hover {
          @apply bg-white;
        }
      }
      .accordion-content {
        @apply border-0 bg-slate-50;
      }
    }
  }
  &.light-accordions {
    @apply divide-y;
    .accordion {
      @apply bg-transparent rounded-none;
      .accordion-head {
        @apply border-0 justify-start space-x-2;
        .open {
          @apply flex justify-center items-center p-0 w-8 h-8 rounded-full;
        }
        &:focus,
        &:hover {
          @apply bg-transparent;
          .open {
            @apply bg-white;
          }
        }
      }
      .accordion-content {
        @apply border-0 bg-transparent;
      }
    }
  }
  &.rounded-accordions {
    @apply space-y-2;
    .accordion {
      @apply bg-transparent;
      .accordion-head {
        @apply border-0 bg-white rounded-full;
        &:focus,
        &:hover {
          @apply bg-slate-50;
        }
      }
      .accordion-content {
        @apply bg-gray-50 rounded;
      }
    }
  }
}

.accordion {
  @apply bg-white rounded-md overflow-hidden;
  .accordion-head {
    @apply gap-x-1 w-full outline-none border-b cursor-pointer border-gray-300/25 px-6 py-3 flex flex-wrap justify-between items-center;
    .title {
      @apply text-left font-semibold basis-10/12 w-10/12;
    }
    .open, .close {
      @apply basis-1/12  w-1/12 transform px-2 cursor-pointer rounded transition-all duration-500 ease-in-out;
      &.rotate {
        @apply rotate-180;
      }
    }
    .open {
      @apply text-2xl;
    }
  }
  &.focused {
    .accordion-head:focus {
      @apply bg-primary-50/10;
      + .accordion-content {
        @apply opacity-100 h-full py-6 z-10;
      }
      .open {
        @apply transform rotate-180;
      }
    }
  }
  .accordion-content {
    @apply relative bg-gray-100/50 px-6 py-0 opacity-0 border-l-4 border-primary-700 transition-all duration-300 ease-in-out;
    z-index: -1;
    height: 0px;
    &.is-active {
      @apply opacity-100 h-full py-6 z-10;
    }
  }
}