table {
  border-collapse: separate;
  width: 100%;
}

table.index_table {
  @extend %box;
  background-color: $white;

  .centralized {
    text-align: center;
  }

  tr:last-child {
    td:first-child {
      border-bottom-left-radius: $radius;
    }

    td:last-child {
      border-bottom-right-radius: $radius;
    }
  }

  th,
  td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;

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

  thead th {
    @extend %header;
    border: 1px solid $silver;
    border-width: 0 1px 1px 0;
    vertical-align: bottom;

    &:first-child {
      border-top-left-radius: $radius;
    }

    &:last-child {
      border-top-right-radius: $radius;
    }

    &:only-child {
      border-radius: $radius $radius 0 0;
    }

    &.sortable a {
      background: asset-url('active_admin/orderable.png') 0 6px no-repeat;
      display: block;
      padding-left: 12px;
    }

    &.sorted-asc,
    &.sorted-desc {
      background-color: shade($white, 10%);
      background-image: linear-gradient(to bottom, shade($white, 10%), shade($white, 15%));
    }

    &.sorted-asc a {
      background-position: 0 -25px;
    }

    &.sorted-desc a {
      background-position: 0 -55px;
    }

    a {
      text-decoration: none;
    }
  }

  tbody {
    tr {
      &:nth-child(even) td {
        background-color: shade($white, 2.5%);
      }

      &:hover td {
        background-color: shade($white, 5%);
      }

      &:last-child td {
        border-bottom: none;
      }

      &.selected td {
        background-color: tint($yellow, 90%);
      }
    }

    td {
      background-color: $white;
      border: 1px solid tint($silver, 35%);
      border-width: 0 1px 1px 0;
      transition: background 250ms;
    }
  }

  .view_link,
  .edit_link,
  .delete_link {
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    height: 16px;
    margin: 0 5px;
    opacity: 0.75;
    position: relative;
    text-indent: -99999px;
    transition: opacity 250ms;
    width: 16px;

    &:hover {
      opacity: 1;
    }
  }

  .delete_link {
    background-image: asset-url('formadmin/trash.svg');
  }

  .edit_link {
    background-image: asset-url('formadmin/edit.svg');
  }

  .view_link {
    background-image: asset-url('formadmin/view.svg');
  }

  // Medias
  @media #{$phone-and-tablet-screen} {
    overflow: hidden;

    &,
    tr,
    th,
    td,
    thead,
    tbody {
      display: block;
      text-align: left !important;
      width: 100% !important;
    }

    tr {
      padding: 20px;
    }

    th,
    td {
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 5px 0 !important;

      &:empty {
        display: none;
      }
    }

    tbody tr {
      border-top: 1px solid $silver;
    }
  }
}

// Resource Attributes Table
.attributes_table,
.panel_contents {
  overflow: hidden;

  table {
    width: 100%;
  }

  th,
  td {
    padding: 8px 0;
    text-align: left;
  }

  th {
    width: 200px;
  }

  tr + tr {
    th,
    td {
      border-top: 1px solid tint($silver, 50%);
    }
  }

  .empty {
    font-size: 12px;
    opacity: 0.5;
    text-transform: uppercase;
  }

  // Medias
  @media #{$phone-screen} {
    th,
    td {
      display: block;
      padding: 0 0 5px;
      width: 100%;
    }

    tr + tr {
      th {
        padding: 20px 0 5px;
      }

      td {
        border-top: 0;
      }
    }
  }
}
