// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// List item styles


.ms-ListItem {
  @include ms-font-m;
  @include ms-u-normalize;
  @include ms-u-clearfix;
  padding: 9px 28px 3px;
  position: relative;
  display: block;
}

.ms-ListItem-primaryText, 
.ms-ListItem-secondaryText, 
.ms-ListItem-tertiaryText {
  @include noWrap;
  display: block;
}

.ms-ListItem-primaryText {
  color: $ms-color-neutralDark;
  font-family: $ms-font-family-semilight;
  font-size: $ms-font-size-xl;
  padding-right: 80px; // Prevent overlap with up to three actions.
  position: relative;
  top: -4px;
}

.ms-ListItem-secondaryText {
  color: $ms-color-neutralPrimary;
  font-family: $ms-font-family-regular;
  font-size: $ms-font-size-m;
  line-height: 25px;
  position: relative;
  top: -7px;
  padding-right: 30px;
}

.ms-ListItem-tertiaryText {
  color: $ms-color-neutralSecondaryAlt;
  font-family: $ms-font-family-semilight;
  font-size: $ms-font-size-m;
  position: relative;
  top: -9px;
  margin-bottom: -4px;
  padding-right: 30px;
}

.ms-ListItem-metaText {
  color: $ms-color-neutralPrimary;
  font-family: $ms-font-family-semilight;
  font-size: $ms-font-size-xs;
  position: absolute;
  right: 30px;
  top: 39px;
}

.ms-ListItem-image {
  float: left;
  height: 70px;
  margin-left: -8px; // Images sit closer to the edge than text.
  margin-right: 10px;
  width: 70px;
}

.ms-ListItem-selectionTarget {
  display: none;
}

.ms-ListItem-actions {
  max-width: 80px; // Up to three actions.
  position: absolute;
  right: 30px;
  text-align: right;
  top: 10px;
}

.ms-ListItem-action {
  color: $ms-color-neutralTertiary;
  display: inline-block;
  font-size: 15px;
  position: relative;
  text-align: center;
  top: 3px;
  cursor: pointer;
  height: 16px;
  width: 16px;

  .ms-Icon {
    vertical-align: top;
  }

  &:hover {
    color: $ms-color-neutralSecondary;
    outline: 1px solid transparent;
  }
}


//== State: Unread list item
//
.ms-ListItem.is-unread {
  border-left: 3px solid $ms-color-themePrimary;
  padding-left: 27px; // Reduce padding to allow room for border.

  .ms-ListItem-secondaryText, .ms-ListItem-metaText {
    color: $ms-color-themePrimary;
    font-family: $ms-font-family-semibold;
  }
}


//== State: Unseen list item
//
.ms-ListItem.is-unseen {
  &:after {
    border-right: 10px solid transparent;
    border-top: 10px solid $ms-color-themePrimary;
    left: 0;
    position: absolute;
    top: 0;
  }
}


//== State: Selectable list item
//
.ms-ListItem.is-selectable {
  .ms-ListItem-selectionTarget {
    display: block;
    height: 20px;
    left: 6px;
    position: absolute;
    top: 13px;
    width: 20px;
  }

  .ms-ListItem-image {
    margin-left: 0;
  }

  &:hover {
    background-color: $ms-color-neutralLight;
    cursor: pointer;
    outline: 1px solid transparent;

    // Insert the empty box.
    &:before {
      @include ms-Icon;
      position: absolute;
      top: 12px;
      left: 6px;
      height: 15px;
      width: 15px;
      border: 1px solid $ms-color-neutralSecondaryAlt;
    }
  }
}


//== State: Selected list item
//
.ms-ListItem.is-selected {
  // Insert the checkmark.
  &:before {
    border: 1px solid transparent;
  }

  &:before, 
  &:hover:before {
    @include ms-Icon;
    content: '\e041';
    font-size: $ms-font-size-m-plus;
    color: $ms-color-neutralSecondaryAlt;
    position: absolute;
    top: 12px;
    left: 6px;
  }

  &:hover {
    background-color: $ms-color-themeLight;
    outline: 1px solid transparent;
  }
}


//== Modifier: Document list item
//
.ms-ListItem.ms-ListItem--document {
  padding: 0;

  // The icon for a file or folder in the items list. This may
  // be an .ms-Icon or a specific modifier that loads an image.
  .ms-ListItem-itemIcon {
    width: 70px;
    height: 70px;
    float: left;
    text-align: center;
  }

  // If the item icon is an .ms-Icon, position and color it appropriately.
  .ms-ListItem-itemIcon .ms-Icon {
    font-size: 38px;
    line-height: 70px;
    color: $ms-color-neutralSecondary;
  }

  // Primary text, typically the name.
  .ms-ListItem-primaryText {
    @include noWrap;
    font-size: $ms-font-size-m;
    padding-top: 15px;
    padding-right: 0;
    position: static;
  }

  // Secondary text, typically the modified date or some other metadata.
  .ms-ListItem-secondaryText {
    @include noWrap;
    color: $ms-color-neutralSecondary;
    font-family: $ms-font-family-regular;
    font-size: $ms-font-size-xs;
    padding-top: 6px;
  }
}