@use "variables";

.fwe-table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

table.fwe-table {
  border-collapse: collapse;
  width: 100%;

  tr {
    th {
      background-color: variables.$white;
      border-bottom: 2px solid variables.$background;
      padding-top: 18px;
      padding-bottom: 9px;
      padding-left: 16px;
      padding-right: 16px;
      font-size: variables.$font-size-md;
      text-align: left;
      vertical-align: text-bottom;

      &.fwe-table-order {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        white-space: nowrap;
        direction: rtl;
        font-family: variables.$font-family-base;
        display: table-cell;
        font-size: variables.$font-size-md;

        &::before {
          content: "";
          display: inline-block;
          width: 16px;
          height: 16px;
          background-size: cover;
          position: relative;
          top: 2px;
          left: variables.$spacer-xxs;
        }

        &::before {
          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzMzMzMzMyIvPjwvc3ZnPg==");
        }

        &.fwe-table-order-ascending {
          &::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNjQ2IDkuMzUzOTdMOCA1LjcwNjk3TDQuMzU0IDkuMzUzOTdMMy42NDYgOC42NDU5N0w4IDQuMjkyOTdMMTIuMzU0IDguNjQ1OTdMMTEuNjQ2IDkuMzUzOTdaIiBmaWxsPSIjMDA5MWRjIi8+PC9zdmc+");
          }
        }

        &.fwe-table-order-descending {
          &::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzAwOTFkYyIvPjwvc3ZnPg==");
          }
        }
      }

      &.fwe-active {
        color: variables.$hero;
      }
    }

    td {
      &.fwe-v-align-middle {
        vertical-align: middle;
      }

      &.fwe-t-align-center {
        text-align: center;
      }

      &.fwe-t-no-wrap {
        white-space: nowrap;
      }

      background-color: variables.$white;
      border-bottom: 2px solid variables.$background;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 16px;
      padding-right: 16px;
      vertical-align: top;

      img.fwe-td-img {
        display: block;
        float: left;
        align-self: center;
        object-fit: contain;
        height: 23px;
        margin-right: 16px;
      }
    }

    &.fwe-tr-sm {
      height: 48px;
      max-height: 48px;

      td img.fwe-td-img {
        height: 23px;
        width: 23px;
      }
    }

    &.fwe-tr-md {
      height: 64px;
      max-height: 64px;

      td img.fwe-td-img {
        height: 39px;
        width: 39px;
      }
    }

    &.fwe-tr-lg {
      height: 96px;
      max-height: 96px;

      td img.fwe-td-img {
        height: 71px;
        width: 71px;
      }
    }

    &.fwe-tr-xl {
      height: 128px;
      max-height: 128px;

      td img.fwe-td-img {
        height: 103px;
        width: 103px;
      }
    }
  }

  &.fwe-table-md {
    tr td {
      height: 39px;
      max-height: 39px;
    }
  }

  &.fwe-table-lg {
    tr td {
      height: 71px;
      max-height: 71px;
    }
  }

  &.fwe-table-xl {
    tr td {
      height: 103px;
      max-height: 103px;
    }
  }
}