@layer components {
    .transactions-dashboard {
        @apply mt-2;
    }

    .transactions-toolbar {
        @apply mt-2 grid gap-3;
    }

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

    .transactions-search {
        @apply relative;
    }

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

    .transactions-search input {
        @apply h-14 w-full pr-4 pl-11 text-base;
    }

    .transactions-select,
    .orders-select,
    .activities-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%230F172A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: right 1.05rem center;
        background-repeat: no-repeat;
        background-size: 0.95rem;
        padding-right: 2.7rem;
    }

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

    .transactions-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;
    }

    .transactions-download:hover,
    .transactions-download:focus {
        @apply bg-primary-strong text-white outline-none;
    }

    .transactions-filters {
        @apply mt-5 mb-5 flex flex-wrap gap-3;
    }

    .transaction-filter {
        @apply inline-flex h-11 min-w-12 items-center justify-center rounded-[0.85rem] bg-transparent px-4 text-base font-bold text-slate-600 transition-colors duration-200;
    }

    .transaction-filter:hover,
    .transaction-filter:focus {
        @apply bg-slate-100 text-slate-700 outline-none;
    }

    .transaction-filter.is-active {
        background: #e9edf2;
        @apply text-slate-700;
    }

    .transactions-table-shell {
        @apply overflow-hidden rounded-[1.1rem] border border-slate-200 bg-white shadow-md;
    }

    #transactionsTable_wrapper {
        @apply w-full;
    }

    #transactionsTable {
        margin: 0;
    }

    #transactionsTable thead th {
        @apply border-b border-slate-200 bg-slate-50 px-6 py-[1.15rem] text-left text-[0.95rem] font-bold text-slate-700;
    }

    #transactionsTable tbody td {
        @apply border-t-0 border-b border-slate-100 px-6 py-[1.2rem] align-middle text-base text-slate-700;
    }

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

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

    #transactionsTable_wrapper .dataTables_paginate .ellipsis {
        @apply text-slate-500;
    }

    #transactionsTable_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-bold text-slate-600 shadow-none;
    }

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

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

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

    #transactionsTable_wrapper .dataTables_paginate .paginate_button.previous::before {
        content: "\f053";
    }

    #transactionsTable_wrapper .dataTables_paginate .paginate_button.next::before {
        content: "\f054";
    }

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

    .transactions-table-footer {
        @apply flex flex-col gap-[0.85rem] px-6 pt-[1.35rem] pb-4;
    }

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

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

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

    .transactions-id {
        @apply font-bold text-slate-700;
    }

    .transactions-points {
        @apply font-extrabold;
    }
}
