.results-actions-bar {
  .clearfix();
  line-height: 40px;
  height: 40px;
}

header.results-label h3 {
  float: left;
  margin: 10px 0;
}

.results {
  margin-bottom: 55px;
  .clearfix();

  &.transactions {
    margin-top: 45px;
  }

  .search-filters-header {
      clear: both;
      padding: 0 10px;
  }

  .logs-filters-header {
      margin-bottom: 10px;
  }

  nav > ul > li {
    &.filter {
      .sl-md;
      display: block;
      float: left;
      margin-right: 9px;
      margin-bottom: 9px;
      color: @gray4;
    }

    &.filter:first-of-type {
      a {
        padding-left: 0;
      }

      &:before {
        content: ' ';
      }
    }

    &.filter:before {
      content: '/';
    }

    &.filter > a {
      .sl;
      text-decoration: none;
      display: inline-block;

      &:hover {
        color: @black;
      }

      &:active {
        color: @black;
      }

      &.dropdown-toggle {
        padding: 4px 2px 0;
        display: inline-block;
        margin: 0;
      }
    }

    > a {
      padding: 0 5px;
      white-space: pre;
      border-bottom: @searchBorderWidth solid transparent;

      &:hover {
        border-bottom: @searchBorder;
        color: @black;
      }
    }
    &.selected {
      > a {
        border-bottom: @searchBorder;
        color: @black;

        &:hover {
          cursor: default;
        }
      }
    }
    &.disabled {
      color: @gray6;
      border-bottom-color: transparent;
      .selector {
        display: none;
      }
    }
    &.disabled.selected {
      > a {
        border-bottom: @searchBorder;
      }
    }
    &.download {
      float: right;
      margin: 0;

      a {
        padding-left: 0;
      }

      &:hover {
        border-bottom: 0;
      }
    }
  }

  td.unlinked-status {
    i.icon-unlinked {
      color: @imperialRed60;
      vertical-align: -8px;

      &:hover {
        color: @imperialRed100;
      }
    }
  }

  table.non-interactive {
    td.customer-group {
      vertical-align: top;

      & > a > span > .primary {
        &:extend(a);

        &:hover {
          &:extend(a:hover);
        }
      }
    }

    td.grouped-transactions-container {
      padding-left: 0;
      padding-right: 0;

      table.grouped-transactions {
        border-bottom: 1px solid @gray2;

        &:last-of-type {
          border-bottom: none;
        }

        tr {
          border-bottom: none;

          &:hover {
            background-color: @persianBlue10;
          }

          &.current:hover {
            background-color: transparent;
          }

          &:last-of-type {
            td.status > a > span:after {
              content: none;
            }
          }
        }
        td {
          a.active {
            pointer-events: none;
            cursor: default;

            span {
              color: @gray4;
            }
          }

          &.status {
            text-transform: none;
            padding-left: 10px;

            &:first-of-type {
              padding-left: 25px;
            }

            a > span > .secondary {
              margin-left: 14px;
            }

            &.orders .order {
              &:before {
                font-family: 'Balanced-Icon';
                background-color: transparent;
                &:extend(.icon-orders:before);
                font-size: 10px;
                color: @gray4;
                margin-top: -14px;
              }
              > .primary {
                margin-left: 14px;
              }
            }

            &.dispute > a > span {
              &:before {
                font-family: 'Balanced-Icon';
                background-color: transparent;
                &:extend(.icon-disputes:before);
                font-size: 12px;
                color: @curryYellow80;
                margin-top: -12px;
              }

              &.new:before {
                color: @curryYellow80;
              }

              &.under_review:before {
                color: @byzantiumPurple80;
              }

              &.won:before {
                color: @pineGreen80;
              }

              &.lost:before {
                color: @imperialRed80;
              }

              > .primary {
                margin-left: 14px;
              }
            }

            a > span:after {
              position: absolute;
              content: '';
              border-left: 2px solid @gray3;
              height: 30px;
              margin-top: -19px;
              margin-left: 3px;
            }
          }
        }
      }
    }
  }

  td.status {
    a > span:before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius:100%;
      margin-right: 6px;
    }

    &.two-lines {
      a > span:before {
          float: left;
          margin-top: 7px;
      }

      a > span.failed:before {
          float: left;
          margin-top: 14px;
      }
    }

    .succeeded, .captured, .created, .won, .paid, .updated, .deposited, .verified, .active, .good {
      &:before {
        background-color: @pineGreen80;
      }
    }

    .needs_attention, .pending, .scheduled, .unverified, .unverifiable {
      &:before {
        background-color: @curryYellow80;
      }
    }

    .failed, .expired, .lost, .arbitration, .canceled, .voided, .invalidated, .removed, .bad {
      &:before {
        background-color: @imperialRed80;
      }
    }

    .under_review:before {
      background-color: @byzantiumPurple80;
    }
  }

  .num, .align-right {
    text-align: right;

    .failed {
      color: @imperialRed100;
    }
  }
  .null-field {
    font-style:italic;
  }
}

