.booking-history {
  .transaction-status {
    font-size: $font-size-small;
  }

  .tabs {
    position: unset;

    .tab-title {
      font-size: $font-size-base;
    }
  }

  .tab-content {
    // Margin-top hack to get the ion content to work nicely with tabs bar
    // Additional 2px to show the selected tab line
    margin-top: $tabs-height + 2px;
  }

  .feedback {
    padding-top: $padding-large-vertical * 3;
    padding-bottom: $padding-large-vertical;

    text-align: center;
    color: $normal-grey;

    .fa-credit-card {
      font-size: $font-size-base * 3;
    }

    .message {
      margin-top: $padding-base-vertical;
    }
  }

  .item {
    padding-left: $padding-base-horizontal;
    padding-right: $padding-base-horizontal;
  }

  .transaction-header {
    .table-cell {
      font-weight: $font-weight-bold;
    }
  }

  .transaction-details {
    padding-bottom: $padding-large-vertical;
    padding-top: 0px;
  }

  .transaction-row {
    display: flex;
    border-bottom: 1px solid lighten($light-grey, 20%);
    font-size: $font-size-small;

    .col-left {
      width: 30%;
      max-width: 90px;
      min-width: 85px;
      color: $light-grey;
      font-weight: $font-weight-medium;

      .transaction-button {
        text-align: center;
        border-radius: 4px;
        
        &.balanced {
          $paid-color: rgb(147, 239, 167);
          background: $paid-color;
          color: darken($paid-color, 50%);
          border: 1px solid darken($paid-color, 50%);
        }

        // TODO: add colour for refund
        &.refund {
          $refund-color: rgb(195, 238, 254);
          background: $refund-color;
          color: darken($refund-color, 50%);
          border: 1px solid darken($refund-color, 50%);
        }
      }
    }

    .table-cell {
      padding: $table-cell-padding;
    }

    .transaction-cost {
      margin-left: auto;
    }
  }
}
