@import "./variables";

.f-table {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  &.sticky-header {
    thead {
      background: #242b35;
      td {
        color: $themePrimaryColor;
      }
    }
  }
  // > .row {
  //   max-height: 70vh;
  //   overflow-y: auto;
  // }
  .controlRow__root {
    display: flex;
    justify-content: flex-end;
    margin-top: 3rem;
    .ButtonGroup__root {
      button {
        border: 0;
        border-radius: 100px;
        background: none;
        color: #ffffff;
        &:disabled {
          background: $themePrimaryColor !important;
          color: #1c2229;
          font-weight: 700;
          opacity: 0.75;
          width: 40px;
          min-width: 40px;
          height: 40px;
        }
        &:first-child,
        &:nth-child(2),
        &:last-child,
        &:nth-last-child(2) {
          background: none !important;
          color: #ffffff !important;
          width: auto !important;
        }
        &:nth-child(2) {
          margin-right: 0.5rem;
        }
        &:nth-last-child(2) {
          margin-left: 0.5rem;
        }
        &:first-child,
        &:last-child {
          background-image: url("../images/f-icons/f-icon-pagination.svg") !important;
          background-position: center center !important;
          background-repeat: no-repeat !important;
          background-size: 10px;
          text-indent: -10000px;
          overflow: hidden;
        }
        &:last-child {
          transform: rotate(180deg);
          vertical-align: -2px;
        }
      }
    }
  }
  table {
    width: 100%;
    margin-bottom: 1rem;
    color: white;
    thead,
    tbody {
      tr {
        td {
          padding: 0.5rem 1rem;
          // border-bottom-width: 1px;
          // border-right-width: 0;
          // border-style: solid;
          // border-color: #eee;
          border: 0;
          word-break: break-all;
          min-width: 100px;
          vertical-align: middle;
          font-size: $tableFontSize;
          line-height: 1.25;
          min-height: 70px;
        }
        td:first-child {
          border-top-left-radius: $borderRadiusBase * 2;
          border-bottom-left-radius: $borderRadiusBase * 2;
        }
        td:last-child {
          border-top-right-radius: $borderRadiusBase * 2;
          border-bottom-right-radius: $borderRadiusBase * 2;
        }
      }
    }
    thead {
      position: sticky;
      top: 0;
      z-index: $zIndex;
      background: #242b35 !important;
      border-radius: $borderRadiusBase * 2;
      tr {
        td {
          font-weight: bold;
          height: 70px;
          // color: black;
        }
      }
    }
    tbody {
      tr {
        &:nth-child(odd) {
          td {
            background: #1c2229;
          }
        }
      }
    }
  }
}