@import "../variables";
@import "../mixins";


.mdl-list {
  display: block;
  padding: 8px 0 ;
  list-style: none;
}

.mdl-list__item {
  @include typo-body-1();
  display: flex;
  box-sizing: border-box;
  height: 48px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding : 16px 16px 20px 16px;
  cursor: default;
  & .mdl-list__item-primary-content {
    order:0;
    flex-grow: 2;
    text-decoration: none;

    & .material-icons {
      font-size: 40px;
      line-height: 0;
      vertical-align: middle;
      padding: 0 12px 0 0;
    }
  }

  & .mdl-list__item-secondary-content {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    & .mdl-list__item-secondary-action label { display: inline; }
    & .mdl-list__item-secondary-info {
      @include typo-caption();
      margin-bottom: 10px;
      color: $list-supporting-text-text-color;
    }
    & .mdl-list__item-sub-header {
      padding: 0 0 0 16px;
    }
  }
}

.mdl-list__item-avatar {
  height: 56px;
}

.mdl-list__item-two-line {
  height: 72px;

  & .mdl-list__item-primary-content {
    & .material-icons {
      vertical-align: text-bottom;
    }

    & .mdl-list__item-sub-title, {
      @include typo-caption();
      display: block;
      padding : 0 0 0 56px;
    }
  }
}

.mdl-list__item-three-line {
  height: 88px;

  & .mdl-list__item-primary-content {
    & .material-icons {
      vertical-align: text-bottom;
    }
  }

  & .mdl-list__item-text-body {
    @include typo-caption();
    color: $list-supporting-text-text-color;
    display: block;
    height: 24px;
    padding: 0 0 0 56px;
    overflow: hidden;
  }
}
