$list-h3-margin: 0 0 0px 0 !default;
$list-h4-margin: 3px 0 1px 0 !default;
$list-h4-font-weight: 400 !default;
$list-header-line-height: 1.2em !default;
$list-p-margin: 0 0 0 0 !default;
$list-p-line-height: 1.6em !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-padding-vertical: 0px !default;
$list-item-padding-horizontal: $baseline-grid * 2 !default;
$list-item-primary-width: $baseline-grid * 7 !default;
$list-item-primary-avatar-width: $baseline-grid * 5 !default;
$list-item-primary-icon-width: $baseline-grid * 3 !default;
$list-item-secondary-left-margin: $baseline-grid * 2 !default;
$list-item-secondary-button-width: $baseline-grid * 6 !default;
$list-item-inset-divider-offset: 12 * $baseline-grid !default;
$list-item-height: 6 * $baseline-grid !default;
$list-item-two-line-height: 9 * $baseline-grid !default;
$list-item-three-line-height: 11 * $baseline-grid !default;

md-list {
  display: block;
  padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;

  .md-subheader {
    font-size: $body-font-size-base;
    font-weight: 500;
    letter-spacing: 0.010em;
    line-height: $list-header-line-height;
  }
}

md-list-item {
  // Ensure nested dividers are properly positioned
  position: relative;

  &.md-proxy-focus.md-focused .md-no-style {
    transition: background-color 0.15s linear;
  }
  &.md-no-proxy,
  .md-no-style {
    position: relative;
    padding: $list-item-padding-vertical $list-item-padding-horizontal;
    flex: 1 1 auto;
    
    &.md-button {
      font-size: inherit;
      height: inherit;
      text-align: left;
      text-transform: none;
      width: 100%;
      white-space: normal;
      flex-direction: inherit;
      align-items: inherit;
      border-radius: 0;

      & > .md-ripple-container {
        border-radius: 0;
      }
    }
    &:focus {
      outline: none
    }
  }
  &.md-with-secondary {
    position: relative;
  }
  &.md-clickable:hover {
    cursor: pointer;
  }

  md-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &[md-inset] {
      left: $list-item-inset-divider-offset;
      width: calc(100% - #{$list-item-inset-divider-offset});
      margin: 0;
    }
  }
}

md-list-item, md-list-item .md-list-item-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: $list-item-height;
  height:auto;

  // Layout for controls in primary or secondary divs, or auto-infered first child
  & > div.md-primary > md-icon:not(.md-avatar-icon),
  & > div.md-secondary > md-icon:not(.md-avatar-icon),
  & > md-icon:first-child:not(.md-avatar-icon),
  > md-icon.md-secondary:not(.md-avatar-icon) {
    width: $list-item-primary-icon-width;
    margin-top: 16px;
    margin-bottom: 12px;
    box-sizing: content-box;
  }
  & > div.md-primary > md-checkbox,
  & > div.md-secondary > md-checkbox,
  & > md-checkbox,
  md-checkbox.md-secondary {
    align-self: center;
    .md-label { display: none; }
  }

  & > md-icon:first-child:not(.md-avatar-icon) {
    margin-right: $list-item-primary-width - $list-item-primary-icon-width;
  }
  & > md-checkbox {
    width: 3 * $baseline-grid;
    margin-left: 3px;
    margin-right: 29px;
    margin-top: 16px;
  }
  & .md-avatar, .md-avatar-icon {
    margin-top: $baseline-grid;
    margin-bottom: $baseline-grid;
    margin-right: $list-item-primary-width - $list-item-primary-avatar-width;
    border-radius: 50%;
    box-sizing: content-box;
  }
  & .md-avatar {
    width: $list-item-primary-avatar-width;
    height: $list-item-primary-avatar-width;
  }
  & .md-avatar-icon {
    padding: 8px;
  }

  md-checkbox.md-secondary,
  md-switch.md-secondary {
    margin-top: 0;
    margin-bottom: 0;
  }

  md-checkbox.md-secondary {
    margin-right: 0;
  }

  md-switch.md-secondary {
    margin-right: -6px;
  }

  button.md-button.md-secondary-container {
    background-color: transparent;
    align-self: center;
    border-radius: 50%;
    margin: 0px;
    min-width: 0px;
    .md-ripple,
    .md-ripple-container {
      border-radius: 50%;
    }

    &.md-icon-button {
      // Make icon buttons align with checkboxes and other controls
      margin-right: -12px;
    }
  }

  .md-secondary-container,
  .md-secondary {
    position: absolute;
    top: 50%;
    right: $list-item-padding-horizontal;
    margin: 0 0 0 $list-item-secondary-left-margin;
    transform: translate3d(0, -50%, 0);
  }

  & > .md-button.md-secondary-container > .md-secondary {
    margin-left: 0;
    position: static;
  }

  & > p, & > .md-list-item-inner > p {
    flex: 1;
    margin: 0;
  }
}


md-list-item.md-2-line,
md-list-item.md-2-line > .md-no-style,
md-list-item.md-3-line,
md-list-item.md-3-line > .md-no-style {
  align-items: flex-start;
  justify-content: center;

  .md-list-item-text {
    flex: 1;
    margin: auto;
    text-overflow: ellipsis;

    &.md-offset {
      margin-left: $list-item-primary-width;
    }

    h3 {
      font-size: $subhead-font-size-base;
      font-weight: 400;
      letter-spacing: 0.010em;
      margin: $list-h3-margin;
      line-height: $list-header-line-height;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h4 {
      font-size: $body-font-size-base;
      letter-spacing: 0.010em;
      margin: $list-h4-margin;
      font-weight: $list-h4-font-weight;
      line-height: $list-header-line-height;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      font-size: $body-font-size-base;
      font-weight: 500;
      letter-spacing: 0.010em;
      margin: $list-p-margin;
      line-height: $list-p-line-height;
    }
  }
}

md-list-item.md-2-line,
md-list-item.md-2-line > .md-no-style {
  height:auto;
  min-height: $list-item-two-line-height;
  &.md-long-text {
      margin:1.6em;
    }

  > .md-avatar, .md-avatar-icon {
    margin-top: $baseline-grid * 1.5;
  }
  > md-icon:first-child {
    align-self: flex-start;
  }
  .md-list-item-text {
    flex: 1;
  }
}

md-list-item.md-3-line,
md-list-item.md-3-line > .md-no-style {
  height:auto;
  min-height: $list-item-three-line-height;

  &.md-long-text {
    margin:1.6em;
  }

  > md-icon:first-child,
  > .md-avatar {
    margin-top: $baseline-grid * 2;
  }
}