@import 'ui-variables';
@import 'ui-mixins';

.link-tracking-icon img.content-mask {
  background-color: #aaa;
  vertical-align: text-bottom;
}
.link-tracking-icon img.content-mask.clicked {
  background-color: #ccc;
}
.link-tracking-icon .link-click-count {
  display: inline-block;
  position: relative;
  left: -16px;
  text-align: center;

  color: #3187e1;
  font-size: 12px;
  font-weight: bold;
}
.link-tracking-icon {
  width: 16px;
  margin-right: 4px;
}

.link-tracking-panel {
  background: #ddf6ff;
  border: 1px solid #acd;
  padding: 5px;
  border-radius: 5px;
}

.link-tracking-panel h4 {
  text-align: center;
  margin-top: 0;
}
.link-tracking-panel table {
  width: 100%;
}
.link-tracking-panel td {
  border-bottom: 1px solid #d5eaf5;
  border-top: 1px solid #d5eaf5;
  padding: 0 10px;
  text-align: left;
}

.link-tracking-message-popover {
  width: 200px;
  max-height: 134px;
  .link-tracking-header {
    padding: @padding-base-vertical @padding-base-horizontal 0 @padding-base-horizontal;
    text-align: center;
    color: @text-color-subtle;
    font-weight: 600;
  }
  .click-history-container {
    max-height: 112px;
    padding: 0 @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
    overflow: auto;
    .click-action {
      color: @text-color-subtle;
      .recipient {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .spacer {
        flex: 1 1 0;
      }
      .timestamp {
        color: @text-color-very-subtle;
        flex-shrink: 0;
      }
    }
  }
}