// ============================================================================
// :: Index list
// ============================================================================
/**
 * Component used to display an index list that link to different items on a
 * page. Once these items are clicked the page is scrolled towards the linked
 * component.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-index-list {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-index-list__items {
  padding-left: 0;

  list-style-type: none;
}

.bp-index-list__item {

  &:not(:last-child) {
    margin-bottom: 1rem;
  }
}

.bp-index-list__link {
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;

  font-size: $bp-font-size-2x-small;
  font-weight: $bp-font-weight-bold;
  line-height: $bp-line-height-base;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05rem;

  color: $bp-text-color-dark;

  transition: color 0.2s ease-in-out;

  &::before {
    content: "";

    min-width: 1.4rem;
    height: 0.1rem;
    margin-top: 1.2rem;
    margin-right: 1.2rem;

    background-color: $bp-primary-color;
  }

  &:hover {
    color: $bp-primary-color;
  }
}