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

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

.sheet-toolbar .thread-selection-bar {
  // This item sits in the toolbar and takes up all the remaining
  // space from the toolbar-spacer divs, but flex-shrink means that
  // it shrinks before any other element when not enough space is available.

  // This is important because the spacers will prevent items from being clickable,
  // (webkit-app-region:drag) even if we're covering them up. We need to make them
  // 0px wide!

  width: 100%;
  flex-shrink:100;
  height:49px;
  z-index: 10000;
  -webkit-app-region: drag;

  .absolute {
    position: absolute;
    left: -1px;
    right:-1px;
    top: 0;
    height:49px;
    border-left:1px solid @border-color-divider;
    border-right:1px solid @border-color-divider;
    background-color: @gray-lighter;
    opacity:0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    .inner {
      top: -100%;
      position: absolute;
      width: 100%;
      display:flex;
      transition: top 0.2s ease-in-out;
      -webkit-app-region: no-drag;

      .centered {
        flex: 1;
        cursor:default;
        text-align: center;
        color:@text-color-subtle;
        padding-top: 15px;
      }
    }
  }

  // .absolute is positioned full-width over all the other items in the toolbar.
  // when .enabled, it transitions to opacity:1, hiding other items beneath it.

  // .inner contains the actual buttons and animates *down* while the opacity animation
  // is running. This means the items beneath fade out as the new ones slide in.

  &.enabled {
    .absolute {
      opacity: 1;
      pointer-events: initial;
      .inner {
        top:0;
        .centered {
          -webkit-app-region: drag;
        }
      }
    }
  }
}

.thread-list {
  order: 3;
  flex: 1;
  -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);
      }
    }
  }
}