/*
* pages.less
*
* Here we define less/css for the main section of pages.
*
*/

.main-header {
  .dropdown span {
    color: @black !important;
  }

  >.row {
    height: 100%;
  }

  div.label {
    display: table;
    height: 100%;

    .icon {
      background-image: @iconsFile;
      text-indent: -4000px;
    }

    span {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  }
  div.amount {
    .sl-md-sb;
  }

  div.title {
    height: 100%;

    span {
      // vertically center the text
      display: block;
      line-height: 75px;

      // hide long lines with an ellipsis
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.buttons {
  float: right;
  display: inline-block;

  > div {
    display: inline-block;
  }

  .buttons-container {
    height: 100%;

    > div {
      display: inline-block;
    }

    .modal-container {
      display: inline-block;
      overflow: visible;
    }
  }
}

.linked-resources {
  dt {
    .sl-sb;
    line-height: 18px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    & > [class^="icon-"] {
      color: @black;
      margin-right: 2px;
      vertical-align: -2px;
    }
  }

  dd {
    .sl;
    color: @gray6;
    margin-left: 20px;
    margin-bottom: 23px;
    margin-top: -2px;
    overflow-wrap: break-word;
  }

  ul {
    margin-bottom: 18px;

    li {
      margin: 5px 0;
    }
  }
}

.side-panel {
  .summary {
    margin-bottom: 40px;

    p {
      color: @gray7;
      padding-top: 3px;
    }
  }

  dd.status {
    & > span {
      .sl-sb;
    }

    &:before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius:100%;
      margin-right: 1px;
    }

    .btn {
      margin-top: -3px;
    }

    &.succeeded, &.captured, &.created, &.won, &.paid, &.updated, &.deposited, &.verified, &.active, &.good {
      span {
        color: @pineGreen100;
      }

      &:before {
        background-color: @pineGreen80;
      }
    }

    &.needs_attention, &.pending, &.scheduled, &.unverified, &.unverifiable {
      span {
        color: @curryYellow100;
      }

      &:before {
        background-color: @curryYellow80;
      }
    }

    &.failed, &.expired, &.lost, &.arbitration, &.canceled, &.voided, &.invalidated, &.removed, &.bad, &.overdue {
      span {
        color: @imperialRed100;
      }

      &:before {
        background-color: @imperialRed80;
      }
    }

    &.under_review {
      span {
        color: @byzantiumPurple100;
      }

      &:before {
        background-color: @byzantiumPurple80;
      }
    }

    &.overdue {
      &:before {
        font-family: 'Balanced-Icon';
        &:extend(.icon-overdue:before);
        font-size: 12px;
        color: @imperialRed80;
        background-color: transparent;
        margin-right: 4px;
        vertical-align: -1px;
      }
    }
  }
}

//  each section of information should look like
//  <section class="thisthing-info">...</section>
section[class$="-info"] {
  margin: 0 0 4em;

  header {
    h3 {
      margin-bottom: 5px;
      line-height: 1em;
      .modal-container {
        display: initial;
      }
    }
    margin-bottom: 10px;
    .add {
      float: right;
    }
  }
}

@itemIconBackground: @gray4;
@itemBackground: @gray2;

.span11 + .span8 {
  section[class$="-info"] {
    float: left;
    width: 100%;
  }
}

.sidebar-items {
  li {
    background-color: @itemBackground;
    margin-bottom: 5px;
    clear: both;
    width: 100%;
    position: relative;

    a, a:visited, a:hover {
      color: @gray5;
    }
  }
  .icon {
    background-color: @itemIconBackground;
    width: 60px;
    height: 60px;
    display: block;
    float: left;
    background-image: @iconsFile;
    text-indent: -4000px;
  }
  .details {
    margin-left: 60px;
    padding: 10px;
    height: 60px;

    .name {
      display: block;
    }

    .summary {
      float: left;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      white-space: nowrap;
    }
  }
  .actions {
    background-color: @itemIconBackground;
    clear: both;
    text-align: right;
    padding: 5px;
    color: @white;
    font-style: italic;
  }
}

.bank-account-info {
  .icon {
    background-position: -123px -300px;
  }

  .icon-verified {
    background-position: -63px -300px;
  }
}

.card-info {
  .icon {
    background-position: -60px -360px;
  }
}

.drawer {
  display: none;
  font-size: 12px;
  color: @gray8;
}

.drawer-open {
  display: block;
}

.dispute-alert {
  margin: -45px -45px 45px -45px;

  .notification-center-message {
    text-align: left;
    line-height: 33px;
  }
}

.dispute-note {
  padding: 15px 25px;
  margin-top: 20px;
  border: 1px solid @gray2;

  dt {
    .sl-sm-sb;
    width: 100%;
    float: none;
  }

  dd {
    .sl-sm;
    color: @gray6;
    margin-bottom: 10px;
    display: block;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.body-panel {
  h3 {
    .icon-disputes {
      color: @curryYellow80;
      margin-left: 10px;
    }
  }
}
