@import (reference) '../../essence-core/src/less/mixins.less';

.e-list-navigation {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: @e-unit 0;
  margin: 0;

  > li {
    position: relative;
    display: table;
    box-sizing: border-box;
    width: 100%;
    height: @e-unit * 6;
    padding: 0;

    > a {
      display: table-cell;
      height: 100%;
      color: inherit;


      > .e-avatar {
        width: @e-unit*5;
        height: @e-unit*5;
        margin: @e-unit*0.5 0;
        padding: 0 @e-unit*2;
        border-radius: 50%;
      }

      > i {
        padding: @e-unit*1.5 @e-unit*2;
        font-size: 2.4rem;
      }

      > .content {
        padding: 0 @e-unit*2;
        line-height: @e-unit*6;
      }

      > .e-right, .e-switch .e-right {
        position: absolute;
        right: 0;
      }
    }
  }

  .e-switch {
    line-height: @e-unit*2.25;

    .e-left {
      margin-left: @e-unit*1.375;
    }

    .e-left.e-switches{
      margin: @e-unit*1.75 0 0 0;
      width: @e-unit*7;
    }

    .e-right {
      margin-right: @e-unit*0.75;
    }

    .e-right.e-switches{
      margin: @e-unit*1.75 @e-unit*1.75 0 0;
      width: @e-unit*7;
    }
  }
}

.e-twolinelist {
   &:extend(.e-list-navigation all);

  > li {
    height: @e-unit*9;

    > a {

      > .e-avatar {
        margin: @e-unit*2 0;
      }

      > i {
        padding: @e-unit*3 @e-unit*2;
      }

      > .content {
        line-height: @e-unit*9;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 50%;

        > .primary {
          float: left;
          width: 90%;
          height: @e-unit*4.5;
          line-height: @e-unit*6.5;
          font-size: 1.6rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        > .secondary {
          float: left;
          width: 90%;
          height: @e-unit*4.5;
          line-height: @e-unit*2.5;
          font-size: 1.4rem;
          color: @e-color-grey-600;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.e-threelinelist {
  &:extend(.e-twolinelist all);

    > li {
    height: @e-unit*11;

    > a {

      > .e-avatar {
        margin: @e-unit*3 0;
      }

      > i {
       padding: @e-unit*4 @e-unit*2;
      }

      > .content {

        > .primary {
            height: @e-unit*5;
            line-height: @e-unit*6.5;
        }

        > .secondary {
            height: @e-unit*3;
            line-height: @e-unit*2.25;
        }

        > .tertiary {

          float: left;
          width: 90%;
          height: @e-unit*3;
          line-height: @e-unit*1.5;
          font-size: 1.4rem;
          color: @e-color-grey-600;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.e-list-inline {
  margin: 0;
  padding: 0;
  display: inline-block;

  > li {
    vertical-align: top;
    display: inline-block;
    padding: 0 @e-unit*0.75;
  }
}