/* ResourceBrowser style */

#browser_wrapper {
  width: $rbrowser-wrapper-width;
  min-width: 1000px;
  background-color: $rbrowser-header-background-color;
  border: $rbrowser-data-table-border-width solid $rbrowser-data-table-border-color;
  border-radius: 4px;

  .tfoot {
    clear: both;
    padding: 8px;
    border-top: 1px solid $rbrowser-data-table-border-color;
    background-color: $rbrowser-footer-background-color;
    font-size: 11px;
    line-height: 14px;

    span {
      display: inline-block;

      &.navigation_table_count {
        width: $rbrowser-navigation-table-width;
      }
    }
  }

  form,
  table {
    margin-bottom: 0;
  }

  .navigation_wrapper,
  .content_wrapper {
    position: relative;
    float: left;
  }

  div.navigation_wrapper {
    z-index: 2;
    width: $rbrowser-navigation-table-width;

    div.table_wrapper,
    thead th.table_header {
      border-right: 0 none;
      border-top-right-radius: 0;
    }

    td {
      &:first-child {
        border-left: 0 none;
      }

      &.breadcrumb_td {
        padding-right: 0;
        max-width: 200px;
      }
    }

    tr.current_selected td {
      background-color: $rbrowser-selected-color;
    }

    tfoot td {
      border-right: 0 none;
      border-bottom-right-radius: 0;
    }

    ul.breadcrumb {
      padding-right: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: 0;
      white-space: nowrap;
    }

    tbody td {
      border-right: $rbrowser-data-table-border-width solid $rbrowser-data-table-border-color;
      background-color: $rbrowser-body-background-color;

      &.anchor {
        word-wrap: break-word;
        white-space: normal;
        max-width: 145px;
      }
    }
  }

  div.content_wrapper {
    width: $rbrowser-content-table-width;

    div.table_wrapper,
    thead th.table_header {
      border-left: 0 none;
      border-top-left-radius: 0;
    }

    td {
      border-bottom: $rbrowser-data-table-border-width solid $rbrowser-data-table-border-color;

      &:last-child {
        border-right: 0 none;
      }

      &.breadcrumb_td {
        padding-left: 0;
      }
    }

    tfoot td {
      border-left: 0 none;
      border-bottom-left-radius: 0;
    }

    /* FIXME(Ke Wu): for now there are two breadcrumb tr in both table
    * and this one in the content table is hidden. This hack is made to
    * fix the alignment of two table, needs a better solution in the
    * future.
    */
    ul.breadcrumb {
      padding-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;

      li {
        visibility: hidden;
      }
    }
  }

  table {
    border-collapse: collapse;

    thead {
      tr th {
        border-bottom: 0;
        background-color: $rbrowser-header-background-color;
      }
    }

    tbody {
      tr {
        &:last-child td {
          border-bottom: 1px solid $rbrowser-data-table-border-color;
          border-radius: 0;
        }

        &.empty td {
          height: $rbrowser-td-height;
          padding: $rbrowser-actions-column-padding;
        }
      }

      td.actions_column {
        position: static;
      }
    }
  }

  .breadcrumb {
    padding: 6px;
    margin: 0 0 1px;
  }
}