@import "ui-variables";
@import "ui-mixins";

*:focus, input:focus {
  outline:none;
}

.thread-list, .draft-list {
  order: 3;
  flex: 1;
  position:relative;
  -webkit-font-smoothing: subpixel-antialiased;

  .list-item {
    background-color: darken(@background-primary, 3%);
  }

  .list-column {
    border-bottom: 1px solid fade(@list-border, 60%);
  }

  .message-count {
    color: @text-color-inverse;
    background: @background-tertiary;
    padding: 4px 6px 2px 6px;
    margin-left: 1em;
  }

  .participants {
    font-size:   @font-size-small;
    text-overflow: ellipsis;
    overflow: hidden;
    .unread-true {
      font-weight: @font-weight-semi-bold;
    }
    position: relative;
    top:2px;
  }

  .details {
    display:flex;
    .subject {
      font-size:   @font-size-small;
      font-weight: @font-weight-normal;
      padding-right: @padding-base-horizontal;
      position: relative;
      text-overflow: ellipsis;
      overflow: hidden;
      flex-shrink:0;
      top:2px;
    }
    .snippet {
      font-size:   @font-size-small;
      font-weight: @font-weight-normal;
      color: @text-color-very-subtle;
      position: relative;
      text-overflow: ellipsis;
      overflow: hidden;
      top:2px;
    }
    .thread-icon {
      flex-shrink:0;
      margin-right:@padding-base-horizontal;
      margin-left:@padding-base-horizontal;
    }
  }

  .timestamp {
    font-size:   @font-size-small;
    font-weight: @font-weight-normal;
    color: @text-color-very-subtle;
    position: relative;
    top:2px;
  }

  .unread:not(.focused):not(.selected) {
    background-color: @background-primary;
    &:hover {
      background: darken(@background-primary, 2%);
    }
    .list-column {
      border-bottom: 1px solid @list-border;
    }
  }

  .unread:not(.focused) {
    // Never show any unread styles when the thread is focused.
    // It will be marked as read and the delay from focus=>read
    // is noticeable.
    .subject {
      font-weight: @font-weight-semi-bold;
    }
    .snippet {
      color: @text-color-subtle;
    }
  }

  .focused {
    // subpixel antialiasing looks awful against dark background colors
    -webkit-font-smoothing: antialiased;

    .participants {
      color: @text-color-inverse;
      .unread-true {
        font-weight: @font-weight-normal;
      }
    }
    .subject {
      color: @text-color-inverse;
      font-weight: @font-weight-normal;
    }
    .snippet, .timestamp {
      color: @text-color-inverse-subtle;
    }

    .thread-icon {
      -webkit-filter: brightness(600%);
    }
  }

  .thread-icon {
    display:inline-block;
    width:15px;
    height:15px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    top:3px;
  }
  .thread-icon-attachment {
    background-image:url(../static/images/thread-list/icon-attachment-@2x.png);
  }
  .thread-icon-unread {
    background-image:url(../static/images/thread-list/icon-unread-@2x.png);
  }
  .thread-icon-replied {
    background-image:url(../static/images/thread-list/icon-replied-@2x.png);
  }
  .thread-icon-forwarded {
    background-image:url(../static/images/thread-list/icon-forwarded-@2x.png);
  }

  .star-button {
    font-size: 16px;
    .fa-star {
      color: rgb(239, 209, 0);
      &:hover {
        cursor: pointer;
        color: rgb(220,220,220);
      }
    }
    .fa-star-o {
      color: rgb(220,220,220);
      &:hover {
        cursor: pointer;
        color: rgb(239, 209, 0);
      }
    }
  }
}