@layer components {
    .design-system {
        .table-default {
            display: flex;
            flex-direction: column;
            border-radius: 1rem;
            border-width: 1px;
            border-color: rgb(222 224 227);

            &:where(.dark-mode *) {
                border-width: 2px;
                border-color: rgba(255, 255, 255, 0.18);
            }
        }

        .table-default table {
            border-spacing: 0px;
        }

        .table-topbar {
            padding: 1rem;
            border-radius: 1rem 1rem 0 0;
            border-color: rgb(222 224 227);
            background-color: rgb(247 247 248);

            border-bottom-width: 1px;
            border-color: var(--gray-3);
            position:sticky;
            left:0;

            &:where(.dark-mode *) {
                border-color: var(--gray-10);
                background-color: rgb(20 21 26);
                color: rgb(255 255 255);
            }
        }

        .table-footer {
            padding: 1rem;
            border-radius: 0 0 1rem 1rem;
            border-color: rgb(222 224 227);

            border-top-width: 1px;
            border-color: var(--gray-3);
            position:sticky;
            left:0;

            &:where(.dark-mode *) {
                border-color: var(--gray-10);
            }
        }

        .table-default th {
            border-color: rgb(222 224 227);
            padding: 1.5rem !important;
            text-align: left;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 400;

            color: var(--text-secondary);
        }

        .table-default td {
            border-width: 1px;
            border-left-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-top-width: 1px;

            border-color: rgb(222 224 227);
            padding: 1.5rem !important;
            font-size: 1.125rem;
            line-height: 1.75rem;

            &:where(.dark-mode *) {
                border-color: rgba(255, 255, 255, 0.18);
            }
        }

        .table-default:not(.table-mobile) tbody tr:hover td {
            background-color: rgb(247 247 248);

            &:where(.dark-mode *) {
                background-color: rgb(20 21 26);
            }
        }

        .table-default:not(:has(.table-footer)) tbody tr:hover:last-child {
            td:first-child {
                border-radius: 0 0 0 1rem;
            }

            td:last-child {
                border-radius: 0 0 1rem 0;
            }
        }

        @media (width <= 1000px) {
            .table-mobile {
                tr {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    padding: 1.5rem;
                    border-top-width: 1px;
                    border-color: rgb(222 224 227);

                    &:where(.dark-mode *) {
                        border-color: rgba(255, 255, 255, 0.18);
                    }

                    td {
                        display: flex;
                        border: none;
                        padding: 0px !important;
                    }
                }
            }
        }
    }
}