$dense-baseline-grid: $baseline-grid / 2 !default;

$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: 9 * $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;

$list-item-dense-height: 12 * $dense-baseline-grid !default;
$list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
$list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
$list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;
$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
$list-item-dense-line-height: 1.05 !default;

// This is a mixin, which fixes IE11's vertical alignment issue, when using `min-height`.
// This mixin isn't that much generic to be used in other cases.
// It can be only used for the list-item's button container.
// See https://connect.microsoft.com/IE/feedback/details/816293/
@mixin ie11-min-height-flexbug($min-height) {
  div.md-button:first-child {
    &::before {
      content: '';
      min-height: $min-height;
      visibility: hidden;
    }
  }
}

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-dense {
    md-list-item {
      &,
      ._md-list-item-inner {
        min-height: $list-item-dense-height;

        // Layout for controls in primary or secondary divs, or auto-infered first child

        md-icon:first-child {
          width: $list-item-dense-primary-icon-width;
          height: $list-item-dense-primary-icon-width;
        }

        > md-icon:first-child:not(.md-avatar-icon) {
          @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width);
        }
        .md-avatar, .md-avatar-icon {
          @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width);
        }
        .md-avatar {
          flex: none;
          width: $list-item-dense-primary-avatar-width;
          height: $list-item-dense-primary-avatar-width;
        }
      }

      &.md-2-line,
      &.md-3-line {
        &, & > ._md-no-style {
          .md-list-item-text {
            &.md-offset {
              @include rtl-prop(margin-left, margin-right, $list-item-primary-width);
            }

            h3,
            h4,
            p {
              line-height: $list-item-dense-line-height;
              font-size: $list-item-dense-font-size;
            }

            h3 {
              font-size: $list-item-dense-header-font-size;
            }
          }
        }
      }

      &.md-2-line {
        &, & > ._md-no-style {
          min-height: $list-item-dense-two-line-height;

          @include ie11-min-height-flexbug($list-item-dense-two-line-height);

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

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

          @include ie11-min-height-flexbug($list-item-dense-three-line-height);

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

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-button-wrap {
    position: relative;

    > div.md-button:first-child {
      // Vertically align the item content.
      display: flex;
      align-items: center;
      justify-content: flex-start;

      padding: 0 16px;
      margin: 0;

      // The button should not inherit the parents background color.
      background-color: initial;

      font-weight: 400;
      @include rtl(text-align, left, right);
      border: medium none;

      // The button executor should fill the whole list item.
      > .md-button:first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;

        margin: 0;
        padding: 0;
      }

      ._md-list-item-inner {
        // The list item content should fill the complete width.
        width: 100%;
        height: 100%;
      }

    }

  }

  &._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;
      @include rtl(text-align, left, right);
      text-transform: none;
      width: 100%;
      white-space: normal;
      flex-direction: inherit;
      align-items: inherit;
      border-radius: 0;
      margin: 0;

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

  md-divider {
    position: absolute;
    bottom: 0;
    @include rtl-prop(left, right, 0);
    width: 100%;
    &[md-inset] {
      @include rtl-prop(left, right, $list-item-inset-divider-offset);
      width: calc(100% - #{$list-item-inset-divider-offset});
      margin: 0 !important;
    }
  }

  &,
  ._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) {
      @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width);
    }

    & .md-avatar, .md-avatar-icon {
      margin-top: $baseline-grid;
      margin-bottom: $baseline-grid;
      @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width);
      border-radius: 50%;
      box-sizing: content-box;
    }
    & .md-avatar {
      flex: none;
      width: $list-item-primary-avatar-width;
      height: $list-item-primary-avatar-width;
    }
    & .md-avatar-icon {
      padding: 8px;

      // Set the width/height to the same as the icon to fix issue on iOS Safari where the
      // height: 100% was causing it to be larger than it's parent
      svg {
        width: $icon-size;
        height: $icon-size;
      }
    }

    & > md-checkbox {
      width: 3 * $baseline-grid;
      @include rtl(margin-left, 3px, 29px);
      @include rtl(margin-right, 29px, 3px);
      margin-top: 16px;
    }

    ._md-secondary-container {
      display: flex;
      align-items: center;

      height: 100%;
      margin: auto;

      .md-button, .md-icon-button {
        &:last-of-type {
          // Reset 6px margin for the button.
          @include rtl-prop(margin-right, margin-left, 0px);
        }
      }

      md-checkbox {
        margin-top: 0;
        margin-bottom: 0;

        &:last-child {
          width: 3 * $baseline-grid;
          @include rtl-prop(margin-right, margin-left, 0);
        }
      }

      md-switch {
        margin-top: 0;
        margin-bottom: 0;

        @include rtl-prop(margin-right, margin-left, -6px);
      }
    }

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

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

      &.md-long-text {
        margin-top: $baseline-grid;
        margin-bottom: $baseline-grid;
      }

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

        &.md-offset {
        @include rtl-prop(margin-left, margin-right, $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-2-line {
    &, & > ._md-no-style {
      height: auto;
      min-height: $list-item-two-line-height;

      @include ie11-min-height-flexbug($list-item-two-line-height);

      > .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 1 auto;
      }
    }
  }

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

      @include ie11-min-height-flexbug($list-item-three-line-height);

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