@layer components {
    .activities-toolbar {
        @apply mt-8 grid gap-3;
    }

    @media (min-width: 992px) {
        .activities-toolbar {
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: center;
        }
    }

    .activities-search {
        @apply relative;
    }

    .activities-search .fa-magnifying-glass {
        @apply pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400;
    }

    .activities-search input {
        @apply h-14 rounded-[0.9rem] border-primary pl-11 text-base;
    }

    .activities-search input:focus {
        @apply border-primary ring-primary/10;
    }

    .activities-select {
        @apply h-14 min-w-[7.5rem] rounded-[1rem] border border-slate-300 px-4 font-semibold text-slate-900 shadow-none;
    }

    .activities-download {
        @apply inline-flex h-14 min-w-40 items-center justify-center gap-[0.65rem] rounded-[0.9rem] border-0 bg-primary px-5 font-bold text-white transition-colors duration-200;
    }

    .activities-download:hover {
        @apply bg-primary-strong text-white;
    }

    .activities-table-shell {
        @apply mt-5 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    #activitiesTable_wrapper,
    #productsTable_wrapper {
        @apply w-full;
    }

    #activitiesTable,
    #productsTable {
        margin: 0;
    }

    #activitiesTable thead th,
    #productsTable thead th {
        @apply border-b border-slate-200 bg-slate-50 px-5 py-[1.15rem] text-[0.95rem] font-bold text-slate-700;
    }

    #activitiesTable tbody td,
    #productsTable tbody td {
        @apply border-t-0 border-b border-slate-100 px-5 py-[1.15rem] align-middle text-[0.95rem] text-slate-700;
    }

    #activitiesTable tbody tr:last-child td,
    #productsTable tbody tr:last-child td {
        @apply border-b-0;
    }

    #activitiesTable_wrapper .dataTables_paginate,
    #productsTable_wrapper .dataTables_paginate {
        float: none;
        @apply flex items-center justify-end gap-[0.55rem];
    }

    #activitiesTable_wrapper .dataTables_paginate .ellipsis,
    #productsTable_wrapper .dataTables_paginate .ellipsis {
        @apply text-slate-500;
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button,
    #productsTable_wrapper .dataTables_paginate .paginate_button {
        min-width: 2.35rem;
        height: 2.35rem;
        margin: 0;
        padding: 0.35rem 0.7rem;
        display: inline-flex;
        @apply items-center justify-center rounded-[0.8rem] border border-slate-300 bg-white font-semibold text-slate-600 shadow-none;
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button:hover,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.current,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.current:hover,
    #productsTable_wrapper .dataTables_paginate .paginate_button:hover,
    #productsTable_wrapper .dataTables_paginate .paginate_button.current,
    #productsTable_wrapper .dataTables_paginate .paginate_button.current:hover {
        @apply border-primary bg-primary text-white;
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button.previous,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.next,
    #productsTable_wrapper .dataTables_paginate .paginate_button.previous,
    #productsTable_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 0;
        color: transparent;
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button.previous::before,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.next::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.previous::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.next::before {
        font-family: "Font Awesome 6 Free";
        font-size: 0.95rem;
        font-weight: 900;
        color: #334155;
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button.previous::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.previous::before {
        content: "\f053";
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button.next::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.next::before {
        content: "\f054";
    }

    #activitiesTable_wrapper .dataTables_paginate .paginate_button.previous:hover::before,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.next:hover::before,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.previous.current::before,
    #activitiesTable_wrapper .dataTables_paginate .paginate_button.next.current::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.previous:hover::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.next:hover::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.previous.current::before,
    #productsTable_wrapper .dataTables_paginate .paginate_button.next.current::before {
        color: #fff;
    }

    .activities-table-footer {
        @apply flex flex-col gap-[0.85rem] px-5 py-4 pb-5;
    }

    @media (min-width: 768px) {
        .activities-table-footer {
            @apply flex-row items-center justify-between;
        }
    }

    .activities-table-footer__summary {
        @apply text-[0.95rem] text-slate-600;
    }

    .activities-table-footer__pagination,
    #activitiesTable_wrapper .dataTables_paginate > span,
    #productsTable_wrapper .dataTables_paginate > span {
        @apply flex items-center gap-[0.55rem];
    }
}