.sortable {
  display: inline-block;
  padding: 0 10px;

  & > span {
    &:extend(table.items th > span);
  }

  &:hover {
    cursor: pointer;
    background-color: @gray2;

    > span {
      color: @black;
    }
  }
  &:after {
    font-family: 'Balanced-Icon';
    &:extend(.icon-sort-none:before);
    color: @gray3;
    margin-left: 2px;
    vertical-align: sub;
  }
  &.ascending {
    &:after {
      font-family: 'Balanced-Icon';
      &:extend(.icon-sort-ascending:before);
      color: @gray6;
    }
  }
  &.descending {
    &:after {
      font-family: 'Balanced-Icon';
      &:extend(.icon-sort-descending:before);
      color: @gray6;
    }
  }
}

.timing {
  border-bottom: 0;
  margin: 0 9px 0 0;

  &.pull-left {
      float: left;
      border-left: 0px;
  }

  &:hover {
    border-bottom: 0;
  }

  &.filter-endpoints {
      .dropdown-menu {
        width: 130px;
      }
  }

  &.filter-datetime {
      .dropdown-menu {
      }
  }

  .dropdown-menu {
    //  120px = set timing width
    // 330px = width of date picker
    width: 120px + 330px + @searchBorderWidth * 8;
    padding: 0;

    .set-times {
      background-color: @white;
      float: left;
      width: 120px;
      height: 205px;
      padding: 10px 10px 57px 10px;

      > li a {
        padding: 10px 15px;
      }
    }
    .date-picker {
      padding: 10px;
      float: right;
      width: 330px;
    }

    .before, .after {
      position: absolute;
      width: 220px;
      padding-top: 10px;

      .datepicker {
        .box-shadow(none);
        background-color: @gray2;
        display: none;
      }
      .dt {
      }
      &.selected {
        .datepicker, .dt {
          background-color: @gray2;
          display: block;
        }
      }
    }
    .go {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
    .before {
      float: right;
      .dt {
        top: 50px;
        text-align: right;
      }
    }
    .after {
      float: left;
    }
    //  wrapper around dp
    .dt {
      position: absolute;
      top: 0;
      // 90px + 10px padding * 2
      right: -110px;
      width: 50%;
      padding: 10px;
      width: 90px;
    }
    //  date picker (input box with date in it)
    .dp {
      width: 75px;
      margin: 0;
      border-radius: 0;
      border: 1px solid rgb(197, 197, 197);
      &:focus, &:active {
        outline: none;
        box-shadow: none;
        border-color: #000;
      }
    }
    .datepicker {
      top: 0;
      display: block;
      width: 220px;
      border: 0;
    }
  }
}

.filter-choices {
  background-color: @white;
  padding: 10px 0;

  li {
    .sl;

    span, a {
      display: block;
      padding: 5px 20px;
      color: @gray5;
    }
    span {
      color: #e2e1ec;
    }
    a {
      &:hover {
        color: @black;
        background: transparent;
        background-image: none;
      }
    }
  }
}

.results.results-framed {
  @baseColor: @gray2;

  background-color: @white;
  border: 1px solid @baseColor;
  margin-bottom: 40px;
  float: none;
  width: auto;

  .header {
    .sl-md-b;
    background-color: @baseColor;
    border: 0 solid transparent;
    float: none;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    width: auto;
  }
}

.results.results-framed.results-error {
  .count {
    background-color: @imperialRed100;
  }
}

.results.results-framed.results-neutral {
  .count {
    background-color: @gray3;
  }
}

.datetime-picker {
  display: inline-block;

  &.dropdown.borderless .dropdown-toggle span {
    line-height: 22px;
  }

  [class^="icon-"] {
    font-size: 18px;
    color: @gray4;
    vertical-align: text-bottom;
 }
}


/* admin */

.admin-results {
  td {
    &:first-child {
      padding: 10px 10px 10px 25px !important;
    }
    a {
      display: inline !important;
      text-decoration: underline !important;
    }
  }
}

.btn-group {
  &.toggle-switch {
    .btn {
      .border-radius(0);
      width: 50px;
      min-width: 50px;
      max-width: 50px;
      padding: 10px;
      .sl;
      color: @gray4;
      border-color: @gray2;
      background-color: @white;

      &.yes, &.no-good {
        &.active {
          color: @white;
          border-color: @pineGreen60;
          background-color: @pineGreen60;
        }
      }

      &.no, &.yes-bad {
        &.active {
          color: @white;
          border-color: @imperialRed60;
          background-color: @imperialRed60;
        }
      }

      &:disabled {
        cursor: default;
      }
    }
  }
}
