.list-pagination {
    &__body {
        color: black;

        display: flex;
        align-items: center;
        gap: 8px;
    }

    &__arrow {
        background-color: black;
        border-radius: 4px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;

        cursor: pointer;

        &:hover {
            background-color: cl("accent");
        }
    }

    &__pages {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    &__page {
        border-radius: 4px;
        border: 1px solid rgba($color: #000000, $alpha: 0.2);

        width: 32px;
        height: 32px;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;

        font-weight: 400;
        font-size: 12px;
        line-height: 130%;

        &.empty {
            border-color: transparent;
        }

        &:hover {
            background: cl("accent");
            color: white;
            border-color: cl("accent");
        }
    }
}
