/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
// List variables
// ----------------------------------------------------------------------------
//$list-h3-font-size: 1.1em !default;
//$list-h3-margin: 0 0 3px 0 !default;
//$list-h3-font-weight: 400 !default;
//$list-h4-font-size: 0.9em !default;
//$list-h4-font-weight: 400 !default;
//$list-h4-margin: 0 0 3px 0 !default;
//$list-p-font-size: 0.75em !default;
//$list-p-margin: 0 0 3px 0 !default;
//
//$list-padding-top: $baseline-grid !default;
//$list-padding-right: 0px !default;
//$list-padding-left: 0px !default;
//$list-padding-bottom: $baseline-grid !default;
//
//$item-padding-top: 0px !default;
//$item-padding-right: 0px !default;
//$item-padding-left: 0px !default;
//$item-padding-bottom: 0px !default;

// List item label
md-list {
  .sg-item-name {
    font-size: sg-size(button);
    max-width: 75%; // leave some place for a secondary button
    text-transform: initial;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

 .sg-inline-list-icon-label {
  text-transform: uppercase;
  }
}

// Add some padding to the first icon in a list item
.md-list-item-inner {
  > i:first-child {
    padding-right: $mg;
  }
}

// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {
  padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------

.md-tile-left,
.md-tile-right {
  border-radius: 100%;
  padding: $layout-gutter-width;
  width: $sg-md-grid-pitch + $baseline-grid;
  height: $sg-md-grid-pitch + $baseline-grid;
  background-clip: content-box;
  margin-left: -$layout-gutter-width;
}
.md-tile-right {
  margin-right: -$layout-gutter-width;
}
// Overqualifying to override a rule in source
div.md-tile-left {
  min-width: $sg-md-grid-pitch + $baseline-grid;
}
.sg-tile-icons {
  font-size: $sg-font-size-1;
  color: $colorGray;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: (2 * $mg);
  height:(7 * $line);

}
// Avatar placeholder
// ------------------------------------
.md-tile-left:before {
  font-family: 'Material Design Iconic Font';
  font-size: 40px;
  color: rgba(0, 0, 0, 0.26);
}
.md-tile-left-card:before {
  @extend .md-tile-left;
  content: "\f251";
}
.md-tile-left-list:before {
  @extend .md-tile-left;
  content: "\f2d4";
}