.list {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  &.list--no-style {
    list-style: none;
    padding-left: 0;
  }

  &.list--compact {
    gap: 0;
  }

  &.list--sm {
    gap: 0.5rem;
  }

  &.list--scroll {
    overflow-y: scroll;
  }

  &.list--expandable {
    & > .list__item {
      cursor: pointer;

      .list__item-content {
        display: none;
      }

      .list__item-controls {
        opacity: 0.5;

        &:has(.menu__wrapper[open="true"]) {
          opacity: 1;
        }
      }

      &:hover {
        .list__item-controls {
          opacity: 1;
        }
      }

      &.list__item--expanded {
        min-height: fit-content;

        .toggle-icon {
          transition: 0.4s ease-in-out;
          transform: rotate(180deg);
        }

        .list__item-content {
          display: block;
        }
      }
    }
  }

  &.list--md {
    max-height: var(--container-m);
    height: 100%; /* Move to general .list when reviewed */
  }

  .list__item, .list__card {
    transition: 0.4s ease-in-out;
  }

  .list__sub-list:not(:last-child) {
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 0.5rem;
  }

  .list__card {
    align-items: flex-start;
    background-color: var(--off-white);
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 1rem;

    header.list__card-header {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.5rem;
      width: 100%;

      .list__card-heading {
        display: inline-flex;
        flex: 1;
        flex-direction: column;
      }
    }
  }
}

.list-sm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list#queryable_profile_organisations {
  padding: 0 0.5rem 0 0;
  gap: 0;
  overflow-y: scroll;
  margin-right: -0.5rem;
  max-height: var(--container-xs);

  & > .list__item {
    border-bottom: 1px solid var(--light-gray);
    padding: 0.5rem 0;
  }

  .list__item {

    &.list__item--active > a {
      background-color: var(--theme-tenth-opacity-color);
    }

    > a {
      align-items: center;
      border-radius: var(--border-radius);
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      transition: 0.4s ease-in-out;

      &:hover {
        background-color: var(--theme-tenth-opacity-color);
      }
    }

    span#list__item--active-label {
      font-size: 0.75rem;
      font-weight: 600;
    }
  }

  .list__sub-list {
    gap: 0;

    .list__sub-header {
      padding: 0.5rem;
    }

    .list__item {
      padding-left: 1rem;
    }

    &:has(.list__item:not(.hidden)) {
      display: block; /* Stay visible if at least one item is not hidden */
    }

    &:not(:has(.list__item:not(.hidden))) {
      display: none; /* Hide if all items are hidden */
    }
  }
}

ol.list {
  width: 100%;

  li {
    &::marker {
      font-weight: bold;
    }

    &:not(:last-child) {
      border-bottom: 1px solid var(--light-gray);
      padding-bottom: 0.5rem;
    }
  }
}

.list__item {
  width: 100%;

  .list__item-header {
    display: flex;
    gap: 0.5rem;

    &:has(.list__item-controls) {
      flex-direction: row;
    }

    .heading-wrapper {
      align-items: flex-start;
      width: 100%;

      &:has(h5) {
        .temp-tooltip-wrapper {
          height: 1.5rem;
        }
      }
    }
  }

  .list__item-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .list__item-controls {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: nowrap;
  }
}