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

  .dig-subheader {
    @extend .dig-font-style-body-2;
    line-height: $list-header-line-height;
  }
}

.dig-list-item {
  &.dig-no-proxy
  {
    * {@include ease-out(); }
    position: relative;
    padding: $list-item-padding-vertical $list-item-padding-horizontal;
    flex: 1;
    //transition: background-color 0.15s linear;

    &.dig-list-item-can-click:hover {
      background-color: $list-item-hover-color;
      cursor: pointer;
    }

    &.dig-button {
      font-size: inherit;
      height: inherit;
      text-align: left;
      text-transform: none;
      width: 100%;
      white-space: normal;
    }

    &:focus {
      outline: none
    }
  }

  &.dig-with-secondary {
    position: relative;
  }

  &.dig-clickable:hover {
    cursor: pointer;
  }

  .dig-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

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

.dig-list-item, .dig-list-item .dig-list-item-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 48px;

  // Layout for controls in primary or secondary divs, or auto-infered first child
  & > div.dig-primary > .dig-font-icon,
  & > div.dig-primary > .dig-icon-button,
  & > div.dig-secondary > .dig-font-icon,
  & > div.dig-secondary > .dig-icon-button,
  & > .dig-font-icon:first-child, 
  & > .dig-icon-button:first-child, 
  > .dig-font-icon.dig-secondary,
  > .dig-icon-button.dig-secondary {
    width: $list-item-primary-icon-width;
    margin-top: 12px;
    margin-bottom: 12px;
    box-sizing: content-box;
  }

  & > div.dig-primary > .dig-checkbox,
  & > div.dig-secondary > .dig-checkbox,
  & > .dig-checkbox:first-child,
  .dig-checkbox.dig-secondary {
    align-self: center;
    .dig-label { display: none; }
  }

  & > .dig-font-icon:first-child,
  & > .dig-icon-button:first-child {
    margin-right: $list-item-primary-width - $list-item-primary-icon-width;
  }

  & > .dig-checkbox:first-child {
    width: 3 * $list-baseline-grid;
    margin-left: 3px;
    margin-right: 29px;
  }

  & > .dig-avatar:first-child {
    width: $list-item-primary-avatar-width;
    height: $list-item-primary-avatar-width;
    margin-top: $list-baseline-grid;
    margin-bottom: $list-baseline-grid;
    margin-right: $list-item-primary-width - $list-item-primary-avatar-width;
    border-radius: 50%;
    box-sizing: content-box;
  }

  .dig-checkbox.dig-secondary,
  .dig-toggle.dig-secondary{
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 3 * $list-baseline-grid;
  }

  .dig-font-icon.dig-secondary,
  .dig-icon-button.dig-secondary {
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 3 * $list-baseline-grid;
    height: 3 * $list-baseline-grid;
    padding: 0px;
  }

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

    .dig-ripple,
    .dig-ripple-container {
      border-radius: 50%;
    }
  }

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

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

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


.dig-list-item.dig-2-line,
.dig-list-item.dig-2-line > .dig-no-style,
.dig-list-item.dig-3-line,
.dig-list-item.dig-3-line > .dig-no-style {
  align-items: flex-start;

  .dig-checkbox.dig-secondary,
  .dig-toggle.dig-secondary {
    margin-right: 0;
    margin-top: 16px;
    margin-bottom: 0;
    top: 16px;
    width: 3 * $list-baseline-grid;
  }

  .dig-font-icon.dig-secondary,
  .dig-icon-button.dig-secondary {
      margin-right: 0;
      margin-top: 16px;
      margin-bottom: 0;
      top: 16px;
      padding: 0px;
    }

  .dig-list-item-text {
    flex: 1;
    padding: $list-baseline-grid * 2 0;
    text-overflow: ellipsis;

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

    h3 {
      @extend .dig-font-style-subhead-1;
      margin: $list-h3-margin;
      line-height: $list-header-line-height;
      padding:0px;
    }

    h4 {
      @extend .dig-font-style-body-2;
      font-weight: $list-h4-font-weight;
      margin: $list-h4-margin;
      line-height: $list-header-line-height;
      padding:0px;
    }

    p {
      @extend .dig-font-style-body-2;
      margin: $list-p-margin;
      line-height: $list-p-line-height;
      color: rgba(0,0,0,0.54);
      padding:0px;
    }
  }
}

.dig-list-item.dig-2-line,
.dig-list-item.dig-2-line > .dig-no-style {
  > .dig-avatar:first-child {
    margin-top: $list-baseline-grid * 1.5;
  }
  > .dig-icon-button:first-child,
  > .dig-font-icon:first-child {
    margin-top: $list-baseline-grid * 2;
  }

  .dig-list-item-text {
    flex: 1;
    padding-top: ($list-baseline-grid * 2.5) - 1;
  }
}

.dig-list-item.dig-3-line,
.dig-list-item.dig-3-line > .dig-no-style {
  > .dig-font-icon:first-child, 
  > .dig-icon-button:first-child, 
  > .dig-avatar:first-child {
    margin-top: $list-baseline-grid * 2;
  }
}