/// autoScrollList.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';

// The only selector for vs-repeat lists is this id, we use attributes selector to
// avoid overspecifying
// todo: create new classes and refactor templates markup
// ----------------------------------------------------------------------------
.vs-repeat-repeated-element {
  width: 100%;
}

[id='messagesList'],
[id='contactsList'] {
  border-top: 44px solid transparent;   // padding for the header.subheader,
  border-bottom: 2px solid transparent; //close to a hack
  md-list-item {
    // dirty fix for vs-repeat damages
    position: absolute;
  }

  md-list-item {
    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
                color 0.12s linear;
    &:hover {
      background-color: sg-color($sogoPaper, 300);
      color: sg-color($sogoBlue, 800);
      cursor: pointer;
    }
    &:active {
      color: sg-color($sogoBlue, 800);
    }
    &:focus,
    &.sg-active {
      background-color: sg-color($sogoBlue, 100);
    }
  }
}

.sg {
  &-tile-content {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    justify-content: space-between;
    p {
      margin: $list-p-margin;
      font-size: sg-size(body);
    }
    .msg-date {
      float: right;
      font-size: sg-size(body);
      font-weight: $sg-font-light;
      line-height: $sg-line-height-2;
      margin-left: 1em;
    }
    .#{$md}-subhead-multi,
    .#{$md}-subhead-solo,
    .#{$md}-body-multi {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .#{$md}-subhead-multi {
      @extend .#{$md}-body-1;
      font-size: initial;
    }
    .#{$md}-body-multi {
      @extend .#{$md}-caption;
    }
  }
}
.sg-avatar {
  @extend .md-tile-left-card;
  margin-right: 0;
  margin-left: 0;
}
.sg-list-avatar {
  @extend .md-tile-left-list;
  margin-right: 0;
  margin-left: 0;
}