table.data {
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 0 10px var(--color-secondary2);

  thead {
    th {
      background-color: var(--color-secondary2);
      color: var(--color-white);
      text-align: left;
      text-transform: uppercase;
      font-weight: bold;
      padding: 12px;

      &.expanded {
        display: none;
      }
    }
  }

  tbody {
    tr {
      background-color: var(--color-white);
      border-left: 1px solid var(--color-white);
      border-right: 1px solid var(--color-white);

      &:nth-child(even) {
        background-color: var(--color-secondary4);
      }

      td {
        padding: 12px;

        &.expanded {
          display: none;
        }
      }

      td {
        &.status {
          white-space: nowrap;
        }

        &.actions {
          text-align: right;

          a {
            text-decoration: none;
            color: var(--color-black);

            &::after {
              font-family: "Font Awesome 6 Pro";
              content: "\f054";
              padding-left: 8px;
            }
          }
        }

        div:first-child {
          margin-bottom: 8px;
        }

        .primary {
          font-weight: bold;
        }
      }
    }
  }

  tfoot {
    tr {
      background-color: var(--color-white);

      #paging {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: space-between;
        align-items: center;
        color: var(--color-secondary2);
        border-radius: 0 0 8px 8px;
        padding: 12px;

        .pagination {
          display: flex;
          gap: 8px;

          span {
            a {
              display: block;
              color: var(--color-secondary2);
              padding: 8px;
              text-decoration: none;
            }

            &.first,
            &.prev,
            &.next,
            &.last {
              a {
                text-decoration: underline;
              }
            }

            &.current {
              padding: 8px;
              color: var(--color-white);
              background-color: var(--color-black);
              border-radius: 50%;
              text-align: center;
              min-width: 2em;
            }
          }
        }
      }
    }
  }

  &:has(tbody tr:last-child:nth-child(odd)) {
    tfoot tr {
      background-color: var(--color-secondary4);
    }
  }
}

@media (min-width: 768px) {
  table.data {
    thead {
      th {
        padding: 20px;

        &.expanded {
          display: table-cell;
        }
      }
    }

    tbody {
      tr {
        td {
          padding: 20px;

          &.expanded {
            display: table-cell;
          }
        }
      }
    }

    tfoot {
      td {
        #paging {
          display: flex;
          flex-direction: row;
          padding: 20px;
        }
      }
    }
  }
}