//
// List groups
// --------------------------------------------------

/// List group nav

.list-group.list-group-tabs {
  border: 1px solid var(--border-inverse);
  border-radius: clamp(4px, var(--border-radius-md), 12px);
  overflow: hidden;

  .list-group-item {
    border: 0;
    border-radius: 0;
    padding: 0;
    vertical-align: middle;

    &:first-child > a {
      border-top-left-radius: clamp(4px, var(--border-radius-md), 12px);
      border-top-right-radius: clamp(4px, var(--border-radius-md), 12px);
    }

    &:last-child > a {
      border-bottom-left-radius: clamp(4px, var(--border-radius-md), 12px);
      border-bottom-right-radius: clamp(4px, var(--border-radius-md), 12px);
    }

    &.active {
      background-color: var(--layer-selected-inverse);

      .list-group-item-text, .list-group-item-heading { color: var(--text-inverse); }
    }

    > a, > label, .list-group-item-text {
      padding: 10px 15px;
      .outline();
    }
  }
}

.nav-justified {
  .list-group-item.btn {
    border: 1px solid transparent;
    .outline();

    &:first-child {
      border-top-left-radius: clamp(4px, var(--border-radius-md), 12px);
      border-bottom-left-radius: clamp(4px, var(--border-radius-md), 12px);
    }

    &:last-child {
      border-top-right-radius: clamp(4px, var(--border-radius-md), 12px);
      border-bottom-right-radius: clamp(4px, var(--border-radius-md), 12px);
    }
  }
}

.list-group-item {
  transition: var(--transition-all-productive);
  outline: 2px solid transparent;
  padding: 16px;

  > a, > label, .list-group-item-heading {
    position: relative;
    z-index: 1;
    display: block;
    cursor: pointer;
    margin-bottom: unset;
    color: @list-group-link-color;

    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      margin: 0;
      padding: 0;
      border: none;
      cursor: pointer;
    }
  }

  &:hover {
    background-color: @list-group-hover-bg;

    > a, > label, .list-group-item-heading {
      color: @list-group-link-hover-color;
    }
  }

  &.active {
    .list-group-item-heading, i { color: var(--text-primary); }
  }
}

// Linked list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
// Includes an extra `.active` modifier class for showing selected items.

a.list-group-item {
  // Hover state
  &:hover,
  &:focus {
    z-index: 2;
  }
}

label.list-group-item {
  color: @list-group-link-color;

  .list-group-item-heading {
    color: @list-group-link-heading-color;
  }

  // Hover state
  &:hover,
  &:focus {
    text-decoration: none;
    color: @list-group-link-hover-color;
    background-color: @list-group-hover-bg;
  }
}

.list {
  counter-reset: item;
  list-style-type: none;
  padding-inline-start: 35px;

  > li {
    @list-padding: 10px;
    counter-increment: item;
    position: relative;
    padding: @list-padding 0px;

    &:not(:first-child) {
      border-top: 1px solid var(--border-subtle);
    }

    .list__item__marker {
      --list-marker-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      border-radius: 50%;
      left: -30px;
      width: var(--list-marker-size);
      height: var(--list-marker-size);
      text-align: center;
      line-height: var(--list-marker-size);
      font-size: calc(var(--list-marker-size) - 6px);
      transition: var(--transition-all-productive);
      top: 11px;
      vertical-align: middle;

      &.list__item__marker--neutral {
        background: var(--layer);
        color: var(--icon-secondary);
      }

      &.list__item__marker--brand {
        background: var(--primary-20);
        color: var(--primary-50);
      }
    }

    &:hover .list__item__marker {
      transform: scale(1.2);
    }
  }
}

.list--none {
  padding-inline-start: 0;
}

.list--unordered.list--bullets {
  list-style-type: none;
  padding-inline-start: 18px;

  .list__item {
    padding: var(--spacing-01) 0;
    border: none;
  }

  .list__item:before {
    position: absolute;
    content: "–";
    inset-inline-start: calc(-1 * 1em);
  }
}

.list--unordered.list--nested {
  .list__item:before {
    content: "▪";
    inset-inline-start: calc(-1*0.75em);
  }  
}

