@import 'settings';

// List
//
// Lists present multiple line items in a vertical arrangement as a single continuous element.
//
// We intentionally keep our list atom simple, because it is used sparsely in Open Social. Also
// it is good to know this atom replaces the original bootstrap list-group component.
//
// It doesn't matter which HTML tag you use to create a list, it may be a `<ul>` or `<ol>`,
// but it is not required. All that is required is the `.list-item` class on the element.
// When you need to display elements in a row, like an avatar plus
// a user's name, or you want to present a list with labels and values use the examples below.
//
// style guide: atoms.list

// List with avatar
//
// Simple way for showing a list of users.
//
// Markup: list-avatar.twig
//
// style guide: atoms.list.avatar

// List with label
//
// Simple way for showing a list of labels and values.
//
// Markup: list-label.twig
//
// style guide: atoms.list.label



// List item

.list-item {
  display: flex;
  width: 100%;
  padding-top: ($card-spacer-x/2);
  padding-bottom: ($card-spacer-x/2);
  min-width: 0;
}

.list-item__avatar {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-right: 10px;
  border-radius: 50%;
  margin-top: 2px; // vertical alignment

  [dir='rtl'] & {
    margin-right: 0;
    margin-left: 10px;
  }
}

.list-item__avatar--medium {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.list-item--withlabel {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.list-item__label {
  margin-right: 20px;
  font-weight: 500;
  flex-basis: 100%;
  align-self: flex-start;
  @include for-tablet-portrait-up {
    flex-basis: 180px;
  }
}

.list-item__text {
  flex-grow: 1;
  max-width: 100%;
  margin: 0;
  font-size: .875rem;
  line-height: 1.25;

  p {
    margin-bottom: 0;
  }

  .list-item__text--small {
    color: #555;
    font-weight: 400;
    margin-top: 5px;
  }
}

.list-item--visibility {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: -1px;
  justify-content: flex-start;
  cursor: pointer;

  .form-group {
    label {
      font-weight: 500;
    }

    .form-radio {
      z-index: -1;
    }
  }

  &:hover, &:focus-within {
    background-color: $gray-lighter;
    cursor: pointer;
  }

  // The visibility list contains anchor elements to fix keyboard support so we
  // must clear the default anchor list styling from dropdown.scss.
  .dropdown-menu--visibility > & > a {
    padding: 0;

    // :hover, :focus for the required specificity.
    // Removes the outline for links since the background indicates focus.
    &, &:hover, &:focus {
      background-color: inherit;
      box-shadow: none;
      outline: none;
    }
  }

  .icon-small {
    fill: $default-color;
    margin-right: .25em;
  }

}

.list-item--link {

  .list-item__avatar {
    margin-left: ($card-spacer-x/2);
  }

  &:hover,
  &:focus {
    background-color: rgba(0,0,0,0.12);
  }
}


// core module
// this is used in summary of form errors in an alert component

.item-list__comma-list,
.item-list__comma-list li {
  display: inline;
}
.item-list__comma-list {
  margin: 0;
  padding: 0;
}
.item-list__comma-list li:after {
  content: ", ";
}
.item-list__comma-list li:last-child:after {
  content: "";
}
