@import "table/content";
@import "table/header";
@import "table/footer";

.uex-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.12);

  .uex-table-wrapper {
    display: table;
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    .table {
      position: static;
      width: 100%;
      table-layout: fixed;
      border: none;
      margin: 0;

      thead:first-child {
        tr {
          th {
            border-bottom: solid 2px rgba(0, 0, 0, .06);
          }
        }
      }

      thead:not(:first-child).collapsed {
        tr {
          th {
            border-bottom: solid 1px rgba(0, 0, 0, .06);
          }
        }
      }

      thead.uex-table-totals {
        border-bottom: solid 2px rgba(0, 0, 0, .06);
        >tr>th {
          padding: 1rem .8rem;
          font-size: 1.1rem;
          vertical-align: middle;
        }
      }

      thead.uex-table-totals-group {
        background-color: rgba(0, 0, 0, .02);
      }

      thead.uex-table-totals-general {
        background-color: rgba(0, 0, 0, .06);
        border-bottom: none;
      }

      + .uex-table-footer {
        border-top: solid 1px rgba(0, 0, 0, .06);
      }
    }
  }

  .uex-table-group {
    >tr>th {
      padding: 0;
      .uex-table-group-table {
        width: 100%;
        border: none;
        border-spacing: 0;
        thead {
          padding: 0;
          >tr>th {
            border: none;
            vertical-align: middle;
            padding: 1rem .8rem;
            font-size: 1.1rem;
            &.uex-table-group-label {
              text-align: left;
              &:first-child {
                padding-left: 1.5rem;
              }
            }
            &.selectable {
              padding: 0 .5rem 0 1.2rem;
              width: 6.5rem;
              min-width: 6.5rem;
              max-width: 6.5rem;
              text-align: left;
              vertical-align: middle;
            }
          }
        }
        &.has-button:not(.is-collapsible) {
          .uex-table-badge {
            margin: 0 0 0 1rem;
          }
        }
        &:not(.has-button):not(.is-collapsible) {
          .uex-table-badge {
            position: relative;
            float: right;
            margin: -.3rem 0;
          }
        }
        &.is-collapsible {
          .uex-table-badge {
            margin: 0 1rem 0 0;
          }
        }
      }
    }
    .uex-table-group-button,
    .uex-table-group-actions {
      width: 150px;
      padding-top: 0;
      padding-bottom: 0;
      vertical-align: middle;
      text-align: right;
    }
  }

  .uex-table-badge {
    display: inline-block;
    padding: .2rem .4rem;
    font-weight: bold;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4rem;
    border-radius: .4rem;
    color: #777777;
    background: rgba(0, 0, 0, .12);
    vertical-align: middle;
  }

  .uex-table-error-row {
    color: #999;
    background-color: #FFFFFF;

    &:hover {
      background-color: #FFFFFF;
    }

    a {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .uex-table-empty-row {
    color: #999999;
    background-color: #FFFFFF !important;

    > .uex-table-empty-cell {
      > .uex-table-empty-text:not(:first-child) {
        display: none;
      }
    }

    &:hover {
      background-color: #FFFFFF !important;
    }
  }

  .uex-table-loading-row {
    background-color: #FFFFFF !important;

    &:hover {
      background-color: #FFFFFF !important;
    }
    .uex-spinner {
      margin: 0 auto;
    }
  }
}