@import "./variables";

.f-table {
  &.sticky-table {
    thead {
      background: #242b35;
      border-radius: $borderRadiusBase;
      overflow: hidden;
      th,
      td {
        color: $themePrimaryColor;
      }
    }
  }

  table {
    width: 100%;
    margin-bottom: 1rem;
    color: white;
    thead,
    tbody {
      tr {
        td,
        th {
          padding: 0.5rem 1rem;
          border: 0;
          word-break: break-all;
          min-width: 100px;
          vertical-align: middle;
          font-size: $tableFontSize;
          line-height: 1.25;
          min-height: 70px;
          text-align: left;
        }
        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;
      border-radius: $borderRadiusBase * 2;
      tr {
        th {
          font-weight: bold;
          height: 70px;
          // color: black;
        }
      }
    }
    tbody {
      tr {
        &:nth-child(odd) {
          td {
            background: #1c2229;
          }
        }
      }
    }
  }
  .table-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2sssrem;
    .paginationOpts__root {
      display: flex;
      align-items: center;
      .form-select {
        border: 1px solid $themePrimaryColor;
        color: white;
        background: none;
        padding: 0.5rem;
        border-radius: $borderRadiusBase;
        option {
          color: black;
          padding: 0.5rem;
          height: 30px;
        }
      }
      label {
        margin-right: 0.5rem;
      }
    }
    .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;
        }
      }
    }
  }
}