@layer components {
  .neumorphic-tabel {
    thead {
      tr {
        th {
          @apply neumorphic-shadow-12;
          color: var(--neumorphic-text-color);
          padding: 0.5rem;
          text-align: left;
        }
      }
    }
    tbody {
      tr {
        &:hover {
          @apply neumorphic-shadow-6;
        }
        td {
          @apply neumorphic-shadow-inset-6;
          padding: 0.25rem 0.5rem;

          td:hover {
            @apply neumorphic-surface-convex;
          }
        }
      }
    }
  }
}