@use 'spacing' as *;
@use 'semanticColors' as *;
@use 'css-util' as *;

.group {
  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.header {
  width: 100%;

  cursor: pointer;
  @include no-selection;

  &:hover {
    background-color: $button-white-hover-color;
  }

  &:active {
    background-color: $button-white-push-color;
  }
}

.disabled {
  color: grey;

  .title {
    cursor: unset;

    &::before {
      content: '';
    }
  }
}

.title {
  display: inline-block;
}

.content {
  // TODO: Add transition
  height: 0;
}

.expanded {
  .content {
    flex-grow: 1;

    height: 100%;
  }
}
