@import "ui-variables";

@wedge: (360 / 16);

.badge-variant(@char, @num) {
  .symbols-view-badge-variant-@{char} {
    background-color: spin(@background-color-info, @wedge * @num) !important;
  }
}

// Generate 16 different badge colors.
//
// We need colors that vary from one another, but they need to harmonize with
// the user's chosen UI theme. So we'll just use `spin` to move around the
// color wheel, starting with their UI theme's own badge background color, and
// varying the hue while keeping the saturation and brightness constant.
.badge-variant(e('0'), 0);
.badge-variant(e('1'), 1);
.badge-variant(e('2'), 2);
.badge-variant(e('3'), 3);
.badge-variant(e('4'), 4);
.badge-variant(e('5'), 5);
.badge-variant(e('6'), 6);
.badge-variant(e('7'), 7);
.badge-variant(e('8'), 8);
.badge-variant(e('9'), 9);
.badge-variant(e('a'), 10);
.badge-variant(e('b'), 11);
.badge-variant(e('c'), 12);
.badge-variant(e('d'), 13);
.badge-variant(e('e'), 14);
.badge-variant(e('f'), 15);


// Highlight matched text
.symbols-view .list-group .character-match {
  color: @text-color-highlight;
  font-weight: bold;
}


atom-panel.modal .symbols-view {
  .primary-line {
    display: flex !important;
    flex-direction: row;
    align-items: center;

    &.icon::before {
      margin-left: 0;
    }

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: pre;
      margin-right: auto;
    }

    .badge-container {
      display: block;
      flex-grow: 0;
      display: flex;
      flex-direction: row;

      .badge:not(:last-child) {
        margin-right: 5px;
      }
    }

    .badge-symbol-tag {
      text-transform: capitalize;
    }
  }

  .secondary-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    max-width: 100%;

    .location {
      display: block;
    }

    .context {
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
      flex-grow: 0;
    }
  }

}