sparkletown/sparkle

@import "scss/constants";

$transition: 0.5s cubic-bezier(0, 1.25, 1, 1);

.AdminSidebarAccordion {
  &__title {
    display: flex;
    justify-content: space-between;
    padding: $spacing--md;
    margin: 0;
    background-color: $secondary--dark;
    border-bottom: 1px solid opaque-white(0.1);
    cursor: pointer;

    &:hover {
      background-color: var(--content--under-lighter-15pp);
    }
  }

  &__contents-wrapper {
    overflow: hidden;
  }

  &__contents {
    margin: 0;
    padding: 0;
    transition: opacity #{$transition}, height #{$transition},
      transform #{$transition};
    opacity: 1;
  }

  &--closed &__contents {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transform: translateY(-100%);
  }
}